/* Fonts */
@font-face {
  font-family: "PragmataPro Fraktur Regular";
  font-style: normal;
    font-weight: normal;
  src: url("https://nekromant.neocities.org/fonts/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/fonts/PragmataPro Fraktur Bold.ttf") format("truetype");
}
html.clsch {

background-color: #181A1B;
  color: #FAF9F9;
  --accent:#C6B604;
  --accent2:#A5ABAF;
  --accent3: #DDDBF1;
  --accent4: #181A1B;
	--accentbold:#9b8e04;
  --accentil: #c1c2be;
--accentroll:#8F9CA4;
--accentbg: #6b6e5427;

--scrollthumb: #1f1f1fd3;
}


@media (prefers-color-scheme: light) {
html.clsch.adaptive{
font-weight: 500;
   background-image: url("https://nekromant.neocities.org/tiles/texture1.png");

background-color: #FAF9F9;
color: #181A1B;
--accent: #008db1;
  --accent2:#71838F;
--accent3: #181A1B;
--accent4: #FAF9F9;
--accentbold:#111927;
 --accentil: #6b7eb1;
--accentroll:#8FA6B5;
--accentbg: #6ab9e050;
  --scrollthumb: #cedbe4d7;
}


}


html {
     font-family: Fira Mono;
}

i {
background-color: var(-accentbg);
color: var(--accentil);
font-size: medium;
font: small-caps;
}
h1, h2 {
 color:var(--accent);

	
}
h4, h3{
 color:var(--accentbold);
 font-weight: bold;
 font-size: larger;
 padding-bottom: 18px;

}

h5, h6 {
color:#A5ABAF;
font-weight: italic;
}


blockquote {
	
	border-left: solid 3px var(--accent);
	padding-left: 6px;
background-color: #9fafb93b;
	
}


body {
scrollbar-width: thin;
scrollbar-color: var(--scrollthumb) var(--accent4);

}



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


ul, li {

  list-style: none;
}

a:hover {

  text-decoration: underline; 

}


p,a {

  font-size: 16px;
}

hr {
  border: none;
  border-top: 2px dashed #404040;
}



/* List Page*/

.list-item {
  background-color: var(--accent4);
  color: var(--accent3);
  list-style: none;
  border: 1px dotted #404040;
   border-radius:  3px;
  margin: 15px;
  padding: 20px;
   background-image: url("https://nekromant.neocities.org/tiles/texture1.png");
}

a.list-title {
text-decoration: none;

}
.list-item2 {
  background-color: var(--accent4);
  color: var(--accent3);
  list-style: none;
  border: none;
  margin: 5px;
  padding: 5px;
  font-size: 12px;
  text-decoration:none;
   border-radius:  3px;

}
a.list-item2:hover {
  text-decoration: underline;
}

/* Navbar*/
.nbar {
    padding: 15px;
    font-family: PragmataPro Fraktur Regular;
    font-size: 32px !important;
   
}

a.nitem {
     text-decoration: none;
     color:var(--accent);
     margin: 15px;
     font-size: 32px !important;
}

a.nitem:hover{
text-decoration: underline;
font-size: 32px !important;

}
a.nitem2 {
     text-decoration: none;
   background-image: url("https://nekromant.neocities.org/tiles/texture1.png");
     color:var(--accent);
     margin: 15px;
     font-size:40px !important;
     
}


a.nitem2:hover {
    text-decoration: wavy;
}





p.landing {
 padding: 15px;
   text-align: left;
   margin-left: 50px;


  

}

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

em, i {
  color: var(--accentil);
}


/* scrollbars */

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

body::-webkit-scrollbar-track {
  background: var(--accent3)        /* color of the tracking area */
}

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



.footer {
  font-size: small;
  margin-left: 30px;
  color: #727272;
}


.recent-played {

  font-family: Fira Mono;
  font-size: 12px;
}
.recent-played-track {
   font-family: Fira Mono;
  font-size: 12px;
}

img {
max-width: 100%;}   





/* INDEX page style and queries*/
.flexs {
   
        margin: 2em auto;
}
.microj {

  overflow-y:scroll;

  border-radius:  3px;
  border-style:dotted; 
  border-color: #404040;
  height:75vh;
  width: 65%;
  margin: 15px;
  padding: 0px;
  padding-left: 40px;
  padding-right: 40px;
    font-size: 14px;
flex: 1;
line-height: 1.5;
font-family: Fira Mono;

}
div.landing {
   width: 35%;
   margin-right: 20px;
 
}





@media screen and (width <= 1000px) {
  .flexs {
    display: flex;
  }

  div.landing {
    flex: 1;
    margin-right: 5%;
    
  }

 

  .artcon {
    margin: 0px;
    font-size: 16px;
    padding: 5px; 
    width: auto;
  }
} 

@media screen and (width <= 700px) {
.artcon { font-size: 15px;
    width: auto;
}
pre {display: none;}

.microj {height: auto;
 padding-left: 5px;
  padding-right: 5px;}
}

@media screen and (width <= 500px) {
.artcon { font-size: 14px;
  width: auto;}

}
@media screen and (width <= 767px) {
  .flexs {
    display: flex;
    flex-direction: column;
  }


  div.landing {
    flex: 1;
    margin-right: 5%;
    width: 90%;
    
  }
  div.microj {
    flex: 2;
    width: 90%;
  }

  

}