/* 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." */

        /* variables so that changing colours and the like doesn't feel as insane */

:root {
  --bg-color: #090909;
  --headers-color: #B61D1D;
  --link-color: #D3BE9E;
  --link-hover-color: #7C1414;
  --border-color: #343434;
}


        /* layout basics: bg imgaes, font, margin... etc. */

#flex {
  display: flex;
}

#container {
  max-width: 1150px;
  margin: 0 auto;
}

/* the area below is for all links on your page
    EXCEPT for the navigation */
#container a {
  color: var(--link-color);
  font-weight: bold;
}

#container a:hover {
  color: var(--link-hover-color);
}

/* this is the color of the main content area,
    between the sidebars! */
main {
  background-color: #090909;
  flex: 1;
  padding: 15px;
  margin-top: 30px;
  margin-bottom: 30px;
}

body {
  background-image: url("/assets/backgrid.gif");
  font-family: 'Akatab', 'Nunito', sans-serif;
  margin: 0;
  background-color: #000;
  background-size: auto;
  color: #ffffff;
}

footer {
  background-color: #090909;
  width: 100%;
  height: 40px;
  padding: 10px;
  text-align: center;
  margin-top: 10px;
}



        /* if you have the URL of a font, you can set it below */
      /* feel free to delete this if it's not your vibe */

      /* this seems like a lot for just one font and I would have to agree 
    but I wanted to include an example of how to include a custom font.
    If you download a font file you can upload it onto your Neocities
    and then link it! Many fonts have separate files for each style
    (bold, italic, etc. T_T) which is why there are so many!
    
      */

@font-face {
  font-family: Industrial Faith;
  src: url('/fonts/industrialfaith.ttf');
}

@font-face {
  font-family: Nunito;
  src: url('fonts/Nunito-Regular.ttf');
  
}

@font-face {
  font-family: Nunito;
  src: url('fonts/Nunito-Bold.ttf');
  font-weight: bold;
}

@font-face {
  font-family: Nunito;
  src: url('fonts/Nunito-Italic.ttf');
  font-style: italic;
}

@font-face {
  font-family: Nunito;
  src: url('fonts/Nunito-BoldItalic.ttf');
  font-style: italic;
  font-weight: bold;
}

* {
  box-sizing: border-box;
}

        /* these align stuff */
  
.aligncenter {
    text-align: center;
}

.left-align {
    text-align: left;
        }

.right-align {
    text-align: right;
}

      /* these style text */

h1 {
  color: var(--headers-color);
  text-shadow: 2px 2px black;
  font-size: 25px;
  text-align: center;
  font-family: 'Industrial Faith', 'Nunito', 'Courier New';
  padding: 8px;
}

h2,
h3,
h4,
h5
  {
  color: var(--headers-color);
  text-shadow: 2px 2px black;
  text-align: center;
  font-family: 'Industrial Faith', 'Nunito', 'Courier New';
  padding: 8px;
}

p {
  color: #e6e6fa;
  text-align: center;
  padding: 4px;
}

em {
  color: #D3BE9E;
}

details {
  padding: 5px;
  background-color: #252525;
  border-radius: 5px;
}

summary {
  list-style-position: outside;
  margin-left: 25px;
  padding: 5px 5px 5px 5px;
  border-radius: 5px;
  cursor: pointer;
}

summary u {
  color: #8DC455;
}
      /* These add a border to stuff */

.solid {
  border-style: solid;
  border-radius: 10px;
  border-color: #d8bfd8;
  
}
  
.outset {
  border-style: outset;
  border-width: 2px;
  border-radius: 3px;
  border-color: #343434;
}


      /* These add a box around stuff */

.allbox {
  border: 2px outset var(--border-color);
  padding: 15px;
}

      /* This is margin stuff */

.tbmargin {
  margin-top: 30px;
  margin-bottom: 30px;
}

.lrmargin {
  margin-left: 30px;
  margin-right: 30px;
}