:root {
     --white: #FFFFFF;
     --teal: #67a9bc;
     --whiteBlue: #ebf2f5;
     --iceyBlue: #cde3e9;
     --babyBlue: #b5dedd;
     --black: #000000;
     --offColor:#252427;
     --GREY:#3c3c3c;
}


/* fonts */

.vt323-regular {
  font-family: "VT323", monospace;
  font-weight: 400;
  font-style: normal;
}
.press-start-2p-regular {
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
}

body {
  background-color: var(--white);
  overflow: auto;
  background-size: 200% 200%;
}


.mainContent{
    border-radius: 15px;
    border:3px;
    border-color: var(--black);
    background-color: var(--teal);
    border-style: solid; 
    margin: auto;
    margin-top: 5%;
    width: 800px;
    height: 650px;
    align-content: center;
    display: flex;
}
.mainContenedor{
    width: 800px;
    height: 650px;

    border-radius: 15px;
    border:3px;
    border-color: var(--black);
    background-color: var(--teal);
    border-style: solid;  

    margin: auto;
    margin-top: 5%;

    align-content: center;
    display: flex;
    z-index:0;
    }
.mainContentPill{
    margin-top: 0.5%;
    width: 800px;
    height: 100px;
    align-content: center;
    position: absolute;
    text-align: center;
    font-size: 32px;
    font-family: 'Press Start 2P';
    letter-spacing: 4px;
    color: var(--offColor);
}
.secondaryContent{
    border-radius: 15px;
    border:2px;
    border-color: var(--black);
    background-color: var(--iceyBlue);
    border-style: solid; 
    margin: auto;
    margin-top: 12%;
    width: 790px;
    height: 500px;
    display: flex;
    z-index:1;
}
.textContent{
    border-radius: 15px;
    border:2px;
    border-color: var(--black);
    background-color: var(--whiteBlue);
    border-style: solid; 
    margin-top: -2%;
    width: 450px;
    height: 200px;
    display: flex;
    margin: auto; 
    overflow: auto; 
    max-height: 200px; 
    text-align: justify; 
    position: sticky;
    z-index:10;
}
  .textContentPill {
    font-family: 'VT323';
    margin-top: 3%;
    margin-left: 3%;
    font-size: 24px;
    margin-right:3%;
  }
/* ts is NOT working */

/* save me */


/* fa grid */
.gridContainer {
  display: grid;
  height: 500px;
  max-width:755px;
  grid-template-columns: auto auto auto;
  
  padding: 5px;
  gap: 5px;
  align-content: start;
  margin: 15% 2% 2% 2%;
  
  border-radius: 15px;
  border:2px;
  border-color: var(--black);
  background-color: var(--iceyBlue);
  border-style: solid; 
}

.gContainer div {
  background-color: #f1f1f1;
  color:#000;
  padding: 10px;
  font-size: 30px;
  text-align: center;
}

.gridContainer2 {
  display: grid;
  grid-template-columns: auto auto;
  
  padding: 5px;
  gap: 5px;
  align-content: center;
  margin: 5% 1% 1% 1%;
  
  border-radius: 5px;
  border:2px;
  border-color: var(--black);
  background-color: #4c7f85;
  border-style: solid; 
  width:800px;
  max-height:700px;
  max-width:800px;
}

.boxContent{
    border-radius: 5px;
    border:2px;
    border-color: var(--black);
    background-color: #4c7f85;
    border-style: solid; 
    margin: auto;
    margin-top: 0%;
    display: flex;
    z-index:1;
    width:200px;
    height:200px;
    text-align: center;
}






/*some super exact things, mainly future ref for now*/
.fire {
   top:8.052230685527748vh;
   left: 26.5625vw;
   height: 29.379760609357998vh
 }