/*................................................................*/

/* STUFF THAT DOES EVERYTHING!!! */

/*................................................................*/
body {
    background-color: black;
    background-image: url('background.png');
    color: white;
    margin-top:25px;
    margin-left: -30px;

    max-width:1024px;
    align-items:center;
    font-size: 16px;
    text-align: center;
    //border: 1px dashed gray;
    font-family: 'Times New Roman', serif;
    
}

main, footer, header {
    max-width: 1000px; 
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/*................................................................*/

/* BASIC TEXT STUFF */

/*................................................................*/

h1, h2 {
  font-family: 'stampede';
}

h3, label {
  font-family: 'creepshow';
}

label {
font-size: 1.1rem;

}

/* Fonts */
@font-face {
font-family: 'stampede'; /* set name */
src: url("fonts/stampede.ttf?#iefix"); /* url of the font */
}

@font-face {
font-family: 'creepshow'; /* set name */
src: url("fonts/Creepshow.ttf?#iefix"); /* url of the font */
}

@font-face {
font-family: 'zamonia'; /* set name */
src: url("fonts/Zamonia.ttf?#iefix"); /* url of the font */
}

/*................................................................*/

/* RESPONSIVE/MOBILE STUFF!!! */

/*................................................................*/
@media (max-width:799px) {
    aside {
        display: none;
    }
    main, footer, header {
    max-width: 800px;
    }
    body {
        max-width: 800px;
        margin: 5px;
    }
    .mobile_nav_button{
        display: block;
    }
}

@media (min-width:800px) {
    .mobile_nav_button{
        display: none;

    }
}
.mobile_nav_button{
    position: fixed;
    top: 0px;
    right: 0px;
    background-color:black;
    padding: 5px;
    border: 4px white double;
    height: 50px;
    width: 50px;
    margin: 5px;
    }

.mobile_nav_button a{
    color: white;
    text-decoration: none;
}

.mobile_nav {
    background-color: black;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top:0px;
    padding: none;
    display: none;
}

/*................................................................*/

/* HYPERLINK STUFF */

/*................................................................*/
a{
    cursor:crosshair;
    color: #f52222;
    text-decoration: underline;
    }

a:link{
    cursor:crosshair;
    color: #f52222;
    }
    
  a:visited{
    cursor:crosshair;
    color: #f52222;
    }

  a:hover{
    color: black;
    background-color: #f52222;
    //background-color: #ff3838;
    }

  a:active{
    cursor:crosshair;
    color: #ff0000;
    }
    .active{
        font-weight:700;
    }

/*................................................................*/

/* MAIN STUFF */

/*................................................................*/

.footer, .banner, aside, .content {
    background-color: black;
    border: double white 4px;
    overflow: auto;
    overflow-x: hidden;
    overflow-wrap: anywhere;
}

footer,header{
    padding: 28px 32px; }

main{
    display:flex;
    margin: 10px 0;
    padding: 0px 16px;
    //border: 1px dashed gray;
    display:flex;
    flex-direction:row;}

.content{
    margin:0px 16px;
    padding:16px;
    //border: 1px dotted gray;
    width: 100%;
    top: 10px;
}

/*................................................................*/

/* HEADER STUFF */

/*................................................................*/
header {
    display:flex;
    flex-direction:row;
    padding:16px;
    min-height: 128px;
    overflow: hidden;
}

.banner {
    margin:0px 16px;
    padding:0px;
    //border: 1px dotted gray;
    width: 100%;
    top: 10px;
    overflow: hidden;
    
}

/*................................................................*/

/* FOOTER STUFF */

/*................................................................*/
footer {
    display:flex;
    flex-direction:row;
    padding:16px;
    }
.footer {
    width: 100%;
    //border: 1px dashed gray; 
    padding:16px;
    margin:0px 16px;
}


/*................................................................*/

/* SIDEBAR STUFF */

/*................................................................*/
aside {
    
    max-width: 150px;
    min-width: 150px;
    padding:8px;
}
.aside-left {
    max-width: 150px;
    min-width: 150px;
    padding-left: 10px;
    overflow: visible;

}














/*................................................................*/

/* NAVIGATION STUFF */

/*................................................................*/
nav{
    margin-top:8px
}
nav a{
    display:inline-block;
    margin-right:8px}

.aside-nav {
    padding: 5px 0px 5px 10px;
    max-width: 150px;
    min-width: 150px;
    padding-left: 10px;
    overflow: visible;
}
 .aside-top{
    overflow: auto;
    max-height: 155px;
}

details {
  text-align: left;
}
details[open]>summary::marker {
  content: url('images/heart_marker.png');
}

details>summary::marker {
  content: url('images/broken_heart_marker.png');
}
details[open]>summary{
  font-weight: 700;
}


li > * {
    vertical-align: text-top;
    text-align: left;
}


ul li::marker {
  content: url('images/plain_marker.png');
} 
ul {
  list-style-position: outside;
  text-align: left;
  padding-left: 8px;
  margin: 0px;
}

nav ul {
  list-style-position: inside;
  margin: 5px 0px;
  padding: 0px;
}

details ul {
    padding-left: 16px;
}
ul details {
  padding-left: 0px;


}
li .active{
        font-weight:700;
    }
/*................................................................*/

/* DROP DOWN MENU STUFF */

/*................................................................*/

.menu {
  display: flex;
  flex-direction: column;
  overflow: visible;
background-color: black;
text-align: left;
width: 100%;


}

.dropbutton {
  background-color: black;

  text-align: left;
  
  font-weight: bold;
}
.dropdown:hover .dropbutton {cursor:crosshair;}

.dropdown {
  position: relative;
  margin: 1px;
  padding: 0px 5px 0px 5px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  z-index: 1;
  text-align: left;
  border: white solid 1px;
  left: 100%;
  top: -4px;
  padding: 2px 2px 6px 2px;
}
.dropdown:hover .dropdown-content {display: block;}

.dropdown-content a {
  padding-left: 5px;
  width: 175px;
  margin: 2px;
  
  display: block;
  
}

.dropdown-content a:hover {cursor:crosshair;}

/* double drop stuff */

.drop-dropbutton {
  background-color: black;
  padding-left: 0px;
  text-align: left;
}
.drop-dropdown:hover .drop-dropbutton {cursor:crosshair;}

.dropdown-dropdown {
  position: relative;
  margin: 1px;
  padding: 0px 0px 0px 5px;
}

.dropdown-dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  z-index: 1;
  text-align: left;
  border: white solid 1px;
  left: 100%;
  top: -4px;
  padding: 2px 2px 6px 2px;
  margin: 3px
}
.dropdown-dropdown:hover .dropdown-dropdown-content {display: block;}

.dropdown-dropdown-content a {
  padding-left: 5px;
  width: 175px;
  margin: 2px;
  
  display: block;
}

.dropdown-dropdown-content a:hover {cursor:crosshair;}
/*
.dropdown-dropdown {
  position: relative;
  margin: 1px;
  padding: 0px 5px 0px 5px;
}
 .dropdown-dropdown:hover .dropdown-dropdown-content {display: block;}

.dropdown-dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  z-index: 1;
  text-align: left;
  border: gray dashed 1px;
  left: 100%;
  top: -4px;
  padding: 2px 2px 6px 2px;
}

.dropdown-dropdown-content a {
  padding-left: 5px;
  width: 175px;
  margin: 2px;
  
  display: block;
} */

.dropdown-indicator{
  text-align: right;
  float: right;
  margin: 0px 5px;
  }
/*................................................................*/

/* OTHER STUFF */

/*................................................................*/
noscript {
  background-color: black;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 5;
  position: fixed;
  left: 0px;
  top: 0px;
  padding: 20px;
  font-size: 32px;
}

label {
  color: #f52222;
  font-weight: bold;
  text-align: left;

}

textarea{
  border: white solid 1px;
  color: white;
  background-color: black;
}
      
hr {height:16px;
border-width:0;
color:red;
border-radius: 5px;
background-image: url('images/blood.gif');
background-repeat: repeat-x;
margin: 10px auto;
width: 75%;
text-align: center;}

guide {
    width: 1024px;
    height: 768px;
    margin: 0px;
    left: 0px;
    top: 0px;
    position: fixed; 
    border: 1px dashed rgb(0, 34, 255);
    pointer-events: none;

}



blink {animation:blinkingcolors 0.5s linear infinite}
@keyframes blinkingcolors{0%{color:#ff0000}50%{color:#ffffff}100%{color:#ff0000}}