@media (min-width: 321px) and (orientation: portrait) {
        /* larger than mobile styles */
        nav {
          bottom: 2rem;
          right: auto;
          width: 25%;
          height: auto;
        }
        main {
          left: 25%;
          top: 2rem;
        }
      }
      @media (min-width: 481px) and (orientation: landscape) {
        /* larger than mobile styles */
        nav {
          bottom: 2rem;
          right: auto;
          width: 25%;
          height: auto;
        }
        main {
          left: 25%;
          top: 2rem;
        }
      }
      @media (min-width: 769px) and (orientation: portrait) {
        nav {
          width: 10%;
        }
        main {
          left: 10%;
        }
      }
      @media (min-width: 1025px) and (orientation: landscape) {
        nav {
          width: 10%;
        }
        main {
          left: 10%;
        }
      }