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

body {
  background-color: black;
  font-family: Verdana;
  color: white;

}

p {
  font-family: 'VT323', sans-serif;
}

h2{
  -webkit-text-stroke-width: 0.7px; /* Width of the outline */
  -webkit-text-stroke-color: black; /* Color of the outline */ 
}

ul {
  list-style-type: none; 
  padding-left: 0;                 
  padding-right: 0;      
  font-size: 15px;
        }


#top-container {
  z-index: 1;
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  position: relative;
}

#header-container {
    background: transparent;
    padding: 20px;
}

#banner-container{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  
  padding: 20px;
  background-color: #FFD700; 
  border: 1px solid #FFD700; 
  opacity: 0.85;
  margin: 10px;
  width: min(670px, 90vw);
  box-shadow: 0 0 10px #FFD700;
  position: relative;
  z-index: 2;
  height: 60px;
  overflow: hidden;
}

#page-body {
  position:relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 25px; /* space between side boxes and main content */
}

#side-left,
#side-right {
  width: 260px;
  border: 1px solid #444;
  margin-top: 10px;
  margin-bottom: 10px;
}

#side-left img {
  display: block;
  width: 100%;
  height: 100%;
}

#side-right img {
  display: block;
  width: 100%;
  height: 100%;
}

#main-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 768px) {
  #side-left,
  #side-right {
    display: none;
  }
}



#content-container{
    display: flex;
    gap: 15px;
    justify-content: center;
    position: relative;
    z-index: 2;
}

#left-side{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: #222; 
  border: 1px solid #444; 
  padding: 8px 20px 20px 20px;
  margin: 10px; 
  text-align: center; 
  width: min(120px, 40vw);
  color: #FFFFAA; 
}

#neocities {
  padding-top: 5px;
  width: 120px; 
  height: auto; 
}

.sidebar-icon {
  transform: scale(0.75);
}

.guess-book {
  transform: scale(1.55);
}

#main-column h3{
  padding-bottom: 0px;
  margin: 10px;
  font-size: 0.97em;
}

.homepage-lists {
  text-align: left;
}

.homepage-lists li {
  display: flex;
  align-items: center;
  gap: 1px;

  padding: 1px 0;
}


.homepage-lists li img {
  width: 20px;
  height: 20px;

}

.homepage-listst li span {
  line-height: 0.5;
}

#middle{

  background-color: #FFD700; 
  opacity: 0.85;
  border: 1px solid rgba(255, 215, 0, 0.10); 
  padding: 20px; 
  margin: 10px; 
  text-align: center;
  width: min(275px, 90vw);
  height: 600px;
  box-shadow: 0 0 10px #FFD700; /* subtle glow effect like screenshot */
}

#index-info{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

#index-info img{
  width: 130px;
  height: auto;
}

#right-side{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: #222; 
  border: 1px solid #444; 
  padding: 8px 20px 20px 20px;
  margin: 10px; 
  text-align: center; 
  width: min(120px, 40vw);
  color: #FFFFAA; 
}

#right-side img{
  transform: scale(0.70);
}

#footer{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 20px;
  background-color: #FFD700; 
  border: 1px solid #FFD700; 
  opacity: 0.85;
  margin: 10px;
  width: min(670px, 90vw);
  box-shadow: 0 0 10px #FFD700; /* subtle glow effect like screenshot */
  position: relative;
  z-index: 2;
  height: 60px;
  overflow: hidden;
}

@media (max-width: 768px) {
  #content-container {
    flex-direction: column;
    align-items: center;
  }
}

.star {
  --star-color: yellow;
  font-size: 18px;
  position: absolute;
  display: block;
  width: 0;
  height: 0;

  border-right: 1em solid transparent;
  border-bottom: 0.7em solid var(--star-color);
  border-left: 1em solid transparent;

  transform: rotate(35deg);
  margin: 20px auto;
  filter: drop-shadow(0 0 5px #FFD700);
}

.star::before {
  content: "";
  position: absolute;
  top: -0.45em;
  left: -0.65em;

  border-bottom: 0.8em solid var(--star-color);
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;

  transform: rotate(-35deg);
  filter: drop-shadow(0 0 5px #FFD700);
}

.star::after {
  content: "";
  position: absolute;
  top: 0.03em;
  left: -1.05em;

  border-right: 1em solid transparent;
  border-bottom: 0.7em solid var(--star-color);
  border-left: 1em solid transparent;

  transform: rotate(-70deg);
  
  filter: drop-shadow(0 0 5px #FFD700);
}

#star-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

#stars-left,
#stars-right {
  position: absolute;
  top: 0px;
  height: 1000px;
  width: 405px;
}

#stars-left {
  left: 20px;
}

#stars-right {
  right: 20px;
}

@media (max-width: 480px) {
  #star-layer {
    display: none;
  }
}