/* === Reset & Base === */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Lora', serif;
  background: #fff;
  color: #333;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* === Fonts === */
@font-face {
  font-family: 'Allenoire';
  src: url('fonts/allenoire/allenoire-regular-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* === Section Layout & Fade-In === */
html, body {
  scroll-snap-type: y mandatory;
}

section, footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  scroll-snap-align: start;
}

/* hide & slide sections by default */
section {
  min-height: 100vh;
  padding: 2rem 1rem;
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* reveal when JS adds .visible */
section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* === Social Icons === */
#socials a {
  color: #333;
  transition: color 0.3s ease;
}
#socials a:hover {
  color: #0077b5;  /* adjust per brand if you like */
}

/* === Hero / Pinned Header === */
#hero {
  position: relative;
  width: 100%;
  text-align: center;
  font-family: 'Allenoire', serif;
  z-index: 5;

  /* allow smooth fade/slide */
  transition: background 0.5s ease, padding 0.5s ease;
}

#hero .logo {
  font-size: 3rem;
  transition: all 0.5s ease;
}

#hero .tagline {
  margin-top: 0.5rem;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

/* arrow cue */
.scroll-down {
  position: absolute;
  bottom: 2rem;
  font-size: 2rem;
  animation: bounce 2s infinite;
  color: #666;
  transition: opacity 0.3s ease;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(0.5rem); }
}

/* when scrolled past heroHeight */
#hero.fixed {
  position: fixed;
  top: 0; left: 0; right: 0;

  /* collapse it down */
  min-height: auto;        /* reset the 100vh from your section rule */
  padding: 0.5rem 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,1),
    rgba(255,255,255,0)
  );
}

#hero.fixed .logo {
  font-size: 1.25rem;
  color: #666;
}

#hero.fixed .tagline,
#hero.fixed .scroll-down {
  opacity: 0;
}

/* === Tiles === */
#tiles {
  display: flex;
  gap: 1rem;
}

.tile {
  width: 4rem;
  height: 4rem;
  border: 2px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  cursor: pointer;
  transition: transform 0.3s;
}

.tile:hover {
  transform: scale(1.1);
}

/* === About & Résumé Headings === */
#about h2,
#resume h2 {
  font-family: 'Allenoire', serif;
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* Résumé list styling */
#resume ul {
  list-style: none;
  margin-top: 1rem;
}
#resume li {
  margin: 0.5rem 0;
}

/* === Skills & Certs & Eduction === */
#skills ul,
#certs ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#skills li,
#certs li {
  text-align: center;
  margin: 0.5rem 0;
}

#education ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#education li {
  text-align: center;
  margin: 0.5rem 0;
}

/* === Footer & Link Reset === */
footer {
  padding: 2rem 1rem;
}

footer .social a {
  margin: 0 0.5rem;
  color: #333;
  text-decoration: none;
  font-weight: 700;
}

/* removes the blue underline on your footer credit */
.no-link-style {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* === Mobile-First Media Query === */
@media (min-width: 600px) {
  /* tweak font-sizes, tile dimensions, etc. here */
}