@font-face {
  font-family: 'Alagard';
  src: url(https://nekromant.neocities.org/alagard/alagard-webfont.woff);
}


  @font-face {
  font-family: 'VT323';
  src: url(https://nekromant.neocities.org/vt323/vt323-regular-webfont.woff);
}

 @font-face {
  font-family: 'PxPlus IBM EGA 9x14';
  src: url(https://nekromant.neocities.org/alagard/pxplus_ibm_ega_9x14-webfont.woff);
  
 }
 
  @font-face {
  font-family: 'BILLO';
  src: url(https://nekromant.neocities.org/billo/billo.woff);
}
    
    

@font-face {
  font-family: "PragmataPro Fraktur Regular";
  font-style: normal;
    font-weight: normal;
  src: url("https://nekromant.neocities.org/PragmataPro Fraktur Regular.ttf") format("truetype");
}

@font-face {
  font-family: "PragmataPro Fraktur Bold";
  font-style: normal;
    font-weight: bold;
  src: url("https://nekromant.neocities.org/PragmataPro Fraktur Bold.ttf") format("truetype");
}

    
    
    
    
    
    
    p {
      background-color:transparent;
   padding: 30px;
   
   color: white;
 
   margin: auto;
   
  font-family: VT323;
  font-size: 20px;
  line-height: 1;
}
   
       .title {  font-family: BILLO;
     letter-spacing: 2px;
        font-size: 24px; 
         text-decoration: none; 
          color: #c4b41e;
      }
a:link {
  color: #c4b41e;
    } 
a:active {
  color: #c4b41e;} 
a:hover {
  color: #b157e6;
} 

a:visited {
  color: #c4b41e; }
 
 

            /* navigation section!! */
            #navbar {
                height: 110px;
                width: 100%;
              margin-bottom: 2%;
              
            }

            #navbar ul {
                display: flex;
                padding: 0;
                margin-bottom: 10%;
                list-style-type: none;
                justify-content: space-evenly;
            }

            #navbar li {
                padding-top: 35px;
                padding-bottom: 0px;
            }
          
           #navbar li.img {
                padding-top: 0px;
                padding-bottom: 0px;
            }

            #flex {
                display: flex;
               
            }

/* For main nav */

a.nav {
  font-family: PragmataPro Fraktur Regular; 
    font-size: 24px;
    text-decoration: none;
    padding: 6px;
    
}

a.nav:link {

    text-decoration: none;
  }
  
  
  a.nav:visited {
 
    text-decoration: none;
  }

  a.nav:hover {
    color: black !important;
    background-color:#c4b41e !important; 
    text-decoration: none;
  }

 
 
 
 
 
 
 
 
 
 
 
.item { 
padding-bottom: 20px;
      width: 70%;
      height: auto;
      text-align: right;} 


.wrapper {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
}

.main,
.sidebar {
  border: 3px solid black;
  padding: 15px;
  background-color: #fff;
}

.main {
  width: 1100px;
  height: 150vh;
  text-align: right;
  float: right;
  position: relative;
}

.sidebar {
  width: 30%;
  height: auto;

}
.sidebar {

  position: absolute;
  
  background-color: black;
  max-width:300px;
  padding: 0px;
  left:30px;
  top: 100px;
}
 
  
    body {
      background-image:url(https://nekromant.neocities.org/tiles/texture1.png);
      background-color: black;
      background-repeat: repeat;
 
  height: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 30px;
    }

 .category {
      padding: 0px;
      
  
  }
  
.category:hover {
   border: solid 2px #C5B515;
  margin: -2px; }
  
  
  
  
@media only screen and (max-width: 600px) {
     
                #flex {
                    flex-wrap: wrap;
                  
                }

             
                   #sidebar {
                    display: none;
                }
         .category { display: none;}
                  
                
                #navbar ul {
                    flex-wrap: wrap;}
              
                    
                    a.nav {    font-size: 16px;}
                    
                    
                    .item { padding-bottom:1px;}
                }
                
                
                
@media only screen and (max-width: 768px) and (orientation: vertical) {
     
                #flex {
                    flex-wrap: wrap;
                  
                }

             
                   #sidebar {
                    display: none;
                }
         .category { display: none;}
                  
                
                #navbar ul {
                    flex-wrap: wrap;
                    
                }
                     
                           a.nav {    font-size: 16px;}
                           
                           
                            .item { padding-bottom:4px;}
                   }
                
                
                
                
 @media only screen and (max-width: 1200px) {
     
                #flex {
                    flex-wrap: wrap;
                  
                }

             
                   #sidebar {
                    width: 25%;
                    height: auto;
                }
    
                  
                
                #navbar ul {
                    flex-wrap: wrap;
                }}
                
 @media only screen and (max-width: 800px) {
     
                #flex {
                    flex-wrap: wrap;
                  
                }

             
                   #sidebar {
                    width: 20%;
                    height: auto;
                }
    
                  
                
                #navbar ul {
                    flex-wrap: wrap;
                }
   
    .item { padding-bottom:6px;}
   
 }