#frame{
  /* position:fixed;
   bottom:5vh;  */
   /* display:flex;  */
   justify-content:center; 
   align-items:center; 
   flex-wrap:wrap;
}
html {
	height: 100%;
}
body {
	user-select: none;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
  font-family: montserat;
}
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }

.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: center no-repeat #fff;
}
.loader
{
  position: fixed!important;
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: center no-repeat#afaca7d1;
  z-index: 1;
  /* color: #ffe000; */
}

.toBottom{
	position: fixed;
	bottom: 1vh;
}
.noPadding{
	padding: 0px !important;
}
#gameOverTextDiv {
  color: white;
  font-size: 7vw;
  font-weight: bold;
  text-align: center;
}

.fontClass{
    font-size:1.3vw;
    margin-top:0.5%;
    color:black;
    line-height: 5vh;
}
.firstLetter:first-letter{
    font-size:1.5vw;
}
/* .blink_me {
    /* background-color: rgba(255, 255, 255, 0.548);   
    animation: blinker 1s linear infinite;
}
@keyframes blinker
{
  50%
  {
      opacity:0.5;
  }
} */

.blink_me
{
    animation:pulse-black 1.5s linear infinite;
}

@keyframes pulse-black {
    0% {
        transform: scale(0.85);
        
    }
    
    70% {
        transform: scale(1);
    
    }
    
    100% {
        transform: scale(0.85);
        
    }
}



/* .bounce_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);
}
} */

@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
  animation-duration: 1s;
}

#nutrientBox{
  margin-top: 12vh;
}

#message{
  margin-top: 5vh;
}

#instrPage{
  color: whitesmoke;
  font-size: 1.7vw;
  font-weight: bold;

  /* display: flex;
  align-items: center;
  justify-content: center; */

}

#mainInstr{
  font-size: 2.7vw;
  margin-top: 10vh;
  text-align: center;

}

#outerDiv{
  margin-top: 5vh;
  line-height: 8vh;

}
#tipsDiv{
  position: fixed;
  bottom: 0;
  font-size: 1.5vw;
  font-weight: bold;
  color: white;
  height: 10vh;
  text-align: center;
  z-index: 1;
}


.buttonCss{
	margin-top: 1.5vh;
}	
.marginClass{
	margin-top:2%;
}
.leftClass{
	height: 18vh;
} 
.pictureClass{
	border: 20px solid gray;
    border-radius: 5%;
    box-shadow: inset 0 0 311px #240040;
}
.heightClass{
	height: 12vh;
	object-fit: contain;
}
#mainDiv{
	left: 2vw; 
}
#message{
	text-align: center;
  /* font-family: sans-serif; */
  font-size: 3vw;
  color: white;
  font-weight: bold;
}
#nutrientBox{
	text-align: left;
  /* font-family: sans-serif; */
  font-size: 2.3vw;
  color: white;
  font-weight: bold;
	background-color: rgba(0, 0, 0, 0.3);
	line-height: 9vh;
	border-radius: 1.5vw;
	padding: 10px 20px 10px 20ptix;
}

#modalDiv1,#modalDiv2
{
	display:none;
	margin-top:2%;
	height:60vh;
	overflow: auto;
	border-radius: 1vw;
	 background-color: #fdff8c;	/*#94cbff; */
	/* background-color: #ffe4ac;	#94cbff; */
}
#photographDiv{
	left: 6vw;
}
#buttonDiv1,#buttonDiv2{
	z-index: 1;
	margin-top: 2vh;
}
.modal-css{
    background-color:rgba(38, 59, 95, 0.611764705882353);
    /* box-shadow: 17px 25px 14px rgb(0 0 0 / 39%), inset -98px 0px 100px rgb(231 159 159 / 23%); */
    border: 4px solid white;
    margin-top: 4vh;
  }
::-webkit-scrollbar {
    width: 1vw;
}
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #8005e0; 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    background: #288496; 
    border-radius: 10px;
}

#acknowledgementDiv {
    /* top: 8vh; 
	right: 4vw; */
	display: none;
	text-align: center;
    /* border-radius: 3vw; */
	border: 0.22vw solid black;
    background-color: aliceblue;
	box-shadow: 5px 6px 2px black;
	/* height: 43vh; */
	margin-top: 5vh;
}

.labels{
  text-align: center;
  font-size: 1vw;
  color: red;
}
#prevTip, #nextTip{
  font-size: 2vw;
  border-radius: 1vw;
  /* background-color: #de87b4; */
  background-color: white;
  color: black;
}
#tipSpan{
  border-radius: 1vw;
  /* background-color: #de87b4;; */
  background-color: white;
  color: black;
}
h2{
  text-align: center;
  color: white;
  font-weight: bold;
}

table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow-x: auto;
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
}

thead th {
  background-color: #4CAF50;
  color: white;
}

thead tr:first-child th {
  background-color: #388e3c;
  font-size: 16px;
}

tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

tbody tr:hover {
  background-color: #e0f7fa;
}

th[rowspan] {
  vertical-align: middle;
}

.table-wrapper {
  overflow-x: auto;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  max-width: 90%;     /* New: prevent full screen width */
  margin: 0 auto;      /* New: center the table */
  padding: 16px;       /* Optional: add inner spacing */
}

#textDiv{
  background-color: white;
  font-size: medium;
}

@media (max-width: 768px) {
  table {
    font-size: 14px;
  }
}


@media (max-height: 500px) {
  .buttonCss{
    margin-top: 1.5vh;
  }
  #acknowledgementDiv{
    margin-top: 0vh;
  }
  #container{
    margin-top: -8vh;
  }
  #modalDiv1, #modalDiv2{
    height: 49vh;
  }
  
}

@media (max-height: 360px) {
  .buttonCss{
    margin-top: 0vh;
  }
  #acknowledgementDiv{
    margin-top: 0vh;
  }
  #container{
    margin-top: -8vh;
  }
  #modalDiv1, #modalDiv2{
    height: 49vh;
  }

}

@media (max-width: 540px) {
#nutrientBox{
  font-size: 1.9vw;
  line-height: 7vh;
}
}

/* Extra Large - xl */
@media (min-width: 1280px) {
  /* styles here */
}