* {
  box-sizing: border-box;
  margin: 0;
}

body {
    background:lightblue;
    margin:0;
  }
  
  .panel {
    height:100vh;
    width:100vw;
    position:fixed;
    top:0;
    left:0;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  
/* WELCOME PANEL */

.one {
    background-color:#F4F1DE;
    z-index:100;
    justify-content: center;
    align-items: center;
  }

.start-panel {
  height: 40vw;
  width: 40vw;
  background-color: #3D405B;
  display: flex;
  }

.title-welcome {
    color:#F4F1DE;
    font-size: 80px;
    font-family: 'Bungee Hairline', sans-serif;
    padding: 0;
}

.pose1 {
  position: fixed;
  right: 51.5vw;
  }
  
.pose2 {
  position: fixed;
  top: 40px;
  left:48.5vw;
  }

.begin-click {
  font-family: 'Bungee Hairline', sans-serif;
  color:#F4F1DE;
  font-size: 30px;
  position: absolute ;
  bottom: 10%;
  padding-left: 2%;
  }

/* VOICE */

  .two {
    background:#F4F1DE;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-content: center;
  }

  .two-container {
    width: 80vh;
    height: 80vh;
    display: flex;
    justify-content: space-evenly;
    align-content: space-evenly;
    flex-wrap: wrap;
  }

  .box {
    width: 40px;
    height: 40px;
    opacity: 0;
    transition: opacity 6s ease-out;
  }

  .box:hover {
    opacity: 100;
    transition: opacity 0s;
}

  .voice {
    background-color: #3D405B;
    margin: 8%;
  }

  .voice-portal {
    background-color: #62AB37;
  }

  /* BELLS */

  .three {
    background:#62AB37;
    z-index:98;
    position: absolute;
    justify-content: space-around;
    align-content: space-around;
    flex-wrap:wrap;

  }

  .bell {
    background-color: #F4F1DE;
    
   }

   .bell-portal {
    background-color: #E07A5F;
   }

#b1 {
  top: 40px;
  left: 40px;
}

/* STRING */
.four {
  background:#E07A5F;
  z-index:97;
}

.four-container {
  width: 80vh;
  height: 80vh;
  display: flex;
  justify-content: space-evenly;
  align-content: space-evenly;
  flex-wrap: wrap;
}

.string {
  background-color: #F4F1DE;
  margin: 6%;
}

.string-portal {
  background-color: #3A86FF;
}

.box.string:hover {
  opacity: 100;
  transition: opacity 0s;
}

/* CHIMES */
.five {
  background-color:#3A86FF;
  z-index: 96;
  justify-content: center;
}

.chimes {
  background-color: #F4F1DE;
}

.chimes-portal {
  background-color: #3D405B;
}