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



        /* layout basics: bg imgaes, font, margin... etc. */
        
              
#container {
  max-width: 1000px;
  margin: 0 auto;
}

#container a {
  color: #e996e8;
  font-weight: bold;
}

#container a:hover {
  color: #D3BE9E;
  text-decoration: none;
}

#header {
  width: 100%;
  background-color: #062818;
  height: 210px;
  background-image: url("/assets/islandbg.gif");
  background-size: 100%;
}

#flex {
  display: flex;
}

/* this is the color of the main content area,
    between the sidebars! */
main {
  background-color: #252525;
  flex: 1;
  padding: 15px;
  order: 2;
}

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

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


/* CSS for extras */

#topBar {
  width: 100%;
  height: 30px;
  padding: 10px;
  font-size: smaller;
  background-color: #13092D;
}



        /* 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: Akatab;
  src: url('/fonts/akatab-regular.woff2');
}

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

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

.image-with-text {
  display: flex;
  align-items: center;
}

.image-with-text img {
  margin-right: 10px; /* adjust as needed */
  margin-left: 20px;
}


      /* these style text */

h1 {
  color: #D3BE9E;
  font-size: 25px;
  text-align: center;
  font-family: 'Industrial Faith', 'Nunito', 'Courier New';
  padding: 8px;
}

h2,
h3,
h4,
h5
  {
  color: #D3BE9E;
  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: #0c492d;
  border-radius: 5px;
}

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

      /* These add a border to stuff */

.solid {
  border-style: solid;
  border-radius: 10px;
  border-color: #d8bfd8;
  
}
  
.double {
  border-style: outset;
  border-width: 2px;
  border-radius: 8px;
  border-color: #D3BE9E;
}

.flowerborder {
  border: 30px solid transparent;
  border-image: url('/assets//border-by-dollarchive.png') 30 30 round;
  padding: 15px;
}



      /* These add a box around stuff */

.box {
  background-color: #031710;
  border: 1px solid #9cab65;
  padding: 10px;
}


      /* This is margin stuff */

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

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