body{
font-family:Arial, sans-serif;
background:#990900;
max-width:900px;
margin:0 auto;
padding:5px;
}

.wrapper{
width:100%;
max-width:900px;
}

.header img{
width:100%;
max-height:250px;
object-fit:cover;
display:block;
}

ul{
list-style:none;
padding:0;
margin:0;
}

a{
color:white;
text-decoration:none;
display:block;
padding:10px;
}


input[type="checkbox"] {
    display: none;
}



 .menu input{
display:none;
}

/* ---------- MOBILE ---------- */

@media (max-width:767px){

.hamburger{
display:block;
width:60px;
height:50px;
background:#212e53;
cursor:pointer;
position:relative;
padding: 5px;
margin: 5px 0px 0px 0px;
}

.hamburger span{
display:block;
height:6px;
background:white;
margin:8px;
border-radius:3px;
}

.menu{
display:none;
}

#menuToggle:checked ~ .menu{
display:block;
}

.level1{
background:#ce6a6b;
font-size:7vw;
}

.level1 > li{
border-bottom:1px solid white;
}

.level2{
display:none;
background:#ebaca2;
font-size:0.8em;
}

.submenu input:checked ~ .level2{
display:block;
}

.level2 li{
padding-left:20px;
border-bottom:1px solid white;
}

.arrow{
float:right;
}

}

/* ---------- DESKTOP ---------- */

@media (min-width:768px){

.hamburger{
display:none;
}

.level1{
display:flex;
justify-content:center;
background:#999;
height:45px;
font-size:1.8em;
}

.level1 > li{
position:relative;
width:25%;
border-right:1px solid white;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
}

.level1 > li:first-child{
border-left:1px solid white;
}

.level1 > li:hover{
background:#787878;
}

.level2{
position:absolute;
top:45px;
left:0;
width:100%;
display:none;
background:#ce6a6b;
font-size:0.8em;
}

.submenu:hover .level2{
display:block;
}

.level2 li{
border-top:1px solid white;
}

.level2 li:hover{
background:#ebaca2;
}

.arrow{
display:none;
}

}