@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

html{
    font-size:16px;
    --grey: #686868;
    --orange: #ff7800;
}

@media screen and (max-width:768px){
    html{ font-size: 12px }
}

body{
	margin:0px;
	padding:0px;
	color: #000;
	font-family: "Noto Sans", sans-serif;
	font-size: 1rem;
	background-color:var(--grey);
    display:grid;
    grid-template-columns:auto min(100vw, 1000px) auto;
    & > *{ grid-column: 2 }
}

header{
    padding:20px 0;
    width:100%;
    & > img{
        max-height:250px;
        max-width:100%;
    }
}

nav{
    background:var(--orange);
    border-radius:2px;
}

nav ul{
	margin:0;
	list-style:none;
    display:flex;
    flex-wrap:wrap;
    width:calc(100% - 60px);
    padding:0 30px;
    justify-content:space-between;
}

nav ul li a{
    display:block;
    padding:0 30px;
    height:60px;
    line-height:60px;
	font-size:1.5rem;
	text-decoration:none;
	color:#fff;
	font-weight:bold;
	outline:none;
    cursor:pointer;
    &:hover{ color:var(--grey) }
}
nav ul :is(li.current, li:hover) a{ color:var(--grey) }

main{
	padding:25px;
    margin:25px 0;
	background-color:#fff;
    display:flex;
    flex-direction:column;
    gap:25px;
    border-radius:2px;
}
main > section{
    clear:both;
}

footer{
	height: 42px;
	padding: 20px 30px 0;
    margin-bottom:25px;
	text-align: center;
	background-color:var(--orange);
    border-radius:2px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:25px;
    & > *{
        color:#fff;
        font-size:1.2rem;
    }
}

p, a, li{ font-size: 1.2rem }

img.border{
    border:5px solid var(--orange);
}

.float-left{
    float:left;
    margin-right:25px;
}
.float-right{
    float:right;
    margin-left:25px;
}
.clear{ clear: both }

.two-col-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px 50px;
}