body {
font-family:'Garamond' serif;
margin: 0;
background-color: #08031A;
background-size: 2000px;
color: #CAF200;
background-image: url('https://pygmiweed.neocities.org/IMG_7642.png');
}

body {
  cursor: url('https://pygmiweed.neocities.org/kodama.png') 0 0, auto;
} 



#container {
max-width: 800px;
margin: 0 auto;
background-color: black;

}

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



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

hr{
height: 1px;
background-color: #CAF200;
border: none;
}


.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.box {
background-color: #010101;
border: 1px solid #D900ED;
padding: 10px;
max-width: 900px
  display block;
  
}

h1,
h2,
h3,
h4,
h5 {
color: #C8FA00
}


a:link {
  color: #F527F5;
  background-color: transparent;
  text-decoration: underline;
}

a:visited {
  color: #ff0000;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #E82E00;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: #D900ED;
  background-color: transparent;
  text-decoration: underline;
}


aside {
background-color: #000000;
border: 1px solid #F527F5;
width: 200px;
padding: 20px;
font-size: smaller;
}


main {
max-width: 650px;
border: 1px solid #F527F5;
margin: 0 auto;
background-color: black;

flex: 1;
padding: 20px;
order: 2;

}

#leftSidebar {
order: 1;
}

#rightSidebar {
order: 3;
}

footer {
background-color: #820000;
width: 100%;
height: 15px;
padding: 10px;
text-align: center;
}

.image-container {
  position: relative;
  display: inline-block;
}

.image-container img {
  display: block;
  width: 50%;
  height: auto;
}

.overlay-text {
  position: absolute;
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  background-color: #000000; 
  color: #CAF200; 
  padding: 10px 20px; 
  font-size: 15px; 
  text-align: center;
}


 /* The sidebar menu */
.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 200px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #000000; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
}

/* The navigation menu links */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  font-family:'Garamond'serif;
  color: #E100FF;
  display: block;
}
.sidenav a {
  font-style: italic;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #E82E00;
}

/* Style page content */
.main {
  margin-left: 200px; /* Same as the width of the sidebar */
  padding: 0px 10px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}

/* Container styling to position a custom arrow */
.custom-dropdown {
  position: relative; /* */
  display: inline-block; /* */
  width: 250px;
}

/* Core Select Styling */
.custom-dropdown select {
  width: 100%;
  padding: 12px 40px 12px 16px; /* Extra right padding so text doesn't overlap the arrow */
  font-size: 16px;
  color: #333333;
  background-color: #ffffff;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  
  /* Critical: Removes the default browser arrow */
  appearance: none; 
  -webkit-appearance: none; 
  -moz-appearance: none; 
}

/* Subtle focus state for accessibility */
.custom-dropdown select:focus {
  outline: none;
  border-color: #0066cc;
}

/* Custom Arrow Indicator using a pseudo-element */
.custom-dropdown::after {
  content: "▼";
  font-size: 12px;
  color: #666666;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%); /* Centers the arrow vertically */
  pointer-events: none; /* Allows clicks to pass through to the select menu */
}

/* Basic option styling (Limited browser support for complex option styles) */
.custom-dropdown option {
  padding: 12px;
  background-color: #ffffff;
  color: #333333;
}
}

 }


u{color: #CEED00;}

h1 {text-align: center;}
h2 {text-align: center;}
h4 {text-align: center;}
h3 {text-align: center;}