html
{
    height:100%;
}
body
{
  background-attachment:fixed;
  background-repeat: no-repeat;
  background-position:center;
  background-size:100% 100%;
 /*  overflow:hidden;  */
  user-select:none;
  height:100%;
}
.se-pre-con
{
position: fixed;
left: 0px;
top:150px;
width:100%;
height: 100px;
z-index: 9999;
background-repeat: no-repeat;
background-position:center;
}
.noPadding
{
    padding: 0% !important;
}
/* #homeDiv,#logoDiv{
  top: 6vh;
  position: relative;
  z-index: 1;
} */
#playGame,#widget,#goNext{
  bottom: 3%;
  position: fixed;
}
#playGame{
  bottom: 9%;
}
.homelogoClass{
  z-index: 1;
  top: 6vh;
  position: relative;
}
.creditClass
{
	position:fixed;
	bottom:3%;
	display: flex;
	align-items: baseline;
}
.replayClass{
  position:fixed;
	bottom:9%;
}
#levelPage{
  position: absolute;
}
#titleId,#ruleDiv{
  background-repeat: no-repeat;
  background-position:center;
  background-size: 100% 100%;
  text-align: center;
  font-size: 4vw;
  color: white;
  font-weight: bold;
  height: 12vh;
  margin-top: 3vh;
}
#ruleDiv{
  visibility: hidden;
}
#levelPage,#gamePage,#endPage{
  display: none;
}
#rulesID{
  background-repeat: no-repeat;
  background-position:center;
  background-size: 100% 100%;
  margin-top: 14vh;
  position: relative;
  padding-bottom: 3vh;
  height: 62vh;
}
#rulesinnerID{
  height:56vh;
	margin-top:2.5vh;
  margin-left:12vw;
  overflow-y: auto;
}
/* width */
::-webkit-scrollbar {
  width: 20px;
  top: 0;
}
/* Track */
::-webkit-scrollbar-track {
  background-color: rgb(199, 188, 188); 
  box-shadow: inset 10px 3px 5px grey; 
  border:1.2px solid white;
  border-radius: 10px;
}
 /* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(38, 226, 217); 
  border: 1px solid white;
  border-radius: 10px; 
}
.checkmark{
  height: 5vh;
	width: 2.5vw;
	margin:0px;
}
.rulesDivClass{
  margin-top: 4vh;
}
.ruleClass{
  font-size: 2.5vw;
  color:rgb(241, 238, 56);
  left: 5.5vw;
  font-weight:bold;
}
.wordsChartClass{
  left: 6vw;
  top:10vh;
}
.wordDivClass{
  background-repeat: no-repeat;
  background-position:center;
  background-size: 100% 100%;
  height: 15vh;
  margin-left: 1vw;
  perspective: 1000px; 
  transition: transform 1s;
  transform-style: preserve-3d;
}
.wordsStyleClass{
  color: rgb(0, 255, 255);
  font-size: 3vw;
  font-weight: bold;
  position: absolute;
  justify-content: center;
  display: flex;
  align-items: center;
  top: 3vh;
}
h2{
  text-align:center;
  position: absolute;
  font-size: 3vw;
  font-weight: bold;
  color: black;
  line-height: 125px;
  width: 100%;
}
svg {
  transform: rotate(-90deg);
}
#timerID{
  height: 12vh;
  top: 6vh;
  left: 5vh;
  justify-content: center;
  display: flex;
  align-items: center;
  background-repeat: no-repeat;
  background-position:center;
  background-size: 100% 100%;
}
#timerSpanId{
  font-size: 4vw;
  color: white;
  font-weight: bold;
  text-align: center;
}
.faceClass1,.faceClass2{
  visibility: hidden;
}
#gameOver
{
	text-align:center;
	font-size:7vw;
	color:white;
	font-weight:bold;
}
#endPage{
  position: absolute;
}
#acknowledgementDiv 
{
	display: block;
  text-align:center;
  top: 15vh;
}
#developerNameDiv
{
	margin-bottom: 2vh;
}
.fontClass
{
  font-size:1.8vw;
  font-weight: bold;
	margin-top:1.5%;
  color:white;
  font-weight: bold;
}
.firstLetter:first-letter
{
font-size:1.5vw;
}
.blink_me
{
    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);
} 
}