/* 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: linear-gradient(180deg, #47a03f 0%, #3b752b 100%);
  color: white;
  font-family: Verdana, Geneva, sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

html {
  scroll-behavior: auto;
}

.frame {
  display: flex;
  width: 100%;
  max-width: 1400px;
}

.side-stars {
  width: 180px;
  background-image: url("/greenstars.gif");
  background-size: cover;
  background-repeat: repeat-y;
}

a {
  text-decoration: none;
  background-color: transparent;
  transition: all 0.2s ease;
}

a:link { color: #ffd700; }
a:visited { color: #ff8ad6; }
a:hover {
  color: white;
  text-shadow: 0 0 8px #fff, 0 0 15px #84fc9a;
}
a:active { color: orange; text-decoration: underline; }

.container {
  max-width: 800px;
  margin: 100px auto;
  padding: 40px;
  flex: 1;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);

  box-shadow:
    0 8px 32px rgba(0,0,0,0.3),
    0 0 60px rgba(88, 247, 85, 0.4);
}

.album-buttons {
  margin: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.blink {
  display: inline-block;
  padding: 12px 20px;
  font-weight: bold;
  letter-spacing: 2px;
  text-decoration: none;
  border-radius: 8px;
  animation: blinkAnim 1s infinite alternate;
  text-align: center;
}

/* Yellow side */
.yellow {
  background: linear-gradient(90deg, gold, orange, gold);
  color: black;
  box-shadow: 0 0 15px gold;
}

/* Blue side */
.blue {
  background: linear-gradient(90deg, #00e5ff, #0066ff, #00e5ff);
  color: white;
  box-shadow: 0 0 15px #00e5ff;
}

/* Blink effect */
@keyframes blinkAnim {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

@keyframes jitter {
  0% { transform: translateX(0); }
  50% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

.album-blinkies img {
  margin: 25px 0;
  transition: transform 0.1s ease;
}

.album-blinkies img:hover {
  transform: scale(1.05);
}

h1 {
  font-size: 2.5em;
  margin-bottom: 20px;
   letter-spacing: 4px;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #8afc84,
    0 0 20px #55f758;
}

h2 {
  font-weight: normal;
  margin-bottom: 40px;
  opacity: 0.9;
  text-shadow: 0 0 6px rgba(255,255,255,0.5);
}

.tagline {
  font-size: 1.1em;
  margin-bottom: 10px;
}

.fracture {
  font-style: italic;
  opacity: 0.8;
  margin-bottom: 30px;
}

iframe {
  margin: 20px 0;
  box-shadow: 0 0 15px rgba(0,0,0,0.4);
  border-radius: 8px;
  overflow: hidden;
}

p {
  max-width: 650px;
  margin: 12px auto;
}

.language-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-top: 80px;
  padding: 30px;
  border-radius: 15px;
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
}

.language-select img {
  transition: transform 0.2s ease, filter 0.2s ease;
}

.language-select img:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.8),
    transparent
  );
  margin: 40px auto;
  width: 60%;
}

.right-nav {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  padding: 15px 10px;
  border-radius: 12px;
  position: fixed;
  right: 40px;
  top: 150px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  font-family: Tahoma, Verdana, sans-serif;
}

.right-nav a {
  background: linear-gradient(#8bb3c0, #5e8fa1);
  padding: 12px 18px;
  width: 140px;
  border: 2px solid white;
  text-decoration: none;
  color: white;
  font-size: 14px;
  text-align: center;
  transition: all 0.2s ease;
}

.right-nav a:hover {
  transform: translateX(-4px);
  box-shadow: 0 0 10px rgba(255,255,255,0.4);
}

.clock-container {
  position: absolute;
  top: 15px;
  left: 20px;
  font-family: 'Segoe UI', sans-serif;
}

.clock-block {
  margin-bottom: 15px;
}

.clock-time {
  font-size: 28px;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(0, 255, 0, 0.4); /* change color per persona */
}

.clock-label {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: lowercase;
  opacity: 0.8;
}

.persona-purple .clock-time {
  text-shadow: 0 0 8px rgba(180, 100, 255, 0.5);
}

.persona-green .clock-time {
  text-shadow: 0 0 8px rgba(0, 255, 120, 0.5);
}

body::before {
  content: "";
  position: fixed;
  width: 600px;
  height: 600px;
  top: -200px;
  left: -200px;
  background: radial-gradient(circle, #86fc84, transparent 70%);
  filter: blur(120px);
  z-index: -1;
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,0.5), transparent);
  animation: sparkle 6s linear infinite;
  opacity: 0.6;
}

@keyframes sparkle {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-20px); }
}