@import url("https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Jacquard+12&family=Jacquard+24&display=swap");
:root {
  --clr-bs: black;
  --clr-bg: rgb(55, 1, 89);
  --clr-fg: rgb(216, 223, 230);
  --clr-fd: rgb(182, 189, 195);
  --clr-br: aliceblue;
  --clr-grad1: rgb(55,1,89);
  --clr-grad2: rgb(2,2,80);
  --clr-grad3: rgb(17, 28, 32);
  --grad-op: 70%;
  --clr-card-bg: #0000002d;
  --clr-card-bd: rgba(240, 248, 255, 0.2);
  --clr-card-hv: rgba(240, 248, 255, 0.181);
  --overlay-op: 30%;
  --light-invert: 95%;
}

#light-mode-toggle > span::after {
  content: "dark";
}

.light-mode {
  --clr-bs: white;
  --clr-bg: white;
  --clr-fg: rgb(0, 19, 38);
  --clr-fd: rgb(48, 56, 64);
  --clr-br: black;
  --clr-grad1: rgb(55,1,89);
  --clr-grad2: rgb(2,2,80);
  --clr-grad3: rgb(17, 28, 32);
  --grad-op: 30%;
  --clr-card-bg: #c1c1c12d;
  --clr-card-bd: rgba(240, 248, 255, 0.2);
  --clr-card-hv: rgba(240, 248, 255, 0.435);
  --overlay-op: 80%;
  --light-invert: 0%;
}
.light-mode #light-mode-toggle > span::after {
  content: "light";
}

body {
  margin: 0;
  font-family: "Averia Serif Libre";
  font-weight: 400;
  box-sizing: border-box;
  background: var(--clr-bs);
  color: var(--clr-fg);
  --colour-card-primary: #31052b;
  --colour-card-secondary: #57004f;
}

h2 {
  text-align: center;
  font-family: "Averia Serif Libre";
  margin: 0;
  padding: 0;
  padding-top: 1rem;
}

a {
  text-decoration: none;
  font-weight: bold;
  color: var(--clr-br);
}

.container::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background: var(--clr-bg);
  background: linear-gradient(114deg, var(--clr-grad1) 0%, var(--clr-grad2) 50%, var(--clr-grad3) 100%);
  opacity: var(--grad-op);
}

.container {
  position: relative;
  padding: 2rem;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

#overlay {
  z-index: -1;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  opacity: var(--overlay-op);
  filter: url("/static/images/nnnoise.svg#nnnoise-filter");
}

#light-mode-toggle {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 1.5rem;
  background-color: var(--clr-fg);
  color: var(--clr-bs);
  z-index: 4;
}
#light-mode-toggle:hover {
  background: var(--clr-br);
}

#light-mode-toggle:active {
  scale: 0.95;
}

.leader {
  position: relative;
  padding: 0;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  text-align: center;
}

.goo {
  filter: url("/static/images/goo.svg#goo");
}

.leader-blob {
  align-content: center;
  text-align: center;
  box-sizing: border-box;
  color: var(--clr-bg);
  position: fixed;
  height: 3rem;
  width: 3rem;
  transform: scale(0);
  margin: 0;
  border-radius: 1.5rem;
  translate: -50% -0.5rem;
  left: 50%;
  top: 2rem;
  background: var(--clr-fg);
  transition: transform 0.5s ease, color 0s;
}
.leader-blob:hover {
  background: var(--clr-br);
}

.leader * {
  padding: 0;
  margin: 0;
}

.leader h1 {
  pointer-events: none !important;
  font-weight: 300;
  font-size: 7rem;
  color: var(--clr-br);
  letter-spacing: -0.6rem;
  transition: all 0.5s ease-in, color 0s;
  margin-left: auto;
  margin-right: auto;
}

.leader h2 {
  pointer-events: none;
  font-family: "Jacquard 12";
  font-size: 2rem;
  color: var(--clr-br);
  transition: all 0.3s ease 0.8s, color 0s;
}

.card-wrapper {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 1rem;
  margin-top: 6rem;
  max-width: 100vh;
  margin-left: auto;
  margin-right: auto;
  transition: all 0.5s ease, color 0s;
}

.card {
  position: relative;
  height: 25rem;
  width: 100%;
  z-index: 3;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  transition: all 0.5s ease, color 0s;
}

.card:active::before {
  background: none;
}

.card::before {
  content: "";
  margin-bottom: 0.5rem;
  box-sizing: border-box;
  position: absolute;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  width: 90%;
  height: 90%;
  border-radius: 1rem;
  transition: all 1s ease, color 0s, background 0s;
}

.card:hover::before {
  background: var(--clr-card-hv);
}

.card:hover > .card-content {
  translate: 0 -0.5rem;
}

.card-content {
  background: var(--clr-card-bg);
  border: 2px solid var(--clr-card-bd);
  border-radius: 1rem;
  padding: 1rem;
  -webkit-backdrop-filter: blur(50px);
          backdrop-filter: blur(50px);
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: all 0.5s ease, color 0s, background 0s;
  z-index: 3;
}

.card-content p {
  transition: color 0s;
}

.article-wrapper {
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 4;
  width: 100%;
  height: 100%;
  position: fixed;
  padding: 8rem 2rem 8rem 2rem;
  box-sizing: border-box;
  top: 50%;
  text-align: center;
  translate: -50% -50%;
  left: 50%;
}

.article {
  position: absolute;
  width: min(80%, 80vh);
  height: 100%;
  margin-top: 20vh;
  text-align: justify;
  opacity: 0;
  pointer-events: none;
  font-size: larger;
  transition: all 0.5s ease 1s, color 0s;
}

button {
  display: inline-block;
  border: none;
  padding: 0;
  margin: 0;
  text-decoration: none;
  background: none;
  color: var(--clr-text);
  font-family: inherit;
  font-size: 100%;
  cursor: pointer;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
button[aria-disabled=true] {
  cursor: default;
  pointer-events: none;
}

.card h2 {
  color: var(--clr-br);
}

.card p {
  text-align: justify;
  margin-top: 2rem;
}

form h3 {
  margin-top: 4vh;
  margin-bottom: 1vh;
}

.form-radio {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  overflow: hidden;
  border-radius: 0.5rem;
  border: 2px solid var(--clr-card-bd);
  box-sizing: border-box;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  background-color: var(--clr-card-bg);
}
.form-radio .button {
  min-width: 20%;
  flex-grow: 1;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0.5rem;
}

.radio-button {
  position: fixed;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
.radio-button + label {
  text-transform: none;
}
.radio-button:checked + label {
  background: var(--clr-fg);
  color: var(--clr-bg);
}
.radio-button:checked + label:hover {
  background: var(--clr-br);
}

.flex-centre {
  height: -moz-fit-content;
  height: fit-content;
  padding: 1rem;
  margin-bottom: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  bottom: 0;
  left: 50%;
  translate: -50% -50%;
}
.flex-centre button {
  border: 2px solid var(--clr-card-bd);
  box-sizing: border-box;
  border-radius: 0.5rem;
}
.flex-centre span {
  padding-top: 1vh;
}

.corner-brackets {
  --b: 2px; /* thickness of the border */
  --c: var(--clr-fg); /* color of the border */
  --w: 20px; /* width of border */
  border: var(--b) solid rgba(0, 0, 0, 0); /* space for the border */
  --_g: #0000 90deg,var(--c) 0;
  --_p: var(--w) var(--w) border-box no-repeat;
  background: conic-gradient(from 90deg at top var(--b) left var(--b), var(--_g)) 0 0/var(--_p), conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g)) 100% 0/var(--_p), conic-gradient(from 0deg at bottom var(--b) left var(--b), var(--_g)) 0 100%/var(--_p), conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--_g)) 100% 100%/var(--_p);
}

.pilot-bio-header {
  display: flex;
  flex-direction: row;
  text-anchor: start;
}
.pilot-bio-header img {
  width: 2rem;
  height: 2rem;
  translate: 0 0.3rem;
  filter: invert(var(--light-invert));
}
.pilot-bio-header h1 {
  margin-inline: 1rem;
  text-wrap: nowrap;
}
.pilot-bio-header h3 {
  flex: 1 1 auto;
  translate: 0 0.95rem;
  padding-right: 3rem;
}
.pilot-bio-header * {
  margin: 0;
}

.hash-box {
  text-transform: uppercase;
  word-break: break-all;
  text-wrap: wrap;
  flex: 0 1 20%;
  overflow: hidden;
  height: 3rem;
}

.faded {
  color: var(--clr-fd);
}

#bio-div {
  margin-top: 4vw;
  padding: 1rem;
  border-radius: 0.2rem;
}
#bio-div h2 {
  margin: 0;
  padding: 0;
  padding-block: 2vw;
}

.unique-separator {
  width: 10%;
  background: linear-gradient(var(--clr-card-bd), var(--clr-card-bd)) no-repeat center/2px 100%;
}

.button {
  box-sizing: border-box;
  background: transparent;
  padding: 1vh 1.2rem;
  margin: 0rem;
  font-size: smaller;
  cursor: pointer;
  text-align: center;
}
.button.big {
  padding: 2vh;
  background-color: var(--clr-card-bg);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.button:active {
  transform: scale(0.98);
  background: var(--clr-fg);
  color: var(--clr-bg) !important;
}
.button:hover {
  color: var(--clr-br);
}

@media (min-width: 701px) {
  .card-wrapper {
    flex-direction: row;
  }
}
@media (max-width: 700px) {
  .phone-small {
    font-size: small !important;
  }
  .card-wrapper {
    flex-direction: column;
  }
  .leader h1 {
    font-size: 6rem;
    letter-spacing: -0.5rem;
  }
  .card {
    height: 15rem;
  }
  .card-content > * {
    padding: 0;
    margin: 0;
  }
  .card p {
    margin-top: 1rem;
  }
  .flex-centre {
    margin-bottom: 1rem;
  }
  .pilot-bio-header img {
    display: none;
  }
  .pilot-bio-header h1 {
    font-size: 1.5rem;
    margin-inline: 0;
    margin-right: 0.3rem;
  }
  .pilot-bio-header h3 {
    font-size: 1rem;
    translate: 0 0.5rem;
    padding-right: 0;
    text-align: right;
  }
  .pilot-bio-header .hash-box {
    display: none;
  }
  form h3 {
    margin-top: 1rem;
  }
}
#about-article {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

@media (max-height: 700px) {
  .flex-centre {
    translate: -50% 0%;
  }
}/*# sourceMappingURL=main.css.map */