@media screen and (max-width: 800px) {
   nav{
      bottom: 0;
      height: 4rem;
      width: 100vw;
      position: fixed;
      display: flex;
      flex-direction: row;
      align-items: center;
   }

   nav:hover{
      width: 100vw;
   }

   nav:hover .link-text{
      display: none;
   }

   nav:hover .fa{
      transform: none;
   }

   nav ul{
      flex-direction: row;
   }

   nav:hover .logo a{
      grid-template-columns: unset;
   }

   nav:hover .nav-list-item a{
      grid-template-columns: unset;
   }

   :where(main, header){
      padding: 1em;
   }

   footer{
      padding: 1em;
      margin-bottom: 4rem;
   }
}