*{box-sizing: border-box;}



:root {

	--main-bg-clr: #171b24; /* main bg color even */

	--main-bg-clr-drk: #1f1724 ; /* main bg color odd */	

	--main-txt-clr: #e5e5e5; /* text color */

	--main-hdg-clr: #B06AB3; /* pink color */

	--sec-bg-clr: #242a36;

	--bg-trs50: rgb(0 0 0 / 50%);

	--brd-clr: #4F954C; /* green color */

	--brd-rad: 0;

	--main-brd-rad: 8px;

	--sec-brd-rad: 50%;

}



a {

	color: var(--main-hdg-clr);

	text-decoration: none;

}



a:hover, a:focus {

	color: var(--brd-clr);

}



.icon {

    color: var(--main-hdg-clr);

    font-size: 2em;

}



body {

	display: grid;

	grid-template-areas:

		"nav nav"

		"header header"

		"main main"

		"footer footer";

	font-size: 16px;

	font-family: 'Jura', sans-serif;

	grid-template-columns: 1fr;

	line-height: 1.5;

	background: #101213;

	color: var(--main-txt-clr);

	margin: 0;

	padding: 0;

	max-width: 1300px;

	margin: 0 auto;

}



h1 {

	font-family: Roboto, sans-serif;

	line-height: 1;

	color: var(--main-hdg-clr);

	border-bottom: 2px solid var(--brd-clr);

	font-size: calc(1em + 1vw);

}

h1:before {

    content: " ";

    display: block;

    visibility: hidden;

    margin-top: -7em;

    height: 8em;

}

p {
padding: 10px;
margin: 2px 0;
background: var(--sec-bg-clr);
border-radius: var(--main-brd-rad);
}



nav {

	grid-area: nav;

	background: var(--main-bg-clr);

	position: fixed;

	bottom: 0;

	left:0;

	z-index: 1;

	width: 100%;

}



nav ul {

	display: flex;

	padding: 0;

	margin: 0;

	justify-content: center;

	gap: 0 5px;

}



nav li {

	display: list-item;

	list-style: none;

	font-weight: bold;

	font-family: 'Roboto', sans-serif;

	position: relative;

	padding: 10px 5px;

	flex-grow: 0;

	flex-shrink: 1;

}



nav li a {

	color: var(--main-txt-clr);

	text-shadow: 0 1px 1px rgb(0 0 0 / 50%);

	position: relative;

	text-decoration: none;

	font-size: calc(0.6em + 1vw);

}



nav li:hover a, nav li:focus a     {

	color: var(--main-hdg-clr);    

}



nav li::before {

	content: '';

	display: block;

	position: absolute;

	width: 100%;

	height: 3px;

	bottom: 0;

	left:0;

	background: var(--main-hdg-clr);

	transform: scale(0);

	transform-origin: left;

	transition: transform cubic-bezier(1, 0.21, 0.46, 1.11) 500ms;

}



nav li:hover::before {

    transform: scale(1);

}



nav span {

	display: none;

}



header {

	grid-area: header;

	position: relative;

}



.header-image {

	background-image: url("./images/halo4-large-hero-1920x675-new-9c4f9e45505645a7aff35068944e3506.jpg");

	background-size: cover;

	width: 100%;

	height: 365px;

	display: flex;

	flex-direction: column;

	justify-content: flex-end;

	gap: 10px 0;

}



.logo {

	background-image: url("./images/db_Logo-T2.png");

	background-size: 100%;

	background-repeat: no-repeat;

	display: block;

	max-width: 444px;

	height: 188px;

	width: 100%;

}



main {

	grid-area: main;

	background: var(--main-bg-clr);

	border-radius: 5px;

}



main > div {

	padding: 10px;

}



main img

 {

    margin: 0 auto;

    display: grid;

}



section {
	padding: 10px;
	border-bottom: 1px solid var(--main-hdg-clr);
}



main section:nth-child(even) {

	background: var(--main-bg-clr-drk);

}



.home a img {

	transform: scale(0.6);

	transition: transform cubic-bezier(1, 0.01, 0.87, 0.99) 200ms;

	max-width: 100%;

}



.home a img:hover {

    transform: scale(1);

}



.home > img, .rules img {
    
	max-width: 200px;
    
	width: 100%;
    
	height: auto;
	
}



.notice {

    display: flex;

    justify-content: center;

    background: var(--brd-clr);

    padding: 5px;

    border-radius: var(--main-brd-rad);

}



.roster {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas:
		"heading heading"
		"members inactive"
		"recruits hof";
	gap: 5px;
}



.roster h1 {

	grid-area: heading;

}



.roster h2 {

	text-align: center;

	background: var(--bg-trs50);

	margin: 0;

	border-radius: 8px 8px 0 0;

}



.leader, .member {

    font-weight: bold;

}



.leader {

	color: yellow;

}



.member {

	color: turquoise;

}



.members {

	grid-area: members;

}



.inactive {

	grid-area: inactive;

}



.hof {

	grid-area: hof;

}



.recruits {

	grid-area: recruits;

}



h4 {
	
text-align: center;

}



.roster p{
display: flex;
flex-direction:column;
justify-content:center;
font-size: 0.8em;
margin: 0;
border-top: 2px solid var(--brd-clr);
border-radius: 0 0 8px 8px;
}



.server-status {

    display: flex;

    justify-content: space-evenly;

    flex-flow: wrap;

    gap: 15px 5px;

}

.server-status a {

    position: relative;

}



.server-status a::before {

    content: '';

    position: absolute;

    font-size: 17px;

    font-weight: bold;

    left: 0;

    bottom: 1.5em;

    background: var(--main-hdg-clr);

    border-radius: 8px 8px 0 0;

    width: 25px;

    height: 20px;

    text-align: center;

    font-family: 'Roboto', sans-serif;

    color: #ececec;

}



.server-status a:first-child:before{

    content: '1';

}



.server-status a:nth-child(2):before{

    content: '2';

}



.server-status a:last-child:before{

    content: 'CE'

}



.server-status a:hover:before{

	background: var(--brd-clr);

}



.server-status a img {

	max-width: 350px;

	width: 100%;

	border: 1px solid;

}



.server-list {

    display: flex;

    justify-content: space-evenly;

    flex-flow: wrap;

}



.server-list-item iframe {
    border: 0;
    overflow: hidden;
}



.note {

    display: block;

    background: var(--bg-trs50);

    margin-left: 5px;

    font-size: 0.9em;

    padding: 5px;

    border-radius: var(--main-brd-rad);

}



.note strong {	

	color: var(--brd-clr);

	margin-right: 5px;	

	font-family: 'Roboto', sans-serif;

}



.outer-links {

    display: grid;

    grid-template-columns: 1fr;

    place-items: center;

    text-align: center;

}



.outer-links img {

    max-width: 260px;

    width: 100%;

}



footer {

	grid-area: footer;

	margin-bottom: 3em;

}



footer p {

	text-align: center;

	background: var(--main-bg-clr);

	border-radius: 0 0 5px 5px;

}



@media (min-width: 700px){

	.home, .rules, .donate {

		display: grid;

		grid: auto-flow / 3fr minmax(400px, 700px);

		gap: 5px;

	}



	.home h1, .rules h1, .donate h1 {

		grid-column: 1 / -1;

	}



	.home p, .home span, .rules ol, .donate p {

		grid-column: 2 / 3;

	}



	.home a {

		grid-column: 2 / 3;

	}

	.home img, .rules img {

		position: sticky;

		top: 45px;

		max-width: 200px;

	}
	.donate img {
		max-width: initial;

}
	nav {

		top: 0;	

		bottom: inherit;

	}

	nav li a {

		font-size: 1em;

	}

	nav ul{

		flex-direction: row;

}

	nav span {

		display: inline-block;

		vertical-align: middle;

		text-transform: uppercase;

	}

	.icon {

		font-size: 1em;

		margin-right: 3px;

	}	

    .outer-links {

		grid-template-columns: repeat(2, 1fr);

	}	

	.roster {

		grid-template-columns: repeat(4, 1fr);

		grid-template-areas:

			"heading heading heading heading"

			"members inactive recruits hof";

}

	footer {

		margin-bottom: 0;

	}

}