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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
}

html, body {
  height: 100%;
  background-color: #10013e;
  color: #e8dad7;
  font-family: '04b03regular', monospace;
  font-size: 8px;
  position: relative;
  overflow-x: hidden;
}


#logo {
  text-align: left;  
  padding: 20px 0 20px 20px; 
  background: none; 
  border-bottom: none; 
  box-shadow: none;
}
#logo img {
  max-width: 465px;
  margin: 0; 
  display: inline; 
}

.container {
  display: flex;
  min-height: calc(100vh - 200px);
  gap: 20px;
  padding: 10px;
  border-top: none;
  box-shadow:none;
}

#sidebar {
  width: 220px; 
  position: sticky;
  top: 20px; 
  height: fit-content; 
  font-size: 10px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  
  background-color: rgba(0, 40, 80, 0.5);
  border: 2px solid #efcaa7;
  border-radius: 6px;
  padding: 20px;
  
    box-shadow: 
    0 0 7px #e19bd9,
    0 0 14px #9779d1,
    0 0 28px #5f65b5,
    inset 0 0 20px rgba(239, 202, 167, 0.3);
}

#content {
  flex: 1; /* Takes up remaining space */
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: rgba(0, 40, 80, 0.5);
  border: 2px solid #efcaa7;
  border-radius: 6px;
  padding: 20px;
  
    box-shadow: 
    0 0 7px #e19bd9,
    0 0 14px #9779d1,
    0 0 28px #5f65b5,
    inset 0 0 20px rgba(239, 202, 167, 0.3);
}

/* Content boxes (bio, music, articles, etc) */
.content-box {
  background-color: rgba(0, 40, 80, 0.5);
  border: 2px solid #00d4ff;
  border-radius: 8px;
  padding: 25px;
  
  box-shadow: 
    0 0 10px #00d4ff,
    0 0 20px #00d4ff,
    0 0 40px #00b3cc,
    inset 0 0 20px rgba(0, 100, 150, 0.3);
}

#bio .bio-row {
  display: flex;
  align-items: center; /* Vertical align */
  gap: 24px; /* Space between image and text */
}

#welcome-text {
  text-align: center;
  font-size: 18px;
  margin-bottom: 10px;
}

#pfp img {
  max-width: 120px;
  border-radius: 8px;
  border: 2px solid #00d4ff;
}

.bio-text {
  flex: 1; /* Fill remaining space */
}

@media (max-width: 600px) {
  #bio .bio-row {
    flex-direction: column;
    align-items: flex-start;
  }
  #pfp img {
    margin-bottom: 12px;
  }
}

/* Spinning Rune Decorations */
.rune-decoration {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  opacity: 0.15;
  left: 50%;
  top: 50%;
  transition: opacity 0.3s ease;
}

.rune-decoration img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}

.rune-large {
  width: 400px;
  height: 400px;
  margin-left: 300px;
  margin-top: -250px;
}

.rune-small {
  width: 250px;
  height: 250px;
  margin-left: 375px;
  margin-top: -225px;
}

@keyframes spin-clockwise {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes spin-counterclockwise {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

/* Ensure content is above runes */
#logo, .container, #sidebar, #content {
  position: relative;
  z-index: 1;
}