:root {

--border: #ceff91;
--errortext: red;

}

@font-face {
  font-family: "cthulhumbusarcade";
  src: url("./font/cthulhumbusarcade.ttf") format("truetype");
}


body {
background-image: Url("./img/FOLIAGE1.JPG");
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-color:black;
font-family: cthulhumbusarcade;
}

body:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      background: url("./img/FOLIAGE1.JPG");
}
.container {
margin:auto;
min-width: 1000;
min-height: 1000;
width: 100%;
height: 100%;
}

.flexcontain {
display: flex;
justify-content: center;
align-items: center;
}

.main {
width: 80%;
margin: auto;
border-width: 5px;
border-style: solid;
border-color: bbfac2;
border-radius: 5px;
color: bbfac2;
background-image: Url("./img/FIBER02.png");
}


.parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 8px;
}
    

.parent > div {
border-width: 5px;
border-style: solid;
border-color: #0a3d45;
border-radius: 5px;
color: #bbfac2;
text-shadow: rgba(11,191,173,0.9) 0px 0px 3px;
background-color: #1a7971;
padding: 15px;
background-image: Url("./img/FIBERGREEN.jpg");
box-shadow: inset 0 0 0.5em 0 var(--border), 0 0 0.5em 0 var(--border);
}

.div1 {
    grid-column: span 5 / span 5;
}

.div2 {
    grid-row: span 4 / span 4;
    grid-row-start: 2;
}

.div3 {
    grid-column: span 4 / span 4;
    grid-row: span 4 / span 4;
    grid-row-start: 2;
}
        
.div4 {
grid-column: span 5 / span 5;
grid-row: span 4 / span 4;
grid-row-start: 2;
}

a {
color: #ffd900;
}

a:hover {
color: #fffead;
}