/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

    * {
      margin: 0px;
      padding: none;
    }

    body {
      background-color: rgb(0, 0, 0);
      background-image: url(images/green_patchwork_texture.png);
    }

    .forest-fixed {
      position: fixed;    
    }

    .forest-flex {
      position: relative;
      display: flex;
      width: 100vw;
      height: 100vh;
    }

    .main-tree {
      position: absolute;
      top: 0%;
      left: -12%;
      z-index: 0;
    }

    .owl-branch {
      position: absolute;
      top: 10%;
      left: 70%;
      z-index: 1;
    }

    .left-bush {
      position: absolute;
      top: 80%;
      left: -30%;
      z-index: 3;
    }

    .right-bush {
      position: absolute;
      top: 80%;
      left: 50%;
      z-index: 3;
    }

    .lee-desk {
      position: absolute;
      top: 19%;
      left: 0%;
      z-index: 1;
    }

    .tea-stump {
      position: absolute;
      top: 66%;
      left: 28%;
      z-index: 2;
    }

    .contact-owl {
      position: absolute;
      top: 17%;
      left: 63%;
      z-index: 2;
    }

    .ground-flex {
        display: flex;
        position: absolute;
        width: 100vw;
        height: 60vh;
        background-color: rgb(16, 68, 16);
        top: 47%;
        z-index: -1;
    }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

    * {
      margin: 0px;
      padding: none;
    }

    body {
      background-color: rgb(133, 163, 133);
      background-image: url(images/green_patchwork_texture.png);
      overflow: hidden;
    }

    .forest-fixed {
      position: fixed;      
    }

    .forest-flex {
      position: relative;
      display: flex;
      /* transform: scale(0.83); */
      width: 100vw;
      height: 100vh;
    }

    .main-tree {
      position: absolute;
      top: 0%;
      left: -12%;
      z-index: 0;
    }

    .owl-branch {
      position: absolute;
      top: 10%;
      left: 70%;
      z-index: 1;
    }

    .left-bush {
      position: absolute;
      top: 84%;
      left: -30%;
      z-index: 3;
    }

    .right-bush {
      position: absolute;
      top: 83%;
      left: 50%;
      z-index: 3;
    }

    .lee-desk {
      position: absolute;
      top: 19%;
      left: 0%;
      z-index: 1;
    }

    .tea-stump {
      position: absolute;
      top: 56%;
      left: 28%;
      z-index: 2;
    }

    .contact-owl {
      position: absolute;
      top: 17%;
      left: 63%;
      z-index: 2;
    }

    .ground-flex {
        display: flex;
        position: absolute;
        border: solid black 8px;
        width: 140vw;
        height: 70vh;
        background-color: rgb(16, 68, 16);
        top: 38%;
        left: -10%;
        z-index: -1;
    }

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

    * {
      margin: 0px;
      padding: none;
    }

    body {
      background-color: rgb(133, 163, 133);
      background-image: url(images/green_patchwork_texture.png);
    }

    .forest-fixed {
      position: fixed;     
    }

    .forest-flex {
      position: relative;
      display: flex;
      transform: scale(0.74);
      width: 100vw;
      height: 100vh;
    }

    .main-tree {
      position: absolute;
      top: -18%;
      left: -14%;
      z-index: 0;
    }

    .owl-branch {
      position: absolute;
      top: -18%;
      left: 77%;
      z-index: 1;
    }

    .left-bush {
      position: absolute;
      top: 80%;
      left: -30%;
      z-index: 3;
    }

    .right-bush {
      position: absolute;
      top: 80%;
      left: 70%;
      z-index: 3;
    }

    .lee-desk {
      position: absolute;
      top: 16%;
      left: -15%;
      z-index: 1;
    }

    .tea-stump {
      position: absolute;
      top: 60%;
      left: 32%;
      z-index: 2;
    }

    .contact-owl {
      position: absolute;
      top: -3%;
      left: 71%;
      z-index: 2;
    }

    .ground-flex {
        display: flex;
        border: solid black 8px;
        position: absolute;
        width: 150vw;
        height: 60vh;
        background-color: rgb(16, 68, 16);
        top: 64%;
        left: -20%;
        z-index: -1;
    }

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    
}