@font-face {
  font-family: 'Komika';
  src: url(data:application/font-woff2;charset=utf-8;base64,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)
    format('woff2');
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}

:root {
  --db-light-rgb: 255, 250, 240;
  --db-light: rgb(var(--db-light-rgb));
  --db-dark-rgb: 80, 70, 70;
  --db-dark: rgb(var(--db-dark-rgb));
  --db-pink-rgb: 255, 100, 125;
  --db-pink: rgb(var(--db-pink-rgb));
  --db-red-rgb: 210, 55, 80;
  --db-red: rgb(var(--db-red-rgb));
  --db-green-rgb: 150, 230, 200;
  --db-green: rgb(var(--db-green-rgb));
  --db-blue-rgb: 20, 150, 190;
  --db-blue: rgb(var(--db-blue-rgb));
  --db-blue2-rgb: 15, 110, 155;
  --db-blue2: rgb(var(--db-blue2-rgb));
  --db-yellow-rgb: 255, 250, 190;
  --db-yellow: rgb(var(--db-yellow-rgb));
  --db-white-rgb: 255, 255, 255;
  --db-white: rgb(var(--db-white-rgb));
  --db-black-rgb: 55, 50, 50;
  --db-black: rgb(var(--db-black-rgb));
}

body,
html {
  background: var(--db-dark);
  font-family: sans-serif;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.FrameList {
  background: var(--db-blue);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 54px;
  width: 100%;
  z-index: 100;
}

.Frame {
  background: var(--db-dark);
  bottom: 0;
  height: 100%;
  left: 0;
  opacity: 1;
  position: absolute;
  transform: translateZ(0);
  transition: opacity 300ms;
  will-change: opacity;
  width: 100%;
}

.Script .Frame--load {
  visibility: hidden;
  pointer-events: none;
  clip-path: url('#StarClip');
}

.Frame--unload {
  pointer-events: none;
  opacity: 0.5;
}

.Frame iframe {
  background: var(--db-light);
  border: none;
  height: 100%;
  outline: none;
  position: absolute;
  width: 100%;
}

.Star {
  left: 0;
  position: absolute;
  top: 0;
}

@keyframes spin {
  0% {
    transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
  }
  100% {
    transform: translateX(-50%) translateY(-50%) rotateZ(359deg);
  }
}

.Spinner {
  --scale: 1;
  overflow: visible;
  position: absolute;
  top: calc(50vh + 27px);
  left: 50vw;
  transform: translateX(-50%) translateY(-50%) scale(var(--scale));
  transform-origin: 50% 55.2794306136632953%;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  z-index: 300;
  stroke: transparent;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  fill: var(--db-yellow);
  pointer-events: none;
  user-select: none;
  display: none;
}

.Spinner--animate {
  display: block;
  animation-name: spin;
}

.Spinner--scale {
  display: block;
  fill: transparent;
  stroke: var(--db-yellow);
  transform-origin: 50% 50%;
}

.Hidden {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

header {
  background: var(--db-blue);
  left: 0;
  padding: 0 10px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 200;
}

header svg {
  display: block;
  height: 36px;
  width: auto;
}

nav {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  position: relative;
}

nav a {
  color: var(--db-yellow);
  border-radius: 5px;
  display: block;
  font-family: 'Komika', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.2px;
  line-height: 20px;
  padding: 8px 12px;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: all;
  text-decoration-color: rgba(var(--db-yellow-rgb), 0.6);
  text-underline-offset: 3px;
  transition: color 200ms, background 200ms, text-decoration 200ms;
  white-space: nowrap;
}

nav a:focus,
nav a:hover {
  color: var(--db-light);
  text-decoration-thickness: 3px;
  text-decoration-color: rgba(var(--db-light-rgb), 0.3);
}

nav .active {
  background: var(--db-light);
  box-shadow: 1px 2px 0 0 rgba(var(--db-black-rgb), 0.1);
  color: var(--db-blue);
  text-decoration: none;
}

nav .active:focus,
nav .active:hover {
  color: var(--db-blue);
}

ul {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  height: 54px;
  justify-content: left;
  list-style: none;
  margin: 0 auto;
  max-width: max-content;
  padding: 0;
}

li {
  display: block;
  margin: 0;
  padding: 0 2px;
  position: relative;
  scroll-snap-align: start;
}

li:first-child {
  margin-right: 9px;
}

main {
  color: var(--db-light);
  left: 20px;
  right: 20px;
  line-height: 1.5;
  margin: 20px auto;
  max-width: 600px;
  padding: 30px;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(calc(-50% - 27px));
}

main p {
  margin: 0 0 15px 0;
  font-family: 'Raleway', sans-serif;
  font-size: 20px;
  font-weight: 500;
}

main h1 {
  color: var(--db-green);
  font-family: 'Comic Neue', 'Raleway', sans-serif;
  font-style: italic;
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 15px 0;
}

main p:last-child {
  margin-bottom: 0;
}

main a {
  color: var(--db-yellow);
}

main a:hover,
main a:focus {
  color: var(--db-white);
}