/* 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: 10px;
  --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;
  
  color: white;
  overflow-x: hidden; /* stop sideways scrollbars */
  overflow-y: auto;
}
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;
  color: yellow;
  
}



a:active {
  color: white;
}


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 2s linear infinite;
  animation: rainbow_animation_chill 7s ease-in-out infinite;
  font-family: PixelatedMSSansSerif;
  font-weight: bold;
  background-size: 400% 100%;
  text-align: center;
  display: inline-block;
}
.fucked {
  display: block; /* Ensure it's visible */
  opacity: 1; /* Ensure it's not transparent */
}

.fucked:hover {
  animation: spin 1000s linear infinite; /* Make animation faster for testing */
}


@keyframes rainbow_animation {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 50% 0%; }
}
@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;
}







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;
  margin-right: 0;
  text-align: var(--navitems-alignment);
  margin-top: 0;
  margin-bottom: var(--navbar-margin-bottom);
  padding-top: .2em;
  padding-bottom: .2em;
  background-color: var(--nav-bg-color);
  border-radius: 15px;
  border-color: #ffffff;
  border-style: outset outset outset outset;
  padding-left: 1em;
   padding-right: 0;
  list-style: none;
}

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



.dropdown {
  position: relative;
}

/* Style the dropdown button */
.dropbtn {  
  border: none;
  cursor: pointer;
}

/* Dropdown content */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: lightblue;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 20;
}

/* Links inside dropdown content */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #f1f1f1
}

/* Show the dropdown content on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change background color of dropdown button on hover */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}


@media (max-width: 768px) {
  
       /* inherit navbar background */
  }

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;
   position: relative; 
   height: fit-content; /* This makes the article only as tall as its content */
  min-height: fit-content;
 
  
}

article a{
	color: yellow;
}

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

header h1 {
  font-family: var(--header-font);
  font-size: 3em;
  margin: 0;
  position: relative;
  z-index: 1;
}
aside {
  width: 150px;
  margin-right: 10px;
  margin-bottom: 5px;
  height: 100%;
  overflow: hidden; 
  background-image: url("backgrounds/fire.gif");
  background-size: cover;
  padding: var(--sidebar-padding);
  border: outset #ffffff;
  border-radius: 15px;
  color: black;
}

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

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

aside select {
  max-width: 100px;
}

.asides {
  display: flex;
  flex-direction: column; /* stack asides */
  gap: 10px;              /* space between them */
}

footer {
  max-width: var(--container-width);
  margin: 5px auto 5px auto;
  
  color: white;
  text-align: center;
  padding: 10px;
  width: 100%;
  
  
 
}