div.coverboardfull{
  font-family: sniglet;
}
.bg1{
    height:100%;
    width:100%;
}
.bg2{
  background:#f8d99b;
}
.plainpurplebg{
  background: linear-gradient(#cbbae9, #cbbab4);
}
.texttop2 {
	position: absolute;
	height: 7%;
	width: 80%;
	left: 12%;
	top: 5%;
	/* background-color: #e46b7e; */
	/* border-radius: 0.4em; */
	font-family: sniglet;
	font-size: 2.4vw;
	color: black;
  opacity: 0;
  animation: fadein 1s forwards;
	/* transform: translate(-50% -50%); */
}
.lastbut1, .lastbut2, .lastbut3 {
	position: absolute;
	height: 7%;
	width: 21%;
	left: 41%;
	top: 17%;
	background-color: #e46b7e;
	border-radius: 0.4em;
	font-family: sniglet;
	font-size: 1.8vw;
	color: white;
  z-index:99;
}
.lastbut1:hover,.lastbut2:hover,.lastbut3:hover{
  transform: scale(1.1);
  cursor: pointer;
}
.lastbut2{
  top:32%!important;
}
.lastbut3{
  top:47%!important;
}
.suriclass3, .suriclass4 {
	position: absolute;
	top: 49%;
	left: 3%;
	height: 41%;
	width: 31%;
}
.suriclass4{
  left: 68%!important;

}
.suriclass {
	position: absolute;
	top: 50%;
	left: 7%;
	height: 23%;
	width: 14%;
}
.rhinoimgdiv {
    position: absolute;
    width: 15%;
    top: 60%;
    left: 21%;
}
.squirrelisteningimg {
    position: absolute;
    width: 16%;
    top: 61%;
    left: 70%;
}
.playtime-text {
  position: absolute;
  bottom: 27%;
  left: 40%;
  width: 27%;
  height: 22%;
  font-size: 2.4em;
  font-family: sniglet;
  z-index:99;
}
.texttop {
    position: absolute;
    height: 10%;
    width: 100%;
    left: 0%;
    top: 0%;
    background-color: #e46b7e;
    font-family: sniglet;
    font-size: 2.3vw;
    color: white;
    padding: 1%;
}
.texttopp {
    position: absolute;
    height: 20%;
    width: 100%;
    left: 0%;
    top: 0%;
    background-color: #e46b7e;
    font-family: sniglet;
    font-size: 2.3vw;
    color: white;
}
.colorblock {
	position: absolute;
	height: 54%;
	width: 29%;
	border-radius: 5vmin;
	top: 23%;
	left: 70%;
	background-color: #f8a79b;
}
.yellow{
  position: absolute;
  height:21%;
  width: 25%;
  top:5%;
  left:10%;
  background-color: #fa8231;
  border-radius: 100%;
}
.green{
  position: absolute;
  height:21%;
  width: 25%;
  top:5%;
  left:60%;
  background-color: green;
  border-radius: 100%;
}

.purple{
  position: absolute;
  height:21%;
  width: 25%;
  top:40%;
  left:10%;
  background-color: purple;
  border-radius: 100%;
}

.brown{
  position: absolute;
  height:21%;
  width: 25%;
  top:40%;
  left:60%;
  background-color: brown;
  border-radius: 100%;
}

.red{
  position: absolute;
  height:21%;
  width: 25%;
  top:75%;
  left:10%;
  background-color: red;
  border-radius: 100%;
}

.blue{
  position: absolute;
  height:21%;
  width: 25%;
  top:75%;
  left:60%;
  background-color: blue;
  border-radius: 100%;
}

.colorblock > p:hover{
  cursor: pointer;
  transform: scale(1.1);
}

.onehalf{
  position: absolute;
  height:31%;
  width: 13%;
  top:30%;
  left:32%;
  background-color:white;
  color:white;
  border: .3vmin solid grey;
    cursor: pointer;
}
.twohalf{
  position: absolute;
  height:31%;
  width: 13%;
  top:30%;
  left:45%;
  background-color:white;
  color:white;
  border: .3vmin solid grey;
    cursor: pointer;

}

.onequat{
  position: absolute;
  height:15.5%;
  width: 13%;
  top:30%;
  left:32%;
  background-color:white;
  color:white;
  border: .3vmin solid grey;
    cursor: pointer;

}
.twoquat{
  position: absolute;
  height:15.5%;
  width: 13%;
  top:30%;
  left:45%;
  background-color:white;
  color:white;
  border: .3vmin solid grey;
    cursor: pointer;

}
.threequat{
  position: absolute;
  height:15.5%;
  width: 13%;
  top:45.5%;
  left:32%;
  background-color:white;
  color:white;
  border: .3vmin solid grey;
    cursor: pointer;

}
.fourquat{
  position: absolute;
  height:15.5%;
  width: 13%;
  top:45.5%;
  left:45%;
  background-color:white;
  color:white;
  border: .3vmin solid grey;
    cursor: pointer;

}

.bottext{
  position: absolute;
  height: 7%;
  width: 57%;
  left: 5%;
  top: 80%;
  background-color: #f3e8cb;
  font-family: sniglet;
  font-size: 2.3vw;
  color: black;
  border-radius: 1.5vmin;
  border-style: solid;
  border-color: #cfcecc;
}

.option1,.option2 {
    position: absolute;
    top: 30%;
    left: 63%;
    height: 19%;
    width: 19%;
    border-radius: .6em;
    background-color: #7b74d4;
    color: white;
    border-style: solid;
    font-family: sniglet;
    border-color: #6fa8dc;
    font-size: 2vw;
}
.option2{
  top: 60% !important;
}
.option1:hover,.option2:hover{
  background-color: #cfe2f3;
  color: black;
  cursor: pointer;
}
.slidefromtop{
  animation : slidefromtop 1.5s ease-out forwards;
}

@keyframes slidefromtop{
  from{
    top:-35%;
  }
  to{
    top:23%;
  }
}

@media screen and (min-aspect-ratio: 4/3) {
	/*vh*/
  .bottext,.texttop{
    font-size: 2vw;
  }
}

@media screen and (max-aspect-ratio: 4/3) {
	/*vw*/

  .bottext,.texttop{
    font-size: 1.8vw;
  }
}