@font-face{
font-family:"Archaic";
src: url("../fonts/archaic1897/Archaic1897.ttf") format("truetype");
font-style:normal;
font-weight:normal;
}

@font-face{
font-family:"Pixelfy";
src: url("../fonts/Pixelfy-sans/PixelifySans-Regular.ttf") format("truetype");
font-style:normal;
font-weight:normal;
}

@font-face{
  font-family:"Pixelish";
  src: url("../fonts/acc997c86979663b-s.p.woff2");
  font-style:normal;
  font-weight:normal;
}

 body:has(dialog:modal) {
      overflow:hidden;
      }
      
::backdrop {
  background: hsl(0 0 0 / 90%);
  backdrop-filter: blur(3px);
}

.super-sidebar {
width: 200px;
min-width: 200px;
height: auto;     
background-color: #D9DDDc;
overflow-x: hidden;
border-right: solid #48494b 2px; 
position:sticky;
}

.super-sidebar a{
padding: 6px 8px 6px 16px;
text-decoration:none;
font-size:22px;
color:#48494b;
display:block;
}

.super-sidebar a:hover{
transform: scale(1.1);
text-decoration:underline;
transition: transform(0.2s);
}

body{
background-color:#8C1F24;
}

.centerer{
display:flex;
justify-content:center;
align-items:center;
margin-top:150px;
margin-bottom:200px;
height:100%;
width:100%;
flex-direction:column;
}

.encyclopedia-content{
justify-content:flex-start;
display:flex;
width:100%;
height:100%;
padding-left:20px;
background-color:#D9DDDc;
font-family:courier;
flex-direction:column;
line-height:1.5;
margin:0 auto;
  
}
.encyclopedia-content h1{
color:#48494b;
text-decoration:underline;
font-size:40px;
}
.encyclopedia-content p{
color:#48494b;
font-size:22px;
}
.encyclopedia-content a{
color:#48494b;
}
a:link{
color:#48494b;
text-decoration:underline;
display:inline-block;
transition: transform(0.2s);
}

a:visited{
color:#403c3f;
}
a:hover{
transform: scale(1.1);
text-decoration:underline;
}

ul{
color:#48494b;
;
}
li{
color:#48494b;
font-size:22px;
list-style-type:"✜";
padding-left:5px;
}
.line{
margin:10px auto;
width:25%;
border:none;
height:1px;
background-color:#302b2f;
}
.invisible-line{
border:none;
margin:22px 0;
}

.article-main{
flex-grow:1;
display:flex;
flex-direction:column;
padding-left:10px;
padding-right:10px;
}

.article-main p{
font-size:22px;
}

.article{
width:95%;
border-color:#48494b;
background-color:#D9DDDc;
min-height:100vh;
font-family:"Pixelfy", "courier";
border-radius:25px;
border-style:solid;
border-width:5px;
padding-right:15px;
display:flex;
flex-direction:row;
margin:0 auto;
overflow:hidden;
}

.title{
text-align:center;
border-width:1px;
border-color:#302b2f;
border-style:solid;
min-height:100px;
font-size:50px;
padding:30px;
}

.box-content{
display:flex;
flex-direction:row;
}
.text-blob{
margin-top:10px;
width:100%;
border-style:solid;
border-width:1px;
border-color:#302b2f;
padding:10px;
margin-right: 15px;
  clear:both;
}

.illustration-box{
  border:2px solid black;
  float:right;
  width:250px;
  margin: 0 0 15px 20px;
  height:auto;
font-size:9px;
  text-align:center;
  padding:5px;
  background-color:#f5faf9;
  justify-content:center;
  align-content:center;
}
.illustration-box img{
  width:100%;
  display:block;
  border:2px solid black;
  
}
.centerer2{
text-align:center;
margin-bottom:0;
margin-top:30px;
}

.article-main h1{
font-size:40px;
}

.article-main h2{
text-align:left;
font-size:30px;
}

.mainline{
width:99%;
border:none;
margin:5px auto;
height:1px;
background-color:#302b2f;
}

.X{
  border:none;
  background: none;
  color:white;
  font-size:40px;
  margin-top:35px;
}

.image-dialog{
  
  height:100vh;
  width:100vw;
  margin-top:10px;
  margin-bottom: 20px;
  padding-bottom:20px;
  margin-left:10px;
  margin-right:10px;
  opacity:1;
position:relative;
background: black; 
background:transparent;
}

.image-dialog-center{
  height:70%;
  width:100%;
  display:flex;
  justify-content: center;
  align-content: center;
}

.image-dialog-center img{
  border:5px solid black;
}

.arrow-button{
  border:none;
  background:transparent;
  color:white;
  font-size:80px;
}

.liner-top{
background: white;
height:50px;
Width:100%;
top:0;
 position:absolute; 
}

.liner-bottom{
background:white;
height:50px;
width:100%;
position: absolute;
bottom: 0;

margin-bottom:20px;
}
.spacer {
  height: 50px;
  margin: 0 0 -50px 0;
  background: transparent;
}

.flipped-arrow{
  transform:scaleX(-1);
  display: inline-block;
}

.scanlines {
    position: relative;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
}

.scanlines:before,
.scanlines:after {
    display: block;
    pointer-events: none;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
}

.scanlines:before {
    width: 100%;
    height: 2px;
    z-index: 2147483649;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0.75;
    animation: scanline 6s linear infinite;
}

.scanlines:after {
    top: 0;
    bottom: 0;
    z-index: 2147483648;
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0, 0, 0, 0.3) 51%
    );
    background-size: 100% 4px;
    animation: scanlines 1s steps(60) infinite;
}

@keyframes scanline {
    0% {
        transform: translate3d(0, 200000%, 0);
    }
}

@keyframes scanlines {
    0% {
        background-position: 0 50%;
    }
}

div {
    margin: 0;
    padding: 0;
}


body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

/*Expiremental stuff*/