/* IBM VGA 8x16 — int10h.org, CC BY-SA 4.0 by VileR */
@font-face {
  font-family: "IBM VGA 8x16";
  src: url("/assets/fonts/WebPlus_IBM_VGA_8x16.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

* {
  margin: 0;
  padding: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Palette variables */
:root {
  --primary-color: #46b47f;
  --background-color: #161616;
  --text-color: #555555;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: "Trebuchet MS", sans-serif;
  width: calc(100svw - 2em);
  max-width: 1024px;
  margin: 0 auto;
}

a {
  color: var(--primary-color);
}

nav {
  display: flex;
  gap: 1em;
  height: 1em;
  margin-bottom: 1em;
  margin-top: 1em;
}

.main {
}

.centered {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-pic {
  position: relative;
  width: 364px;
  height: 364px;
  background-image: url("/assets/images/brandtabbott.jpg");
  background-repeat: no-repeat;
  background-position: center center; /* Acts like object-position */
  background-size: cover; /* Acts like object-fit: cover */
  border-radius: 50%;
}

/* Boot-sequence "reflection" in the sunglass lenses. The lens boxes and
   clip-paths below trace the green lens shapes in the photo; /home.js
   types the boot text into them. */
.profile-pic .lens {
  /* Nudge the text in BOTH lenses at once: more negative x = left, more
     positive y = down. */
  --screen-shift-x: -15px;
  --screen-shift-y: 10px;
  position: absolute;
  overflow: hidden;
}

.lens-left {
  left: 47.1%;
  top: 20.4%;
  width: 20.2%;
  height: 18.1%;
  clip-path: polygon(
    45.2% 0%,
    11% 10.1%,
    5.8% 20.1%,
    3.9% 30.2%,
    1.9% 40.3%,
    1.3% 50.4%,
    0% 60.4%,
    0.6% 70.5%,
    3.2% 80.6%,
    9.7% 90.6%,
    73.5% 90.6%,
    82.6% 80.6%,
    89% 70.5%,
    93.5% 60.4%,
    96.8% 50.4%,
    99.4% 40.3%,
    99.4% 30.2%,
    96.1% 20.1%,
    84.5% 10.1%,
    47.1% 0%
  );
}

.lens-right {
  left: 76.7%;
  top: 23.7%;
  width: 13%;
  height: 16.4%;
  clip-path: polygon(
    52% 0%,
    10% 10.3%,
    3% 20.6%,
    1% 31%,
    1% 41.3%,
    2% 51.6%,
    4% 61.9%,
    7% 72.2%,
    12% 82.5%,
    19% 92.9%,
    70% 92.9%,
    81% 82.5%,
    86% 72.2%,
    92% 61.9%,
    96% 51.6%,
    99% 41.3%,
    100% 31%,
    100% 20.6%,
    94% 10.3%,
    62% 0%
  );
}

/* Both lenses show slices of ONE shared text screen, so long lines run
   from the right lens into the left. The width/left/top percentages place
   that shared screen inside each lens box, so everything scales with
   .profile-pic. scaleX(-1) mirrors the text: it "faces the wearer", so
   the viewer sees it backward. */
.boot-scroll {
  position: absolute;
  padding: 2px 5px;
  font-family: "IBM VGA 8x16", "Courier New", monospace;
  font-size: 4.75px;
  line-height: 1.5;
  font-weight: bold;
  color: rgba(9, 58, 33, 0.82);
  white-space: pre;
  transform: scaleX(-1) rotate(-4deg);
}

.lens-left .boot-scroll {
  width: 210.9%;
  left: var(--screen-shift-x);
  top: var(--screen-shift-y);
}

.lens-right .boot-scroll {
  width: 327.7%;
  left: calc(-227.7% + var(--screen-shift-x));
  top: calc(-20.1% + var(--screen-shift-y));
}

/* Blinking cursor at the end of whatever home.js has typed so far */
.boot-scroll::after {
  content: "_";
  animation: boot-cursor 1s steps(1) infinite;
}

@keyframes boot-cursor {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .boot-scroll::after {
    animation: none;
  }
}

p {
  margin-top: 1em;
}

.text-center {
  text-align: center;
}