*{
   margin:0;
   padding:0;
   text-transform:uppercase;
   font-family:fredoka one;
}
body{
   width:100vw;
   height:100vh;
   display:grid;
   grid:
      "header" 10%
      "main" 90%;
}
header{
   grid-area:header;
   display:flex;
   align-items:center;
   padding:10px;
   border-bottom:3px solid black;
}
#menu-button{
   width:45px;
   height:45px;
   display:flex;
   flex-direction:column;
   justify-content:space-between;
   align-items:center;
   position:fixed;
   z-index:7;
   right:10px;
   cursor:pointer;
}
#menu-button:hover div{
   background:coral!important;
   border-color:coral!important;
}
div{
   width:100%;
   height:20%;
   background:black;
   border:1px solid black;
}
main{
   grid-area:main;
   background:silver;
}
nav{
   display:grid;
   position:fixed;
   z-index:5;
   background:dimgray;
   width:100vw;
   height:100vh;
}
ul{
   width:100%;
   height:100%;
   display:grid;
   grid:
      "one two three"
      "four five six";
}
li{
   border:1px solid black;
   background:white;
   list-style:none;
   height:100%;
   width:100%;
   display:grid;
   place-items:center;
   font-size:2em;
   font-weight:400;
}
li:nth-child(1){
   grid-area:one;
   transform-origin:left;
}
li:nth-child(2){
   grid-area:two;
   transform-origin:left;
}
li:nth-child(3){
   grid-area:three;
   transform-origin:top;
}
li:nth-child(4){
   grid-area:four;
   transform-origin:bottom;
}
li:nth-child(5){
   grid-area:five;
   transform-origin:right;
}
li:nth-child(6){
   grid-area:six;
   transform-origin:right;
}
li:hover{
   color:red;
   box-shadow:inset 0 0 20px 3px black;
   -webkit-text-stroke:1px darkred;
   text-shadow:2px 2px 2px black;
   font-weight:900;
   transition:0.125s;
}
span{
   cursor:pointer;
}