#canvas {
  position: relative;
  /* width: 800px;
  height: 600px; */
  margin: 0;
}

#canvas0 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 100px 0 0 -400px;
  /* margin-top: calc(50vh - 300px);
  margin-left: calc(50vw- 400px); */
  /* background-color: red; */
}

#canvas1 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 100px 0 0 -400px;
  /* margin-top: calc(50vh - 300px);
  margin-left: calc(50vw- 400px); */
}

#canvas2 {
  position: absolute;
  top: 50%;
  margin: 100px 0 0 -400px;
  /* margin-top: calc(50vh - 300px);
  margin-left: calc(50vw- 400px); */
}

.hidden {
  display: none;
}

/* body{
  background-color: #ffecf2;
   background-image: url("../assets/pagebackground.png");
} */

.background {
  background-color: #ffecf2;
  text-align: center;
  font-family: "Short Stack", cursive;
}

.picture {
  background-image: url("../assets/pagebackground.png");
  text-align: center;
  font-family: "Short Stack", cursive;
}

#title {
  padding-top: 10vh;
  font-size: calc(10vh);
  text-align: center;
  margin: 0;
}

#title-sub {
  font-size: calc(8vh);
  text-align: center;
  font-style: italic;
  margin: 3vh 0 10vh;
}

button {
  outline: 0;
  background: none;
  border: none;
  font-size: calc(6vh);
  font-family: "Short Stack", cursive;
}

button:hover > img,
button {
  cursor: pointer;
  display: inline-block;
}

.selector {
  display: none;
}

.leopic {
  position: absolute;
  right: calc(17vw);
  width: calc(35vh);
  z-index: -10;
}

.leopicrestart {
  position: absolute;
  right: calc(15vw);
  top: calc(15vw);
  width: calc(35vh);
  z-index: -10;
}
.menu-container {
  /* text-align: center;
  width: calc(50vw); */
  position: relative;
}

#instruction {
  width: calc(40vw);
  text-align: center;
  margin: -5vw 30vw;
  background-image: url("../assets/messageboard.png");
  background-color: #ffecf2;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* background-repeat: no-repeat;
  background-position: center; 
  background-size: cover; */
  font-size: 4vh;
  font-weight: 500;
  padding: 50px 50px 30px 50px;
}
#btn-restart {
  position: absolute;
  left: calc(40vw);
  top: calc(35vw);
  z-index: 1010;
}
#bubble {
  position: absolute;
  top: 10%;
  right: 35%;
}

#result {
  position: absolute;
  top: 30%;
  right: 41%;
  font-size: 4vh;
}

.instruction-bold {
  font-weight: 800;
}

#about img {
  width: 2vw;
  display: inline-block;
}

.about-icon1 {
  margin: 0 0 0 70vw;
}
.about-icon2 {
  margin: 0 10px 0 10px;
}

#about {
  position: fixed;
  left: 0;
  bottom: 0;
  /* background-color: #f6f6f6; */
  width: 100%;
}

#about span {
  font-size: 2vw;
  text-align: center;
}

/* #about a:hover{
  top:-5px;
  background-color: #ffecf2;
} */