* {
    box-sizing: border-box;
}

body {
    background-color:rgb(211, 237, 246);
    transition: background-color 1s;
}

audio {
    display:none;
  }

.flex {
    display:flex;
    margin-top:100px;
    justify-content: space-evenly;
}

.puzzle {
    position:fixed;
    top:100px;
    left:10px;
    width: 100px;
    height: 100px;
    opacity:0;
    transition: opacity .5s;
}

.hint {
    position:fixed;
    top:100px;
    right:10px;
    height: 30vh;
    opacity:0;
    transition: opacity .5s;
}

.ufo {
    position:fixed;
    bottom:10px;
    right:10px;
    width:200px;
    opacity:1;
    transition: opacity .5s;
}

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

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

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

.petals.bloom {
    background-image: url(cherryblossom-petal.png)
}

.draggable {
    cursor: grab;
}

.show {
    opacity: 1;
}

    
@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); */
    }
  }

@keyframes spin {
    0% {
        transform:rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}