@media only screen and (min-width: 901px) and (orientation: portrait) {
    html {
      font-size: 12px;
    }

    .main {
      display: flex;
      flex-direction: column;
    }

    .left {
      justify-content: right;
    }

    .left, .right {
      width: 100vw;
      height: auto;
      overflow-y: visible;
    }

    .about {
      display: flex;
      flex-direction: column;
      margin: 2vw;
    }

    .left img {
      width: 100vw;
      height: auto;
    }

    .plants img {
      width: 30vw;
      height: auto;
    }

    .social {
      margin: 2vw;
    }

    .social a {
      margin-right: 2vw;
    }
  }

 @media only screen  and (max-width: 900px) and (orientation: landscape) {
   .main {
     display: flex;
   }

   h1 {
    font-size: 3rem
   }

   .left {
     justify-content: center;
   }

   .left {
    height: 100vh;
    width: 50vw;
   }
   
   .right {
     width: 50vw;
     height: 100vh;
     overflow-y: scroll;
   }

   .about {
     display: flex;
     flex-direction: column;
     height: auto;
   }

   .left img {
     width: 100vw;
     height: auto;
   }

   .social {
    justify-content: space-around;
   }

 }

 @media only screen and  (max-width: 900px) and (orientation: portrait) {
   .main {
     display: flex;
     flex-direction: column;

   }

   .left {
     justify-content: right;
   }

   .left, .right {
     width: 100vw;
     height: auto;
     overflow-y: visible;
  
   }

   .about {
     display: flex;
     flex-direction: column;
   }

   .left img {
     width: 100vw;
     height: auto;
   }

   .social {
    justify-content: space-around;
   }

 }