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

/*FONTS*/

@font-face {
    font-family: "TitilliumWeb"; 
    src: url("https://cawsmicentity.neocities.org/Fonts/aatr/TitilliumWeb-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "TitilliumWeb";
    src: url("https://cawsmicentity.neocities.org/Fonts/aatr/TitilliumWeb-Bold.ttf") format("truetype");
    font-weight: bold;
}

@font-face {
    font-family: "Geo"; 
    src: url("https://cawsmicentity.neocities.org/Fonts/aatr/Geo-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Geo";
    src: url("https://cawsmicentity.neocities.org/Fonts/aatr/Geo-Italic.ttf") format("truetype");
    font-weight: italic;
}

@font-face {
    font-family: "RobotoMono"; 
    src: url("https://cawsmicentity.neocities.org/Fonts/aatr/RobotoMono-VariableFont_wght.ttf") format("truetype");
}

 :root {
      --bg-image: url('https://cawsmicentity.neocities.org/Projects/AATR_VI/img/Bgtest.png');
    }

body {
  color: white;
  font-family: TitilliumWeb;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  background-color: #303030;
  color: #fceaff;
  background-image: var(--bg-image);
   background-attachment: fixed;
}


h1 {
  font-family: Geo;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* link */
a:link {
  color: #115fc5;
  text-decoration: solid;
}

/* mouse over link */
a:hover {
  color: #71f3ed;
}

/* visited link */
a:visited {
  color: rgb(187, 187, 187);
}

/* selected link */
a:active {
  color: rgb(255, 255, 255);
}


* {
 box-sizing: border-box;
}

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


  #header {
 width: 100%;
 background-color: #00000000;
 height: 80px;
 background-image: var(--header-image);
 background-size: 100%;
}

/* navigation section!! */
  #navbar {
 height: 40px;
 background: #000000;
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 15%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0.68) 85%, rgba(0, 0, 0, 0) 100%);
 /* navbar color */
 width: 100%;
}

 #navbar ul {
 display: flex;
 padding: 0;
 margin: 0;
 list-style-type: none;
 justify-content: space-evenly;
}

#navbar li {
  padding-top: 6px;
 }

/* navigation links*/
#navbar li a {
 color: #f5b664;
 font-weight: 800;
 font-size: 28px;
 text-decoration: none;
 font-family: Geo;
}

/* navigation link when a link is hovered over */
#navbar li a:hover {
 color: #a49cba;
 text-decoration: underline;
}

#flex {
 display: flex;
}

 main {
  flex: 1;
  padding: 60px;
}

footer {
  background: #000000;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.5) 25%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.5) 75%, rgba(0, 0, 0, 0) 90%);
 /* background color for footer */
  width: 100%;
 padding: 10px;
 text-align: center;
}

/* EXTRA CSS STUFF */
#authorNotes {
  background: #000000;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.69) 0%, rgba(122, 122, 122, 0.493) 90%);
  border-image: linear-gradient(180deg, #0000009d 0%, #0000004f 100%) 1;
  border-radius: 5px; /* this doesn't work */
  border-width: 4px;
  border-style: solid;
  margin: auto;
  padding: 30px;
  padding-top: 2px;
  width: 600px;
  max-width: 98%;
}

table {
  width: 60%;
}

.comicNav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 100px 100px;
}
.comicNav img {
  width: 80px;
  max-width: 110%;
  padding-right: 30px;
  image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
  image-rendering: -moz-crisp-edges;          /* Firefox                        */
  image-rendering: -o-crisp-edges;            /* Opera                          */
  image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  image-rendering: pixelated;                 /* Universal support since 2021   */
  image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
  -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
}

/* ALL OF THIS HERE IS FOR SPECIAL
PAGE EFFECTS!!! YOU WANNA GO HERE BRO */
#popup-overlay {
   position: fixed;
  background-color: rgba(0, 0, 0, 0.685);
  width: 300vh;
  height: 90vh;
  top: 0;
  left: 25%;
  z-index: 9998;
  display: block;
  overflow-y: hidden;
  overflow-x: hidden;
	opacity: 0.5;
}

/* BELOW THIS POINT IS MEDIA QUERY */

/* so you wanna change the width of your page? 
by default, the container width is 900px.
in order to keep things responsive, take your new height,
and then subtrack it by 100. use this new number as the 
"max-width" value below
*/

 @media only screen and (max-width: 1180px) {
 #flex {
    flex-wrap: wrap;
  }

 aside {
   width: 100%;
  }


 #navbar ul {
    flex-wrap: wrap;
    }
  }