/* * {
    border: dotted 1px red;
} */

@font-face {
    font-family: alagard;
    src: url(alagard.ttf);
}


.bg {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  /* height: 300vh; */
  background: 
    repeating-radial-gradient(#000 0 0.0001%,#280000 0 0.0002%) 50% 0/2500px 2500px,
    repeating-conic-gradient(#000 0 0.0001%,#2e0000 0 0.0002%) 60% 60%/2500px 2500px;
  background-blend-mode: difference;
  animation: b .2s infinite alternate;
  mix-blend-mode: lighten;
  opacity: .9;
  visibility: visible;
}
@keyframes b{
  100% {background-position: 50% 0, 60% 50%}
} 

a {
    color: whitesmoke;
}

a:hover {
    filter: drop-shadow(0px 0px 3px whitesmoke);
}

body {
    font-family: alagard;
    font-size: 2em;
    background-color: rgb(9, 9, 10); 
    color: whitesmoke;
    margin: 0;
}

header {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.eye {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 800px;

}

.eye img {
    grid-column: 1;
    grid-row: 1;
    overflow: hidden;
    width: 100%;
    image-rendering: pixelated;
}

#rays{
    filter: invert() drop-shadow(0 0 30px white);
    margin: auto;
    z-index: 1;
    image-rendering: auto;
}

#furby {
    width: 260px;
    margin:auto;
    z-index: 2;
    filter: drop-shadow(3px 0px 0px black) 
    drop-shadow(-3px 0px 0px black) 
    drop-shadow(0px 3px 0px black) 
    drop-shadow(0px -3px 0px black)
    drop-shadow(0 0 10px whitesmoke);
}

#eyeball {
    width: 200px;
    margin:auto;
    z-index: 3;
    filter: drop-shadow(2px 0px 0px black) 
    drop-shadow(-2px 0px 0px black) 
    drop-shadow(0px 2px 0px black) 
    drop-shadow(0px -2px 0px black);
}

main {
    background: linear-gradient(hsla(0, 0%, 0%, 0), #5a0000ae);
    /* background-blend-mode: multiply; */
    /* height: 200vh; */
    text-align: center;
    min-height: 2100px; 
}

.content {
    background-color: black;
    background-image: url("gradient_d_bw.png");
    background-repeat: no-repeat;
    background-size: 500px;
    image-rendering: pixelated;
    border: double 8px white;
    width: 500px;
    margin: auto;
    padding-bottom: 20px;
    margin-bottom: 50px; 
    min-height: fit-content;
    max-height: 2000;

}

.textbox {
    font-size: 1.5em;
    font-weight: bold;
    height:auto;
    margin:0;

}

.textbox p {
    margin: 0;
    padding-top: 20px;
    padding-bottom: 20px;
}

.textbox img {
    width: 90%;
    image-rendering: pixelated;
    margin: 0;
    border: solid 3px black;
}

.imagebox {
    min-height: initial;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
#t1 {
    color: black;
}

#t2 {
    color: black;
}
#t2 img{
    border:none;
}

#t3 {
    color: white;
}

#t4 img {
    width: 400px;
    border: none;
}

#t5 img{
    border: solid 3px white;
}