@font-face {
  font-family: "BIGTITLE";
  src: url("../font/PTSansNarrow-Bold.ttf");
}

@font-face {
  font-family: "TITLE";
  src: url("../font/PTSansNarrow-Regular.ttf");
}

@font-face {
  font-family: "TEXT";
  src: url("../font/PTSans-Regular.ttf");
}

@keyframes rotate {
  to {
    transform: rotate(90deg);
  }
}

@keyframes appear {
  to {
    opacity: 1;
  }
}

@keyframes slide {
  from {
    transform: translateX(-12px);
  }
}

:root {
  --bg-color: #033248;
  --bg-darken: #0007;
  --txt-color: #fff;
  --alt-color: #fd5;
  --nt: #777;
  --na: #06f;
  --nc: #f03;
  --c: #0c2;
  --drop-shadow: 0rem 0.1rem 0.3rem #000;
  --radius: 12px;
  --speed: 300ms;
}

/* https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034 */
.visually-hidden,
.visually-hidden-focusable:not(:focus, :focus-within) {
  border: 0 !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.visually-hidden:not(caption),
.visually-hidden-focusable:not(caption):not(:focus, :focus-within) {
  position: absolute !important;
}

.visually-hidden *,
.visually-hidden-focusable:not(:focus, :focus-within) * {
  overflow: hidden !important;
}

:target {
  scroll-margin-block: 1rem;
}

html {
  font-family: "TEXT", "arial", "sans-serif";
  text-shadow: var(--drop-shadow);
  font-size: 100%;
  scroll-padding-top: 1rem;
}

body {
  background-color: var(--bg-color);
  background-image: linear-gradient(var(--bg-color) 70%, #031136);
  background-attachment: fixed;
  color: var(--txt-color);
  margin: 0;
  padding: 5rem 0 0;
  font-size: 1.4rem;
  font-weight: 200;
  line-height: 1.4;
  letter-spacing: 0.03rem;
  text-align: center;
}

h1 {
  font-family: "BIGTITLE", "arial", "sans-serif";
  position: relative;
  z-index: 1;
  font-size: 5rem;
  line-height: 1.2;
  margin: 0 0 1rem;
  text-wrap: balance;

  @media (max-width: 799px) {
    font-size: 3.2rem;
    line-height: 1.1;
  }
  animation: slide 300ms forwards;
}

h1 span {
  display: inline-block;
  margin-right: -0.42rem;
  color: var(--alt-color);
  animation: slide 200ms forwards;
}