@import url('modules/lib.reset.css');

@font-face {
  font-family: 'Helvetica Now Display';
  src: url('../fonts/helvetica-now-display.otf') format('opentype');
  font-display: swap;
}

/* Animated gradient background */
@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body {
  background: linear-gradient(270deg, #d5ff9a, #b6e2ff, #fad0c4);
  background-size: 600% 600%;
  animation: gradient 30s ease infinite;
  font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin: 0;
  padding: 0;
  color: black;
}

a { color: black; text-decoration: none; }
a:hover { color: black; }
a:active { color: black; }
a:visited { color: black; }

/* Layout */

main {
  padding-top: 60px;
}

#container {
  max-width: 2560px;
  margin-left: auto;
  margin-right: auto;
}

section {
  padding: 20px;
  margin: 20px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

/* Typography */

h1 {
  line-height: 140%;
  font-size: 6vw;
}

@media (min-width: 2560px) {
  h1 { font-size: 180px; }
}

@media (min-width: 1920px) and (max-width: 2559px) {
  h1 { font-size: 7vw; }
}

@media (min-width: 1440px) and (max-width: 1919px) {
  h1 { font-size: 6.5vw; }
}

@media (max-width: 959px) {
  h1 { font-size: 6.5vw; }
}

h2 {
  cursor: pointer;
  font-size: 1.5em;
  padding-left: 20px;
}

h2:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

h3 {
  font-size: 1.2em;
  padding-left: 200px;
}

.content a,
.content p {
  font-size: 1.2em;
  padding-left: 400px;
  display: block;
}

.bio p {
  padding-left: 200px;
}

/* Collapsible sections */

.content {
  display: none;
  overflow: hidden;
}

.content.visible {
  display: block;
}

.timeline .entry {
  margin-bottom: 0.25em;
}

/* Responsive */

@media (max-width: 768px) {
  h2 {
    font-size: 1.4em;
    padding-left: 10px;
  }
  h3 {
    font-size: 1em;
    padding-left: 50px;
  }
  .content a,
  .content p {
    font-size: 0.9em;
    padding-left: 100px;
  }
  .bio p {
    padding-left: 50px;
  }
  section {
    margin: 10px;
    padding: 10px;
  }
}

@media (max-width: 480px) {
  h2 {
    font-size: 1.2em;
    padding-left: 5px;
  }
  h3 {
    font-size: 0.9em;
    padding-left: 10px;
  }
  .content a,
  .content p {
    font-size: 0.85em;
    padding-left: 50px;
  }
  .bio p {
    padding-left: 10px;
  }
  section {
    margin: 5px;
    padding: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
  }
}