* {
    box-sizing: border-box;
}

main {
  display: flex;
}

body {
    background-color: white;
    /* background-image: url("tree-spring-blossom.png"); */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 80vw;
    position: relative;
    transition: background 2s;
    height: 100vh;
    margin: 0;
    overflow:scroll;
}

.drag {
    cursor: grab;
}

.main-container {
    /* background-color: none; */
    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
    justify-content: center;
    align-items: center;
  }

.option-container-top {
    background-color: cadetblue;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10%;
  }

.tree {
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 80%;
    transition: 2s;
  }


.tree-spring-green {
    opacity:0;
    position:fixed;
    bottom:10px;
    right:10px;
    width:80vw;
    opacity:0;
    transition: opacity .5s;
}
.tree.spring {
    opacity:1;
    background-color: rgb(84, 126, 21);
}
.body.spring {
    background-color: rgb(84, 126, 21);
    background-image: url("tree-spring-green.png")
}
.tree-spring-green.spring {
    opacity:1;
}

.tree-bloom {
    opacity:0;
    position:fixed;
    bottom:10px;
    right:10px;
    width:80vw;
    opacity:0;
    transition: opacity .5s;
}
.tree.bloom {
    opacity:1;
}
.body.bloom {
    background-color: rgb(84, 126, 21);
}
.tree-bloom.bloom {
    opacity:1;
}
.petals.bloom {
    background-image: url(cherryblossom-petal.png)
}



.tree-summer {
    opacity:0;
    position:fixed;
    bottom:10px;
    right:10px;
    width:80vw;
    transition: opacity .5s;
}
/* .tree.summer {
    opacity:1;
} */
.body.summer {
    background-color: rgb(84, 126, 21);
}
.tree-summer.summer {
    opacity:1;
}



.tree-fall1 {
    opacity:0;
    position:fixed;
    bottom:10px;
    right:10px;
    width:80vw;
    opacity:0;
    transition: opacity .5s;
}
.tree.fall1 {
    opacity:1;
}
.body.fall1 {
    background: rgb(84, 126, 21);
}
.tree-fall1.fall1 {
    opacity:1;
}



.tree-fall2 {
    opacity:0;
    position:fixed;
    bottom:10px;
    right:10px;
    width:80vw;
    opacity:0;
    transition: opacity .5s;
}
.tree.fall2 {
    opacity:1;
}
.body.fall2 {
    background: rgb(84, 126, 21);
}
.tree-fall2.fall2 {
    opacity:1;
}

.tree-winter {
    opacity:0;
    position:fixed;
    bottom:10px;
    right:10px;
    width:80vw;
    opacity:0;
    transition: opacity .5s;
}
.tree.winter {
    opacity:1;
}
.body.winter {
    background: rgb(84, 126, 21);
}
.tree-winter.winter {
    opacity:1;
}
.snow.winter {
    background-image: url(snowflake.png)
}


.option-container-bottom {
    background-color: cadetblue;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10%;
  }
audio {
    display:none;
  }
  
img {
    display: block;
    max-height: 90vh;
    height: auto;
    margin: 0 auto;
}

.blossom {
    position: fixed;
    bottom:30px;
    left:30px;
    background: none;
    width: 10vw;
    border: none;
    transition: all 1s;
    max-height: 10vh;
}

.blossom:hover {
    width: 15vw;   
    transform: rotate(720deg);
}

.blossom.activated {
    transform: rotate(720deg);
}

.petals{
    width: 9px;
    height:9px;
    position:absolute;
    background-image: none;
    background-size: 100% 100%;
  }

  .snow{
    width: 8px;
    height:8px;
    position:absolute;
    background-image: none;
    background-size: 100% 100%;
  }

.postlight-round {
    opacity:0;
    position:fixed;
    bottom:100px;
    right:10px;
    height: 42vh;
    transition: opacity .5s;
}

.postlight-round .reveal {
    opacity: 1;
}

.postlight-curve {
    opacity:0;
    position:fixed;
    bottom:100px;
    left:10px;
    height: 40vh;
    transition: opacity .5s;
}

.postlight-curve .reveal {
    opacity: 1;
}

.box {  
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.327);
    font-size: 20px;
    position: fixed;
    top:0;
    right:-30vw;
    width:30vw;
    height:100vh;
    border-left: none;
    transition: right .5s;
    overflow-y: auto;
  }

  .box.activated {
    right:0vw;
  }

  .menubtn {
    position: absolute;
    top:30px;
    left:30px;
  }

  button {
    padding: 10px;
    border: 1px rgb(141, 141, 141) solid;
    margin: 3px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.548);
    transition: background-color .2s;
}

button:hover {
    background-color: rgba(194, 84, 104, 0.329);
    border: 1px rgb(255, 255, 255) solid;
    color: rgb(255, 255, 255);
}

button:active {
    background-color: lightgreen;
}

button:focus {
    background-color: rgba(194, 84, 104, 0.329);
    border: 1px rgb(255, 255, 255) solid;
    color: rgb(255, 255, 255);
}

@media screen and (max-width: 1500px) {
  
    body {
      background-color: lightblue;
      /* background-image: url(tree6.png); */
    }
  }
    
  @media screen and (max-width: 1300px) {
  
    body {
      background-color: lightblue;
      /* background-image: url(tree5.png); */
    }
  }
  @media screen and (max-width: 1100px) {
    /* FALL */
  
    body {
      background-color: rgb(48, 163, 189);
      /* background-image: url(tree4.png); */
    }
  }
  
  @media screen and (max-width: 900px) {
    /* SUMMER */
  
    body {
      background-color: rgb(254, 249, 190);
      /* background-image: url(tree3.png); */
    }
  }
  
  @media screen and (max-width: 700px) {
    /* SPRING */
  
    body {
      background-color: rgb(170, 203, 140);
      /* background-image: url(tree2.png); */
    }
  }

  @media screen and (max-width: 500px) {
    /* SPRING */
  
    body {
      background-color: rgb(170, 203, 140);
      /* background-image: url(tree1.png); */
    }
  }