@font-face {
  font-family: "Scrambles";
  src: url("../fonts/Scrambles-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* Basic reset */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: "Scrambles", sans-serif;
  background-color: #28347d;
  overflow-x: hidden;
}

/* FULL ABOUT PAGE */
.about-page {
  position: relative;
  min-height: 228vh;

  display: flex;
  flex-direction: column;
  overflow-x: hidden;

  background-color: #28347d;
}

/* Full about image background */
.about-page::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image: url("../assets/bg/ABOUT BG.png");
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;

  z-index: 0;
  pointer-events: none;
}

.site-header,
.about-main,
.site-footer {
  position: relative;
  z-index: 1;
}

/* HEADER - matches demo reel */
.site-header {
  width: 100%;
  padding-top: 20px;
}

.main-nav {
  width: min(96%, 1080px);
  margin: 0 auto;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 44px;
}

.main-nav a {
  font-family: "Scrambles", sans-serif;
  color: #48baff;
  text-decoration: none;

  font-size: 1.45rem;
  letter-spacing: 1.5px;
  white-space: nowrap;

  transition:
    color 0.2s ease,
    text-shadow 0.2s ease,
    transform 0.2s ease;
}

.main-nav a:hover {
  color: white;
  text-shadow:
    0 0 6px white,
    0 0 12px white,
    0 0 18px #74ccff;
  transform: scale(1.08);
}
.main-nav a.current-page {
  color: white;
  text-shadow: none;
}

.main-nav a.current-page:hover {
  color: white;
  text-shadow:
    0 0 6px white,
    0 0 12px white,
    0 0 18px #74ccff;
  transform: scale(1.08);
}

/* Center star logo */
.logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.star-logo {
  width: 265px;
  height: auto;
  display: block;

  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

.logo-link:hover .star-logo {
  transform: scale(1.04);
  filter:
    drop-shadow(0 0 2px white)
    drop-shadow(0 0 4px #e041e2);
}

/* MAIN AREA */
.about-main {
  flex: 1;
  position: relative;
  width: 100%;
}

/* RESUME STAR BUTTON */
/* CHANGE SIZE AND POSITION HERE */
.resume-link {
  position: absolute;

  /* move left/right */
  right: 10%;

  /* move up/down */
  top: 1100px;

  /* make bigger/smaller */
  width: 440px;

  display: block;
  z-index: 5;

  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

.resume-button {
  width: 100%;
  height: auto;
  display: block;
}

.resume-link:hover {
  transform: scale(1.08);
  filter:
    drop-shadow(0 0 5px rgba(255, 255, 160, 0.8))
    drop-shadow(0 0 12px rgba(255, 130, 220, 0.45));
}

/* FOOTER - matches demo reel */
.site-footer {
  width: 100%;
  padding: 10px 20px 12px;
}

.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1px;
  flex-wrap: wrap;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.social-links img {
  width: 70px;
  height: auto;
  display: block;
}

/* Tablet sizing */
@media (max-width: 900px) {
  .about-page {
    min-height: 150vh;
  }

  .main-nav {
    gap: 22px;
  }

  .main-nav a {
    font-size: 1.05rem;
    letter-spacing: 1px;
  }

  .star-logo {
    width: 200px;
  }

  .resume-link {
    right: 7%;
    top: 520px;
    width: 260px;
  }
}

/* Phone sizing */
@media (max-width: 650px) {
  .site-header {
    padding-top: 14px;
  }

  .main-nav {
    gap: 11px;
  }

  .main-nav a {
    font-size: 0.72rem;
    letter-spacing: 0.5px;
  }

  .star-logo {
    width: 115px;
  }

  .resume-link {
    right: 5%;
    top: 390px;
    width: 170px;
  }

  .social-links {
    gap: 24px;
  }

  .social-links img {
    width: 36px;
  }
}