/*
  chill.css: Custom styles for chillday page only.
  The navbar will always use the shared styles from styles.css.
  Use .chillday selectors to override or add styles for this page.
*/

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');

body {
	background-color: black;
    color: white;
}
.text {
    color: white;
}
.topic { font-size: 25px; text-decoration: none; }

/* unvisited link */
a:link {
    color: white;
}

/* visited link */
a:visited {
    color: white;
}

/* mouse over link */
a:hover {
    color: white;
}

/* selected link */
a:active {
    color: white;
}
/* .navbar {
    font-family: 'Pervitina Dex';
    color: white;
    text-align: center;
    position: center;
    font-size: 35px;  
} */

body.chillday {
  /* Example: custom background for chillday */
  /* background: linear-gradient(135deg, #23243a 0%, #1a1a2e 100%); */
}

.container.chillday {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

.chilldiv1 {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

#demo {
  display: flex;
  justify-content: center;
  width: 100%;
}

#demo iframe {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
  height: 500px;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 8px;
}

.chillday-title {
  font-family: 'Dancing Script', cursive;
  font-size: 6rem;
  color: #fff;
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.chillday-subtitle {
  font-family: 'Dancing Script', cursive;
  font-size: 0.75rem;
  color: #fff;
  text-align: center;
  margin-bottom: 1.5rem;
  opacity: 0.7;
}

.chillday-dynamic-title {
  display: block;
  font-size: 0.85rem;
  color: #e0e0e0;
  text-align: center;
  margin-bottom: 0.5rem;
  opacity: 0.6;
  font-family: 'Share Tech Mono', monospace;
  font-weight: normal;
  letter-spacing: 0.02em;
}

.chillday-link-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: center;
  margin: 2rem 0 1rem 0;
}

.chillday-link {
  color: #fff;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 1.1rem;
  font-family: 'Share Tech Mono', monospace;
  text-decoration: underline;
  opacity: 0.7;
  padding: 0.2em 0.6em;
  border-radius: 6px;
  transition: opacity 0.2s, background 0.2s, border 0.2s;
  display: inline-block;
  box-sizing: border-box;
}
.chillday-link:hover, .chillday-link:focus {
  opacity: 1;
  background: rgba(255,255,255,0.10);
  border: 1.5px solid var(--accent, #7fffd4);
  text-decoration: none;
}

/* Add more chillday-specific styles below */

.chillday-bg {
  min-height: 100vh;
  background: linear-gradient(120deg, #0a0b12 0%, #181a22 100%);
  position: relative;
  overflow: hidden;
}
.chillday-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 60%, rgba(10,12,20,0.55) 0%, rgba(0,0,0,0.96) 100%);
  z-index: 0;
  transition: background 0.5s;
}

/* Lightning flash effect (to be toggled by JS) */
.chillday-bg.lightning::before {
  background: radial-gradient(ellipse at 50% 60%, rgba(255,255,255,0.32) 0%, rgba(0,0,0,0.7) 100%);
  transition: background 0.1s;
}

.chillday-mist {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url('data:image/svg+xml;utf8,<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"><filter id="blur"><feGaussianBlur stdDeviation="3"/></filter><ellipse cx="200" cy="100" rx="180" ry="40" fill="white" opacity="0.12" filter="url(%23blur)"/><ellipse cx="100" cy="60" rx="80" ry="20" fill="white" opacity="0.10" filter="url(%23blur)"/><ellipse cx="300" cy="140" rx="90" ry="25" fill="white" opacity="0.09" filter="url(%23blur)"/></svg>') repeat;
  opacity: 0.08;
  z-index: 1;
  animation: mist-move 60s linear infinite;
}
@keyframes mist-move {
  0% { background-position: 0 0; }
  100% { background-position: 200px 100px; }
}

#rain-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.28;
}
.chillday-poem {
  position: fixed;
  left: 0; right: 0; bottom: 2.5vh;
  text-align: center;
  font-family: 'Share Tech Mono', 'Pervitina Dex', cursive, monospace;
  font-size: 1.1rem;
  color: #e0e6f0;
  opacity: 0.7;
  letter-spacing: 0.04em;
  z-index: 10;
  pointer-events: none;
  animation: poem-fade 8s ease-in-out infinite alternate;
}
@keyframes poem-fade {
  0% { opacity: 0.1; }
  20% { opacity: 0.7; }
  80% { opacity: 0.7; }
  100% { opacity: 0.1; }
}