:root{
  --red:#fa2d48;
}
html,body{
  background-color:#091820;
  margin:0;
  padding:0;
  font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,"Helvetica Neue",Arial,sans-serif;
}
a{
  text-decoration:none;
}
input{
  position:absolute;
  opacity:0;
}
nav{
  z-index:4;
  width:100%;
  height:48px;
  background-color:#1a272e;
  position:fixed;
  font-weight:800;
  left:0;
  top:0;
  right:0;
  display:inline-flex;
}
nav .logo{
  margin:auto;
  width:140px;
  text-align:center;
  height:48px;
  padding:0 20px 0 20px;
  position:absolute;
}
nav .logo h3{
  transition:color 300ms;
  height:24px;
  padding:12px 0 12px 0;
  margin:0;
  color:#fff;
}
nav .logo:hover > h3{
  color:var(--red);
}
nav ul{
  list-style-type:none;
  display:inline-flex;
  width:100%;
  height:48px;
  padding:0 0 0 50px;
  margin:0 0 0 180px;

}
nav ul li{
  height:24px;
  background-color:#091820;
  border-radius:5px;
  margin:10px 25px 10px 25px;
  padding:2px 10px 2px 10px;
  transition:box-shadow 300ms;
  -o-transition:box-shadow 300ms;
  -moz-transition:box-shadow 300ms;
  -webkit-transition:box-shadow 300ms;
}
nav ul li:hover{
  box-shadow:0 0 5px 2px var(--red);
}
nav ul h4{
  margin:0 10px 0 10px;
  padding:1px 0 0 0;
  height:24px;
  color:#FFF;
}

.content{
  text-align:center;
  padding:200px 0 0 0;
  color:#fff;
}

@media (max-width:740px){
  nav .logo{
    width:100%;
    padding:0;
  }
  nav ul{
    display:block;
    background-color:#1a272e;
    width:100vw;
    height:100vh;
    padding:10px 5px 0 5px;
    margin:48px 0 0 0;
    transform:scale(1,0);
    -o-transform:scale(1,0);
    -moz-transform:scale(1,0);
    -webkit-transform:scale(1,0);
    transform-origin:top;
    -o-transform-origin:top;
    -moz-transform-origin:top;
    -webkit-transform-origin:top;
    transition:transform 200ms linear;
    -o-transition:transform 200ms linear;
    -moz-transition:transform 200ms linear;
    -webkit-transition:transform 200ms linear;
  }
  nav ul li{
    margin:20px 25px 20px 25px;
    padding-left:0;
    opacity:0;
    height:30px;
    transition:opacity 200ms ease-in-out;
    -o-transition:opacity 200ms ease-in-out;
    -moz-transition:opacity 200ms ease-in-out;
    -webkit-transition:opacity 200ms ease-in-out;
  }
  nav ul li h4{
    height:20px;
    padding:5px 0 5px 0;
  }
  nav label {
    z-index:5;
    cursor:pointer;
    position:absolute;
    top:0;
    left:0;
    width:30px;
    margin:0;
    padding:0 1.5em 0 1.5em;
    height:48px;
    display:flex;
    align-items:center;
  }
  nav label span,
  nav label span::before,
  nav label span::after {
    display:block;
    background:#FFF;
    height:4px;
    width:30px;
    border-radius:1px;
    transition:transform 200ms,bottom 200ms,top 200ms,height 200ms,width 200ms;
    -o-transition:transform 200ms,bottom 200ms,top 200ms,height 200ms,width 200ms;
    -moz-transition:transform 200ms,bottom 200ms,top 200ms,height 200ms,width 200ms;
    -webkit-transition:transform 200ms,bottom 200ms,top 200ms,height 200ms,width 200ms;
    content:'';
    position:absolute;
  }
  nav label span::before {
    bottom:8px;
  }
  nav label span::after {
    top:8px;
  }
  input:checked ~ nav label span{
    height:0;
    width:0;
  }
  input:checked ~ nav label span::before{
    transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    bottom:-3px;
  }
  input:checked ~ nav label span::after{
    transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    top:-1px;
  }
  input:checked ~ nav ul{
    transform:scale(1,1);
    -o-transform:scale(1,1);
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
  }
  input:checked ~ nav ul li{
    opacity:1;
  }
}