/*wikitable by @limegreen on neocities. a link is appreciated!*/


/*to change the fonts here, go to google fonts, find ones you'd like, and use the @import snippet*/
@import url('https://fonts.googleapis.com/css2?family=Aldrich&display=swap');

/*example styles*/


/*global colors. change here to see the effect*/
:root {
  --backgroundcolor: red;
  --textcolor: #f32b2b;
  --header: linear-gradient(180deg,rgba(99, 19, 34, 0.9) 0%, rgba(112, 26, 30, 0.59) 21%, rgba(135, 92, 92, 0.08) 50%, rgba(0, 0, 0, 0.83) 100%);
  --main: black;
  --footer: #14040480;
  --borders: #070000;

  /*links*/
  --link: crimson;
  --linkhover: rgb(248, 62, 86);
  
  /*headings*/
  --breadcrumb: white;
  --h1: #e01a1a;
  --h2: #e01a1a;
  --h3: #e01a1a;
  --headerunderline: rgb(231, 43, 43);
  
  /*boxes*/
  --quotebackground:rgb(41, 1, 1);
  --quotetext: #da2121;
  --boxbg: #0f0707;
  --showcontentborder:rgb(10, 2, 2);
  
  --seriesofbg:#13080e;
  --seriesoftext:#e6136a;
  
  /*infotable*/
  --infoboxbg:#110809;
  --centertext:#ca0808;
  --boldtext:#f7afaf;
  --infotext:#f7afaf;
}



body{
  background-color: var(--backgroundcolor);
  background-image: url('/shrine-img/zer0/metalheart_5.jpg');
  font-family:"Aldrich", sans-serif;
  font-size: 15.5px;
  margin: 0;
  color: var(--textcolor);
  text-shadow:inset 0px 1px 0px rgba(12, 170, 109, 0.432);
}
body .no-scroll {
  overflow: hidden;
}
/*container*/
.wrapper{ 
 min-height: 100vh;
 margin: auto;
 /*width of the content*/
 width: 85%;
 margin: auto;
 margin-top: 15px;
 margin-bottom: 15px;
   border:1px solid var(--borders);
   border-radius: 20px;
backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
position: relative;
overflow: hidden;
}
.wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

.wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}
/*main content*/
main{
 padding: 15px;
 background: linear-gradient(180deg,rgba(0, 0, 0, 0.86) 0%, rgba(36, 1, 12, 0.9) 100%);
 min-height: 100vh;
   clear: left;

}

/*links*/
a{
 color: var(--link); 
}
/*link hover*/
 a:hover{
 text-shadow: 0 0 1px ;
 color: var(--linkhover);
 text-decoration: underline;
}
/*breadcrumbs*/
.breadcrumb{
color: var(--breadcrumb);  
}
header{
  height: 100px;
  border-bottom:1px solid var(--borders);
  background:var(--header);
  border-radius: 20px 20px 0px 0px;
}
/*prevent image overflow*/
main img{
  max-width: 100%;
}
/*footer*/
footer{
  background:var(--footer);
  padding: 35px;
  border-top:1px solid var(--borders);
  text-align: center;
  border-radius: 0px 0px 20px 20px;
}

/*headers*/
h1,h2,h3{
overflow: hidden;
border-bottom: 2px solid var(--headerunderline); 
}
h2{
font-size: 19pt; 
}
h3{
font-size: 16pt; 
}

/*table of contents*/
.showcontent{
  padding: 3px;
  font-weight: bold;
}
.contents{
 background-color:var(--boxbg);
  width: 14%;
 padding: 7px;
 border: 2px solid var(--showcontentborder);
}
/*this changes the dropdown to a hamburger menu for desktop screens*/
.toc summary {
    list-style-type: '☰ ';
}
.toc ul{
 list-style: none;
  margin-left: -30px;
}


/*quotes*/
.quotebox{
  width: 30%;
  background-size: cover;
  font-style: italic; 
  padding: 10px; 
 
 padding: 13px;
  border-left: solid;
  background-color:var(--quotebackground);
  color: var(--quotetext);
}

/*series of*/
.revealsummary{
  text-align: center;
 background-color:var(--seriesofbg);
  padding: 10px;
 font-weight: bold;
  border: 2px solid var(--showcontentborder);
}
.reveal{
  text-align: center;
 background-color:var(--seriesofbg);
  padding: 5px;
  width: 50%;
  border: 2px solid var(--showcontentborder);
  color: var(--seriesoftext);

}

/*flair with image- delete above if using. you will need to play with the width and height to make it fit properly*/

#flair::before { 
  background-image: url('https://valkyrias-hideout-art.neocities.org/IMG/favicons/Zewo.gif');
  background-size: cover;
  background-size: 34px 33px;
  display: inline-block;
  width: 34px; 
  height: 33px;
  margin-left: 4px;
  content:" ";
  image-rendering: pixelated;
}

/*infotable*/
.btn {
  	-moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
	box-shadow:inset 0px 1px 0px 0px #f5978e;
	background:-moz-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:-webkit-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:-o-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:-ms-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f',GradientType=0);
	background-color:#f24537;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	border:1px solid #d02718;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
  text-align: center;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
}
.btn:hover {
	background:-moz-linear-gradient(top, #c62d1f 5%, #f24537 100%);
	background:-webkit-linear-gradient(top, #c62d1f 5%, #f24537 100%);
	background:-o-linear-gradient(top, #c62d1f 5%, #f24537 100%);
	background:-ms-linear-gradient(top, #c62d1f 5%, #f24537 100%);
	background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537',GradientType=0);
	background-color:#c62d1f;
}
.btn:active {
	position:relative;
	top:1px;
}

.infotable {
  float:right;
  margin-left:5px;
  background:var(--infoboxbg);
  border-left:2px solid var(--borders);
  border:2px solid var(--borders);
  width:21%;
  font-size: 14px;
  color: var(--infotext);
  
}
.infotable img{
  max-width: 100%;
  margin: auto;
}
.infotable th {
  text-align:left;
 
}
.infotable th{
    padding: 5px;
  color: white;
}
.infotable ul{
  list-style: none;
  padding: 0px;
  margin: 4px;
}
#centertext{
  text-align: center;
  box-shadow:
  inset 0px 1px 0px 0px #f29c93,
  inset 0px 39px 0px -24px rgba(231, 95, 129, 0.253);
  background:linear-gradient(180deg,rgba(224, 18, 18, 1) 0%, rgba(0, 0, 0, 0.25) 100%);
  border: 1px solid var(--borders);
}
/*clear float after infobox*/
#clear::after {
  content: "";
  clear: both;
  display: table;
}
            .gallery {
                padding: 10px;
                overflow: hidden;
            }
             .galleryimage {
              background: linear-gradient(180deg,rgba(250, 202, 211, 0.25) 0%, rgba(0, 0, 0, 0) 100%);
              float: left;
              width: 170px;
              height: 170px;
              text-align: center;
              margin: 10px;
              border: 1px rgba(0, 0, 0, 0.521) solid;
              border-radius: 10px;
            }
            .gallery-image {
              float: left;
              width: 170px;
              height: 170px;
              background-repeat: no-repeat;
              background-size: auto 100%;
              background-position: center;
              margin: 10px;
              border: 1px rgba(0, 0, 0, 0.521) solid;
              border-radius: 10px;
            }

            .flex-gallery {
              display:flex;
              flex-direction: row;
              flex-wrap: wrap;
              
            }
            .image {
              display: flex;
              flex-direction: column;
              width: 250px;
  
            }
            .container{
              position: relative;
              height: 225px;
            }
            #webamp-container {
              margin-top: 32vh;
              margin-left: 25px;
            }

/*responsiveness*/

/*narrow*/
@media(max-width: 900px) {
  .infotable{
    width: 30%;
  }
    .wrapper{
    width: 100%;
  }
      .chapters{
    width: 50%;
  }
  .reveal{
    width: 60%;
  }
  }  
/*medium*/
@media(max-width: 1250px) {
  .infotable{
    width: 35%;
  }
   .contents{
    width: 40%;
  }
  }  

/*mobile */
@media(orientation: portrait) {
  .quotebox{
    width: 90%;
    margin: auto;
    padding: 15px;
    margin-top: 10px;
  }
  body{
    margin-top: 0px;
  }
   .infotable{
    width: 100%;
     margin-bottom: 20px;
  }
 
  .wrapper{
    width: 95%;
  }
    .chapters{
    width: 50%;
  }
  .main{
    padding-top: 20px;
  }
  .contents{
    width: 95%;
  }
   .reveal{
    width: 95%;
  }
}