/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

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


@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");
}


  @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: 'Helvetica';
    font-style: normal;
    font-weight: normal;
    src: url(https://nekromant.neocities.org/helvetica-255-webfont/Helvetica.woff)}

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

    :root {
                
                --accent: #ED64F5;
                --accent2: #dbeb88;
            }
           


body {

  color: white;
  font-family: "PxPlus IBM EGA 9x14";
  font-size: 18px;
  
}

h1 { 
 
  font-size: 26px;
  text-align: center;
  
}


 h1,h2,h3 {
color: var(--accent);
            }
h1 {
font-size: 25px;
            }

strong {
             
color: var(--accent);
            }




.bord {
    padding: 10px;
    margin:auto;
    background-color: #000000;
    border: double 3px var(--accent);
}

main {
   
    background-color: #000000;
    padding: 10px;

  }



body {
    scrollbar-color: black rgb(40, 40, 40);
}


            
body::-webkit-scrollbar {
  width: 8px;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: #000000;        /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: #222222;    /* color of the scroll thumb */
  border-radius: 2px;       /* roundness of the scroll thumb */
  border: 3px #222222;  /* creates padding around scroll thumb */
}


p {
  
  text-align: center;
 background-color: black;
 color: white;
 font-family: "PxPlus IBM EGA 9x14";
  font-size: 18px;
    padding-bottom: 10px;
    margin: auto;
    line-height: 1;
  }
  


.p1 {
   background-color:black;
   text-align: center;
   max-width: 500px;   
}


 

/* Generic links */

  
a:link {
  color: var(--accent2);
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: var(--accent2);
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: var(--accent);
  background-color: transparent;
  text-decoration: underline;
}

a:active {
   color: var(--accent);
  background-color: transparent;
  text-decoration: underline;
}






    

            /* 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;
            }
          
         .navimg {
                padding-top: 0px;
                padding-bottom: 0px;
                text-decoration: none;
            }
            
            .navimg:hover { text-decoration: none;}

            #flex {
                display: flex;
               
            }

/* For main nav */

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

a.nav:link {
    color: var(--accent);
    text-decoration: none;
  }
  
  
  a.nav:visited {
    color: var(--accent);
    text-decoration: none;
  }

  a.nav:hover {
    color: black !important;
    background-color: var(--accent2) !important; 
    text-decoration: none;
  }

/* For all other navs (green) */

 a.bar {
    font-family: PragmataPro Fraktur Regular; 
    font-size: 26px;
    color: #e2ed88;
    text-decoration: none;
    padding: 14px 18px;
    
  }
  
  a.bar:hover {
    
    color: black !important;
    background-color: #e2ed88;
  }
  
   a.bar:link {
    color:  #e2ed88;
    text-decoration: none;
  }
  
  
  a.bar:visited {
    color:  #e2ed88;
    text-decoration: none;
  }
  
  
.center {
  display: block;
  margin-left: auto;
  margin-right: 500px;
  width: 50%;
  text-align: center;
  
}
.container {
 
    position:relative; }
    
.rightbar {
     float:right;
  position:absolute;
  top:-500px;
  left:1000px; }

  
           

 .box {
                
border: 1px solid var(--accent);
 padding: 15px;
 text-align: center;
}


 .box2 {
                
border: none;
 padding: 15px;
 text-align: center;
 min-width: 100px;


}

img,
picture,
video {
  max-width: 100%;
}