:root {
  --main-color-white: #fafcfd;
  --main-color-black: rgb(18, 20, 26);
  --secondary-color-light-grey: #dbdfed;
  --secondary-color-grey: #a8abb9;
  --bg: #0b0d10;
  --panel: rgba(8, 9, 12, 0.805);
  --panel-solid: #0e1116; /* deep black for inner panel */
  --panel-border: rgba(255, 255, 255, 0.08);
  --text: #e9edf1;
  --muted: rgba(233, 237, 241, 0.65);
  --accent: #34e1b3; /* brand-ish green */
  --radius-lg: 20px;
  --radius-md: 12px;
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);
  --row-h: 38px; /* fixed row height */
  --about-header-panel: rgba(36, 41, 58, 0.497);

  --footer-panel: rgba(8, 9, 12, 0.6);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  background: #000;
}

a,
a:link,
a:visited {
  text-decoration: none;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px); /* start lower */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* end at normal position */
  }
}

#fileInput {
  display: none;
}

.font-base {
  font-family: "IBM Plex Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 400;
}

.white {
  color: var(--main-color-white);
}

.black {
  color: var(--main-color-black);
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: grid;
  align-content: start;
  gap: 3rem;
  place-items: center;
  color: var(--main-color-white);
  text-align: center;
  overflow-y: hidden;
  overflow-x: hidden;
}

/* place this after base.css is loaded */
.navbar-exit { background: transparent; }