:root {
  --text-color: #ffffff;
  --bg-color: #000000;
  --link-color: #5595fa;
  --border-color: rgba(255, 255, 255, 0.1);
  --hover-shadow: 0 0 8px rgba(255, 255, 255, 0.1), 0 0 12px rgba(255, 255, 255, 0.3);
}

/* Base Styles */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  font-size: 15px;
  overflow: auto;
}

/* Grain Effect */
body::after {
  content: '';
  position: fixed;
  inset: -100% -50%;
  width: 300%;
  height: 300%;
  background-image: url('/media/grain.png');
  opacity: 0.05;
  animation: grain 10s steps(10) infinite;
  pointer-events: none;
  z-index: 9999;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0%); }
  70% { transform: translate(0%, 15%); }
  80% { transform: translate(3%, 25%); }
  90% { transform: translate(-10%, 10%); }
}

/* Typography & Links */
a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover, button:hover {
  text-shadow: var(--hover-shadow);
}


/* Layout */
.content {
  max-width: 1100px;
  width: 90%;
  margin: 0 auto;
  padding: 3rem 1.25rem;
  position: relative;
  z-index: 1;
  top: 40px;
}
.profile-image {
  width: 90px;
  height: 90px;
  border-radius: 5%;
  position: relative;
  top: 20px;
}


/* Background Elements */
.background {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.background-video,
.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(25%);
  mask-image: radial-gradient(circle at right, var(--bg-color) 0%, transparent 88%);
}

/* Controls */
.audio-control,
.video-control,
.home-button,
.theme-switch,
.initial-play-button {
  font-family: inherit;
  cursor: pointer;
  background-color: transparent;
  color: var(--text-color);
  border: none;
}

/* Navigation */
.nav-container {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
  display: flex;
  gap: 20px;
  align-items: center;
}

/* Projects Grid */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.project-card {
  border: 1px solid var(--border-color);
  padding: 1.5rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  transition: transform 0.2s ease;
}

.project-card:hover {
  transform: translateY(-5px);
}

/* Light Theme */
body.light-theme {
  --text-color: #000000;
  --bg-color: #e4e1e1;
  --link-color: #0066cc;
}

body.light-theme::after {
  opacity: 0.02;
}

body.light-theme .project-card {
  background: rgba(255, 255, 255, 0.3);
}

/* ASCII Credit Section */
.ascii-credit {
  margin-top: 2rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.8rem;
}

.ascii-credit h2 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.ascii-credit p {
  margin: 0;
}

/* Media Queries */
.initial-play-button {
  display: none;
}

@media (max-width: 768px) {
  .background-video,
  .background-image {
    transform: translateX(0);
    mask-image: radial-gradient(circle at right, var(--bg-color) 0%, transparent 78%);
  }
}