/* Bringing back the dead blink tag */
.blink { animation: blinker 1s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }

/* Spinning gifs, CSS-powered so they never 404 */
.spin { animation: spin 2.5s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

body {
  cursor: crosshair;
  background-color: #ffffff;
}

a:hover { cursor: help; }

img.pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Old-school 3D button bevel, like a Windows 95 widget */
.bevel-out {
  border-style: solid;
  border-width: 2px;
  border-color: #fff #808080 #808080 #fff;
}

/* TITAN rover photo, inline with its Projects entry text */
.titan-rover {
  height: 80px;
  vertical-align: middle;
  margin-left: 10px;
}



/* Retro close button */
.spotify-modal-close {
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #000;
}

.spotify-modal-close img {
  display: none;
}

/* Center the × character */
.spotify-modal-close span {
  display: block;
  line-height: 15px;
}

/* Dynamic Windows-style status bar */
.spotify-modal-content::after {
  content: none;
}

.spotify-modal-status {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
  padding: 5px 6px;

  background: #c0c0c0;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;

  color: #222;
  font: bold 10px "Courier New", monospace;
}

/* ==========================================
   MOBILE RESPONSIVENESS
   ========================================== */

/* Safety net: nothing (banners, dividers with no width/height set) gets wider than its container */
html {
  max-width: 100%;
  overflow-x: hidden;
}
img {
  max-width: 100%;
}

/* 90s-style hamburger menu toggle, mobile only */
.mobile-menu-toggle {
  display: none;
  background-color: #c0c0c0;
  cursor: pointer;
  padding: 6px 10px;
  margin: 10px auto;
}

@media (max-width: 700px) {
  .mobile-menu-toggle {
    display: block;
  }

  #sidebar-nav {
    display: none;
  }
  #sidebar-nav.menu-open {
    display: block;
  }

  /* Classic legacy-table fix: stack every table into a single column
     instead of letting fixed-width columns force horizontal scrolling. */
  table {
    width: 100% !important;
  }
  table, tbody, tr, td, th {
    display: block;
  }
  td, th {
    width: 100% !important;
    box-sizing: border-box;
  }
  tr {
    border-bottom: 1px solid #999999;
  }
  tr:last-child {
    border-bottom: 0;
  }

  /* Hackathon Trophy Case / Certifications: these have a label row (Place/
     Event/Project, Certificate/Issued By) that doesn't repeat once every
     cell is stacked into blocks, so the labels end up floating uselessly
     above a flat, unlabeled list. Hide that row and inject its labels into
     each data cell instead, and box each entry so rows stay visually
     grouped. */
  #hackathon-table tr:first-child,
  #certifications-table tr:first-child {
    display: none;
  }

  #hackathon-table tr:not(:first-child),
  #certifications-table tr:not(:first-child) {
    display: block;
    margin-bottom: 10px;
    border: 1px solid #999999;
  }

  #hackathon-table td:nth-child(1)::before {
    content: "Place: ";
  }
  #hackathon-table td:nth-child(2)::before {
    content: "Event: ";
  }
  #hackathon-table td:nth-child(3)::before {
    content: "Project: ";
  }
  #certifications-table td:nth-child(1)::before {
    content: "Certificate: ";
  }
  #certifications-table td:nth-child(2)::before {
    content: "Issued By: ";
  }
  #hackathon-table td::before,
  #certifications-table td::before {
    font-weight: bold;
    color: #000080;
    font-family: "Courier New", monospace;
  }

  /* Widen the percentage-based layout tables to use the narrow screen better */
  table[width="80%"],
  table[width="60%"],
  table[width="50%"] {
    width: 96% !important;
    margin: 0 auto;
  }

  /* The floating download-resume button would otherwise collide with the
     wrapped hero title - put it on the same row as the hamburger instead,
     one on each side. */
  .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 20px;
  }
  .resume-download {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin: 0;
  }
  .mobile-menu-toggle {
    margin: 0;
  }
}

@media (max-width: 480px) {
  /* Shrink the oversized hero name/subtitle so it wraps cleanly instead of overflowing */
  h1 font {
    font-size: 22px;
  }
  h1 img {
    height: 20px;
  }
  h2 font {
    font-size: 15px;
  }
}