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;
}
#playGame,#widget,#goNext{
  bottom: 0%;
  position: fixed;
}
.homelogoClass{
  z-index: 1;
}
#replayNcredit
{
	position:fixed;
	bottom:0;
	display: flex;
	align-items: baseline;
}
#levelPage{
  position: absolute;
}
#titleId,#ruleDiv{
  background-repeat: no-repeat;
  background-position:center;
  background-size: 100% 100%;
  text-align: center;
  font-size: 3vw;
  color: white;
  font-weight: bold;
  height: 10vh;
  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: 8vh;
  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;
}
/* 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(2, 2, 92); 
  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:black;
  left: 5.5vw;
  font-weight:bold;
}
.wordsChartClass{
  left: 6vw;
  margin-top:15vh;
}
.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: black;
  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);
}
.circle_animation {
  stroke-dasharray: 440;  /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
  transition: all 3.8s linear;
}
#timerID{
  height: 25vh;
  margin-top: 24vh;
  right: 5vw;
  position: relative;
  float: left;
}
.faceClass1,.faceClass2{
  visibility: hidden;
}
#gameOver
{
	margin-top: 7vh;
	text-align:center;
	font-size:7vw;
	color:black;
	font-weight:bold;
}
#acknowledgementDiv 
{
	display: block;
	margin-top: 2vh;
	background-color: aliceblue;
	border: 0.22vw solid black;
	border-radius: 3vw;
	text-align:center;
}
#developerNameDiv
{
	margin-bottom: 2vh;
}
.fontClass
{
	font-size:1.3vw;
	margin-top:1.5%;
	color:black;
}
.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);
} 
}