:root {

--border: white;
--border-blur: #6f94f2;

}

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

@font-face {
  font-family: "pixoperator";
  src: url("https://monoki.neocities.org/assts/fonts/PixelOperator.ttf") format("truetype");
}

@font-face {
  font-family: "industrialfaith";
  src: url("./font/INDFAIT.TTF") format("truetype");
}

body {
background-image: Url("./img/cityblur.jpeg");
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-color:black;
}

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/cityblur.jpeg");
}
.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: 3px;
border-style: solid;
border-color: var(--border);
border-radius: 25px;
color: var(--border);
text-shadow: var(--border-blur) 0px 0px 3px;
background-color: rgba(0,0,0,0.5);
padding: 15px;

box-shadow: inset 0 0 0.9em 0 var(--border-blur), 0 0 0.9em 0 var(--border-blur);
}

.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;
}
        
.textlink {
color: #ffd900;
font-family: pixoperator;
}

.textlink:hover {
color: #fffead;
font-family: pixoperator;
}

.boldlink {
color: #ffd900;
font-family: industrialfaith;
}

.boldlink:hover {
color: #fffead;
font-family: industrialfaith;
}

p {
font-family: pixoperator;
}

h1, h2, h3, h4, h5, h6 {
font-family: industrialfaith;
}

.alert {
text-align: center;
color: red;
text-shadow: #bd0000 0px 0px 3px;
}