@font-face {
    font-family: sniglet;
    src: url("../../../../../fonts/laila.ttf");
}
body:lang(np), body:lang(np) * {
    font-family: laila !important;
}

.backimg {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
}

.road {
  position: absolute;
  width: 37%;
  top: 26%;
  left: 28%;
}

.toptext {
  position: absolute;
  top: 0%;
  left: 0%;
  background: #537A5A;
  color: white;
  width: 100%;
  padding: 2% 15% 2% 1%;
  font-size: 3.5vh;
}

.questiontext {
  position: absolute;
  top: 18%;
  left: 0%;
  width: 100%;
  font-size: 3.5vh;
}

.orgone{
  background: #C27BA0 !important;
}

.orgback{
  background: #F9CB9C;
  background-size: 100% 100%;
}

[class*="exebtn"] {
	position: absolute;
	left: 65%;
	background: #9900FF;
	padding: 2%;
	font-size: 3vh;
	border-radius: 0.7em;
	color: white;
	width: 33%;
	border: 0.2em solid #9900FF;
}

.exebtn-1{
  top: 30%;
}

.exebtn-2{
  top: 50%;
}

.exebtn-3{
  top: 70%;
}

[class*="quesimg"] {
  position: absolute;
  top: 28%;
}

.quesimg-1{
  left: 5%;
  width: 57%;
}

.quesimg-2{
  top: 20%;
  left: 5%;
  width: 40%;
}

.quesimg-3{
  left: 70%;
}


[class*="twobtn"] {
	position: absolute;
	left: 65%;
	background: #9900FF;
	padding: 2%;
	font-size: 3vh;
	border-radius: 0.7em;
	color: white;
	top: 80%;
	border: 0.2em solid #9900FF;
	transform: translateX(-50%);
	width: 31%;
}

.twobtn-1{
  left: 25%;
}

.twobtn-2{
  left: 75%;
}

[class*="twoimg"] {
  position: absolute;
  top: 20%;
  width: 35%;
  transform: translateX(-50%);
}

.twoimg-1{
  left: 25%;
}

.twoimg-2{
  left: 75%;
}

.boatcover {
  position: absolute;
  left: 50%;
  top: 83%;
  width: 13%;
}

.boatnew1 {
  position: absolute;
  left: 50%;
  top: 65%;
  width: 27%;
}

.boatnew2 {
  position: absolute;
  left: 11%;
  top: 65%;
  width: 27%;
}

.contentblock.purpback {
    background: #B4A7D6;
}

[class*="roundbtn"] {
  position: absolute;
  width: 13%;
  filter: brightness(50%);
}

.roundbtn-1 {
  top: 18%;
  left: 28%;
}

.roundbtn-2 {
  top: 34%;
  left: 42%;
}

.roundbtn-3 {
  top: 57%;
  left: 31%;
}

.roundbtn-4 {
  top: 52%;
  left: 56%;
}

.roundbtn-5 {
  top: 77%;
  left: 44%;
}

.selectedimg{
  cursor: pointer;
  filter: brightness(100%);
  animation: boomboom 0.5s alternate infinite;
}

@keyframes boomboom {
  100%{
    transform: scale(1.1);
  }
}

.sp-1 {
  top: 42%;
  left: 25%;
  width: 35%;
  height: 24%;
}

.sp-2 {
  top: 68%;
  left: 38%;
  width: 35%;
  height: 24%;
}

.sp-3 {
  top: 53%;
  left: 18%;
  width: 35%;
  height: 24%;
}

.sp-4 {
  top: 41%;
  left: 23%;
  width: 35%;
  height: 24%;
}

.sp-5 {
  top: 41%;
  left: 23%;
  width: 35%;
  height: 24%;
}

.forhover:hover{
  cursor: pointer;
  background: #87C0EA;
  border: 0.2em solid #247FE6;
}

.girlbox {
  position: absolute;
  width: 25%;
  bottom: 0%;
  right: 0%;
}

.sp-2 > p{
  display: none;
}
.speechbox {
    position: absolute;
    width: 25%;
    height: 20%;
    font-family: sniglet;
    font-size: 2.4vw;
    opacity: 0;
    animation: fadein 1s linear forwards;
    padding: 2% 2% 4% 2%;
}
.speechbox > p {
    position: relative;
    width: 92%;
    left: 5%;
    top: 34%;
    height: 54%;
    transform: translateY(-50%);
    text-align: center;
}
@media screen and (min-aspect-ratio: 4/3) {
	/*vh*/
  [class*="twobtn"],[class*="exebtn"],.toptext,.questiontext
 {
		font-size: 3.9vh;
	}
  .speechbox > p{
    font-size:3vh;
  }
}
.ansfiller{
  color:blue;
}
@media screen and (max-aspect-ratio: 4/3) {
	/*vw*/
  [class*="twobtn"],[class*="exebtn"],.toptext,.questiontext
  {
    font-size: 3vw;
  }
  .speechbox > p{
    font-size:2.6vw;
  }
}