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


/* alot of this was taken from smoketopus' website, you should check it out! smoketopus.neocities.org */

:root {
 
  --font-family: PixelatedMSSansSerif;
  --font-size: 14px;
  --line-height: 1.3em;
  --font-color: #4e082b;
  --link-color: yellow;
  --link-text-decoration: none;
  /* main content (between sidebars) */
  --content-padding: 10px;
  --content-bg-color: #ffc9db;
  /* header */
  --header-font: PixelatedMSSansSerif;
  --header-height: 150px;
  --header-background: url("/graphics/banner.png"); 
  --header-margin-bottom: 0px;
  /* sidebar */
  --sidebar-margin: 10px;
  --sidebar-width: 150px;
  --sidebar-padding: 15px;
  --sidebar-bg-color: lightblue;
  /* navbar */
  --navitems-alignment: center;
  --space-between-navitems: 20px;
  --navbar-margin-bottom: 10px;
  --nav-bg-color: darkBlue;
  --nav-text-size: medium;
  /* container */
  --container-width: 1000px;
  --container-bg-color: darkblue;
  /* controls the gap between the content and the footer */
  --row-gap: 5px;
  /* To add scrollbars to your sidebars, just make the height a px value and change overflow to 'auto' */
  --sidebar-height: 100%;
  --sidebar-overflow: hidden;
  --background-color: lightblue;
}


* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  scrollbar-color: #ff4d94 #ffcce0;
  scrollbar-width: thin;
}

.flex {
  display: flex;
  margin-bottom: var(--row-gap);
}

.content-wrap {
  margin-top: var(--content-margin-top);
}



main {
  max-width: var(--container-width);
  margin: 0 auto;
  border-radius: 15px;
}



body.stars {
 background:  url("backgrounds/stars.gif");
 position: relative;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  color: white;
}
body.stars::before {
  content: "";
  position: fixed;
  top: -100%;
  left: -100%;
  width: 400%;   
  height: 400%;
  background: url("backgrounds/stars.gif") repeat;
  background-size: auto;
  transform-origin: center;
  animation: spin 500s linear infinite; /* adjust speed here */
  z-index: -1; /* stays behind page content */
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}




a {
  text-decoration: none;
  
}

img {
  object-fit: contain;
}

.rainbow_text_animated {
  background: linear-gradient(
    to right,
    #6666ff,
    #0099ff,
    #00ff00,
    #ff3399,
    #6666ff
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* <— important! */
  background-clip: text;
  color: transparent;
  animation: rainbow_animation 5s linear infinite;
  font-family: PixelatedMSSansSerif;
  font-weight: bold;
  background-size: 400% 100%;
  text-align: center;
  display: inline-block;
}

@keyframes rainbow_animation {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes rainbow_animation_chill {
  0%, 50%, 100% {
    background-position: 0 0;
    transform: scale(1.25) translate(0, 0) rotate(0deg);
  }
  25% {
    background-position: 100% 0;
    transform: scale(.75) translate(5px, 5px) rotate(5deg);
  }
  75% {
    background-position: 100% 0;
    transform: scale(.75) translate(-5px, 5px) rotate(-5deg);
  }
}

html{
  font-family: PixelatedMSSansSerif;
  
}

@font-face {
  font-family: PixelatedMSSansSerif;
  src: url(fonts/ms_sans_serif.woff);
  src: url(fonts/ms_sans_serif.woff2);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: PixelatedMSSansSerif;
  src: url(fonts/ms_sans_serif_bold.woff);
  src: url(fonts/ms_sans_serif_bold.woff2);
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: PerfectDOSVGA437Win;
  src: url(fonts/PerfectDOSVGA437Win.woff2);
  src: url(fonts/PerfectDOSVGA437Win.woff);
  font-weight: normal;
  font-style: normal;
}






header {
  height: var(--header-height);
  margin-bottom: var(--header-margin-bottom);
  border-left-style: outset;
  border-right-style: outset;
  border-top-style: outset;
  border-radius: 15px 15px 0px 0px;
  border-color: #ffffff;
  display: flex;              /* NEW: helps center h1 */
  align-items: center;        /* NEW: vertical center */
  justify-content: center;  
}

nav {
  margin-bottom: var(--row-gap);
}

nav ul {
  margin-left: 0;
  text-align: var(--navitems-alignment);
  margin-top: 0;
  margin-bottom: var(--navbar-margin-bottom);
  padding-top: 1em;
  padding-bottom: 1em;
  background-color: var(--nav-bg-color);
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  border-color: #ffffff;
  border-style: none outset outset;
}

nav li {
  display: inline-block;
  padding-right: var(--space-between-navitems);
  font-family: var(--header-font);
  font-weight: bold;
}


article {
  width: 60%;
  margin-bottom: var(--row-gap);
  background-color: darkblue;
  border: outset #ffffff;
/*border-image: url("graphics/pf024-plate-wa01.gif") 6 round;*/
  border-radius: 15px;
  padding: var(--content-padding);
  padding-top: var(--sidebar-padding);
  flex-grow: 1;
}

article a{
	color: yellow;
}

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

header h1 {
  font-family: var(--header-font);
  font-size: 2em;
  margin: 0;
  position: relative;
  z-index: 1;
}
aside {
  width: 150px;
  margin-right: 10px;
  margin-bottom: 5px;
  height: 100%;
  overflow: hidden;
  background-color:lightblue;
  padding: var(--sidebar-padding);
  border: double #ffffff;
  border-radius: 15px;
  color: var(--font-color);
}

aside li {
  padding: 10px;
  list-style: none;
  
}

aside ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

aside select {
  max-width: 100px;
}