
html{
    height:100%;
} 
body{
background-attachment:fixed;
background-repeat: no-repeat;
background-position:center;
background-size:100% 100%;
overflow:hidden; 
user-select:none;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.noPadding{
padding:0% !important;
}
.se-pre-con{
position: fixed;
left: 0px;
top:150px;
width:100%;
height: 100px;
z-index: 9999;
background-repeat: no-repeat;
background-position:center;
}
.bgClass{
    background-repeat: no-repeat;
    background-position:center;
    background-size:100% 100%;
}
.bottomClass{
    position: fixed;
    bottom: 0;
}
#instrText{
    font-size: 2.5vw;
    font-weight: bold;
    align-items: center;
    display: flex;
    justify-content: center;
    color: black;
    text-shadow: 5px 3px 3px white;
}
#gamePage{
    display: none;
    top: 5vh;
}
#quesBox{
    top: 8vh;
    height: 25vh;
}
#optionDiv{
    top: 19vh;
   /*  left: 8vw; */
}
.checkAnsClass{
    color: #70e2db !important;
    text-shadow: 2px 1px 2px black;
}
.checkwrongAnsClass{
    color: #300d08 !important;
    text-shadow: 2px 1px 2px black;
}
.optionStyle{
    height: 16vh;
    color:white;
    font-size: 1.7vw;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-left: 6vw;
    text-align: center;
}
.hintStyle{
    height: 13vh;
}
.optionClass{
    perspective: 1000px;
    transition: transform 1s;
    transform-style: preserve-3d;
}
.quesStyle{
    color:black;
    font-size: 2.8vw;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    display: flex;
    margin-top: 5vh;
    text-align: center;
   
}
#hintDiv1{
    left: 3vw;
}
#hintDiv2{
    left: 15vw;
}
#hintDiv0{
    right: 7vw;
}
#hintDivId{
    z-index: 1;
}
#gameOver{
    margin-top: 7vh; 
    font-size: 6vw;
    text-align: center;
    font-weight: bold;
    color:white;  
    text-shadow: 5px 3px 3px black;
}
#acknowledgementDiv {
    display: none;
   /*  background-color: #3a414680; */
    margin-top: 3vh;
    border: 0.22vw solid white;
    border-radius: 3vw;
    box-shadow: inset -3px -5px 11px #3d0909;
    text-align: center;
}
 #developerNameDiv{
      margin-bottom: 2vh;
  }
.fontClass{
      font-size:1.8vw;
      margin-top:1vh;
      color:black;
  }
.firstLetter:first-letter{
      font-size:1.5vw;
  }
  .pulse{
    animation: pulse-black 1.5s infinite;
  }
  @keyframes pulse-black {
	0% {
		transform: scale(0.85);
		
	}
	
	70% {
		transform: scale(1);
	
	}
	
	100% {
		transform: scale(0.85);
		
	}
}
.bounce
{
    animation:bounceCls 1.5s linear infinite;
}
@keyframes bounceCls{
 0%, 20%, 53%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
}
40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
}
70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
}
90% {
    transform: translate3d(0,-4px,0);
} 
}