/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* 
    Created on : Feb 4, 2023, 9:32:41 AM
    Author     : Scott
*/
@font-face{
     font-family: font1;
     src: url(BASKVILL.TTF);
    }

@font-face{
     font-family: font2;
     src: url(PALSCRI.TTF);
    }
    
 
    body{background-color: #9966ff;
         
          font-family: font1;
          font-size: 10vw;
          color: white;
}
 a:link {
  color: white;
}

/* visited link */
a:visited {
  color: white;
}

/* mouse over link */
a:hover {
  color: white;
}

.controlbut{
    position: fixed;
    left:8%;
    top:85%;
    height: 10%;
    width: 90%;
   
    z-index: 5;
    
}
.controlbutb{
    position: fixed;
    left:5%;
    top:87%;
    height: 10%;
    width: 90%;
   background-color: black;
   opacity: .5;
   z-index: 4; 
}
.glly{ 
    font-family: font2;
    font-size: 10vh;
    text-align: center;
    color: white;
    text-shadow: 2px 2px black;
}
.answer{
    position:absolute;
    background-color: #9966ff;
    left:10%;
    top:5%;
    width:80%;
    height: 100%; 

    font-family: font1;
    font-size: 7vh;
    text-align: center;
    color: white;
    text-shadow:2px 2px black;
    z-index: 2;
}
input{
    background-color: #9966ff;
    font-size: 7vh;
    width: 100%;
}
textarea{
    background-color: #9966ff;
    font-size: 4vh;
    width: 100%;
}
.fbox{position:absolute;
    left:5%;
    top:3%;
    width:90%;
    height: 100%; 
        
    font-family: font1;
    font-size: 7vh;
    text-align: left;
    color: white;
    text-shadow:2px 2px black;
  }
.pss{
    position: fixed;
    height: 60%;
    width: 65%;
    top: 15%;
    left: 17.5%;
    z-index: 7; 
    
}
.psst{
    position: absolute;
    height: 40%;
    width: 90%;
    top: 25%;
    left: 5%;
    font-family: font1;;
    font-size: 10vh;
    text-align: center;
    color: white;
   
}
.pssbx{position: absolute;
    height: 9.75vh;
    width: 100%;
    border: 2px solid black;
}
.psshld{ position: absolute;
    height: 100%;
    width: 90%;
    top: 0%;
    left: 0%;
    
}

.eyebx{ position: absolute;
    height: 100%;
    width: 10%;
    top: 0%;
    left: 90%;
    z-index: 4;
    
}
 
.eye{ position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    background-color: white;
}
.eyep{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    overflow: hidden;
   
}
.eyex{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    overflow: hidden;
    display: none;
}
  .psss{position: absolute;
    height: 60%;
    width: 65%;
    top: 30%;
    left: 17.5%;
    z-index: 5; 
   
    
    display: none;
    font-family: font1;;
    font-size: 10vh;
    text-align: center;
    color: white;
}
.under2{
position: absolute;
    height: 60%;
    width: 65%;
    top: 30%;
    left: 17.5%;
    z-index: 5; 
    border: 2px solid white;
    border-radius: 1em;
    background-color: black;
    opacity: .6;
    display: none;
    }
  .under3{
    position: absolute;
    height: 60%;
    width: 65%;
    top: 30%;
    left: 17.5%;
    z-index: 5; 
    border: 2px solid white;
    border-radius: 1em;
    background-color: black;
    opacity: .3;
   }
.pssr{
    position: absolute;
    height: 40%;
    width: 90%;
    top: 15%;
    left: 5%;
    font-family: font1;;
    font-size: 10vh;
    text-align: center;
    color: black;
   
}
.prst{
    position: absolute;
    height: 40%;
    width: 90%;
    top: 5%;
    left: 5%;
    font-family: font1;;
    font-size: 7vh;
    text-align: center;
    color: white;
   
}
.topper{
    position: fixed;
     height: 16%;
     width: 45%;
     top: 2%;
    left: 2%;
    z-index: 5;
    font-family: font2;
     font-size: 12vh;
    text-align: left;
    color: white;
    text-align: center;
   
}
.under{
   position: fixed;
     height: 18%;
     width: 100%;
     top: 0%;
    left: 0%;
    z-index: 4;
    background-color: black;
    opacity: .3;
}

.del{display: none; 
    position: fixed;
     height: 12%;
     width: 15%;
     top: 3%;
    left: 82%;
    z-index: 4;
    font-family: font1;
     font-size: 2.2vw;
    text-align: left;
    color: white;
    text-align: center;
    border: 2px solid white;
    border-radius: 1em;
    
}
.ren{display: none; 
   position: fixed;
     height: 12%;
     width: 15%;
     top: 3%;
    left: 65%;
    z-index: 4;
    font-family: font1;
     font-size: 2.2vw;
    text-align: left;
    color: white;
    text-align: center;
    border: 2px solid white;
    border-radius: 1em;
    
}
.nwim{display: block; 
   position: absolute;
     height: 12%;
     width: 15%;
     top: 3%;
    left: 48%;
    z-index: 4;
    font-family: font1;
     font-size: 2.2vw;
    
    color: white;
    text-align: center;
    border: 2px solid white;
    border-radius: 1em;
    
}

div.stage2{ position: fixed;
    width: 96%;
    height: 80%;
    top:20%;
    left: 2%;
    overflow-y:  scroll;
    z-index: 2;
}
.bpicHE{display: none;
     position: fixed;
     width: 75%;
     height: 80%;
     top:20%;
    left: 12%;
    overflow-y:  auto;
     z-index: 3;
     text-align: right; 

    
}
.bpic{
     position: absolute;
    width: 100%;
    top: 0%;
    left: 0%;
}
div.popup{display: none;
     position: fixed;
     
     height: 70%;
     width: 50%;
     top: 28%;
     left: 25%;
    z-index: 4;
    
}
div.nwim1{
    display:block;
    position: absolute;
    height: 12%;
    width: 15%;
    top: 3%;
    left: 45%;
    z-index: 4;
    font-family: font1;
    font-size: 5vh;

    color: black;
    text-align: center;
    border: 2px solid yellow;
    border-radius: 1em;
    background-color: #ffffcc;
}
div.frl{display: none;
    position: absolute;
    width: 98%;
    height: 90%;
    top: 15%;
    left: 1%;
    align-content: center;
    z-index: 3; 
    font-family: font1;
    font-size: 15vh;
    text-align: left;
    color: white;
    
}
.chbx{
    width: 7vh;
    height: 7vh;
    background-color: #ffffcc;
    color: black;
}
select{
  background-color: #ffffcc;
  font-family: font1;
  font-size: 7vh;
  color: black;
}
td{
    font-size: 7vh;
}
.frr{display: block;
    position: absolute;
    width: 90%;
    height: 72%;
    top: 27%;
    left: 5%;
    z-index: 3; 
    font-family: font1;
    font-size: 5vh;
    text-align: left;
    color: white;
    overflow-x: hidden;
    overflow-y: scroll;
} 
.capt2{

        left:0%;
        width: 98%;
        
        border: 2px solid #990033;
        border-radius: 1em;
        background-color: #ffffcc;
}
.capt2 td{
    text-align: center;
    font-weight: normal;
    margin:5px;
    text-align: center;
    color: black;
    font-family:  font1;
    font-size: 5vh;
    
}
.cld{
    text-align: center;
    color: #990033;
    font-family:  font1;
    font-size: 5vh;
}
.gone{display: none;
    width: 100%;
}



.col1 {position: absolute;
  display: block;
  width:32%;
  left:1%;
  top:2%;
}
.col2 {position: absolute;
  display: block;
  width:32%;
  left:34%;
  top:2%;
}
.col3 {position: absolute;
  display: block;
  width:32%;
  left:67%;
  top:2%;
}
.image-item img {
  width: 100%;
  border-radius: 5px;
  height: auto;
  
}



/* overlay styles */

.image-item {
  position: relative;
  cursor:pointer;
 width: 100%;
 padding-bottom: 1%;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(57, 57, 57, 0.502);
  top: 0;
  left: 0;
  transform: scale(0);
  transition: all 0.2s 0.1s ease-in-out;
  color: #fff;
  cursor:grab; 
  /* center overlay content */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* hover */
.image-item:hover .overlay {
  transform: scale(1);
}
.enlrg{position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  display: none;
  z-index: 7;
}
.enlrgp{position: absolute;
  width: 70%;
  height: auto;
  top: 0px;
  left: 15%;
  border: 3px solid #990033;
  cursor: grab;
}
.chbx{
    width: 5vh;
    height: 5vh;
    background-color: #ffffcc;
    color: black;
}

.closer{
     position: fixed;
     height: 12%;
     width: 15%;
     top: 2%;
    left: 65%;
    z-index: 5;
    font-family: font2;
     font-size: 10vh;
    text-align: left;
    color: white;
    text-align: center;
   border: 2px solid white;
    border-radius: 1em;
}