html{
  color:white;
  
  }


@font-face {
    font-family: 'vcr_osd_monoregular';
    src: url('/font/vcr_osd_mono-webfont.woff2') format('woff2'),
         url('/font/vcr_osd_mono-webfont.woff') format('woff');
}
@font-face {
    font-family: 'SperryPC';
    src: url('/font/Web437_SperryPC_8x16.woff') format('woff'),
        
}
@font-face {
    font-family: 'kal';
    src: url('/font/Kalmari.woff2') format('woff2');
  
  }
   @font-face {
    font-family: 'OCR-A BT'; 
    src: url('/font/OCR-a___.woff') format('woff');
    } 
    
   body{
    text-align: center;
    font-family: 'OCR-A BT';
    background-attachment:fixed;
    background-color:black;
    color:white;
    background-image: url("/stars.gif");
   }
   
   ::selection {
  background-color:black;
  color: red;
}
   a:link {
        color: white;
        background-color: transparent;
        text-decoration: none;
 }
 a:visited{
  color:white;
   
   }
a:hover{
color:yellow; 

text-decoration:underline;
  }
   
   
   
   .mainflex{
  display:flex;
  align-content:center;
  justify-content: center;
  flex-direction:row;
  gap:0px;
  color:white
 
  }
   
.grayscale{
  filter: grayscale(100%);
  transition: 0.3s;
  transition-delay: 0ms
  }
  
.grayscale:hover{
  transition: 0.3s;
  filter:grayscale(0%);
  }
   
  .expand{
  
  transition: 0.3s;
  transition-delay: 0ms
  
  }  
  
.expand:hover{
   transition: 0.3s;
  filter:grayscale(0%);
  transform: scale(1.05);
  box-shadow: 0px 0px 16px white;
  
  } 
  
  .selection{
    background:none;
    transition: 0.3s;
    transition-delay: 0ms
    
    }
    
    .selection:hover{
   transition: 0.3s;
   background: linear-gradient(180deg,rgba(10, 3, 3, 0.75) 0%, rgba(0, 0, 0, 0.75) 100%);
  
  } 
   
   
#navbar{
  width:99%;
  height:50px;
  background: linear-gradient(180deg, rgba(57,16,16,1) 4%, rgba(255,67,67,1) 26%, rgba(121,9,9,1) 33%, rgba(0,0,0,1) 36%, rgba(97,0,0,1) 74%, rgba(175,22,22,1) 91%);
  border: 5px groove #585858;
  padding-bottom:5px;
  text-shadow: 4px -2px 0px #2e0300;
  
  }
  #mainnav{
    width:75%;
   height:65px;
   background: #0a0303;
   background: linear-gradient(180deg,rgba(10, 3, 3, 1) 0%, rgba(166, 48, 48, 0.5) 26%, rgba(255, 0, 0, 0.5) 58%, rgba(127, 37, 37, 0.5) 75%, rgba(0, 0, 0, 1) 100%);
   border-radius:15px 15px 0px 0px;
  border:black 4px ridge;
  padding-top:10px;
    font-family: 'kal';
    font-size:40px;
    }
  
 #mainwrap{
   flex-grow:1;
   text-align:left;
   width:75%;
   height:100%;
   background: linear-gradient( Firebrick 50%, black 100%);
  border:black 4px double;
   

     }
     
 #leftwrap{
    flex-grow:1;
  width:22%;
  height:100%;
  margin:5px;
  border:4px double black;
  color:white;
 
     }
   
#middlewrap{
   flex-grow:1;
  width:50%;
  height:100%;
  text-align:center;
  margin:5px;
  border:4px double black;
  color:white;
  background: linear-gradient( Firebrick 50%, black 100%);
  }
#rightwrap{
   flex-grow:1;
  width:22%;
  height:100%;
  margin:5px;
  
  color:white;
  
  }
  
#button{
  width:50%;
  height:75px;
  color:white;
  background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(46, 46, 46, 1) 34%, rgba(171, 171, 171, 1) 71%, rgba(76, 76, 76, 1) 71%, rgba(0, 0, 0, 1) 100%);
  border:solid 2px white;
  border-radius:15px;
  
  }