@import "https://fonts.googleapis.com/css2?family=Anybody:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";
@import "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,700;0,9..144,800;1,9..144,400;1,9..144,500;1,9..144,700;1,9..144,800&display=swap";
*, :before, :after {
  font: inherit;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

html, body {
  min-height: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizespeed;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

a {
  text-decoration-skip-ink: auto;
}

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

img, video {
  object-fit: cover;
}

video {
  vertical-align: top;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

:root {
  --color-background: #0f131f;
  --color-blue: #171da8;
  --color-main: #c50101;
  --color-main-darken: color-mix(in srgb, var(--color-main) 70%, black);
  --shadow-color: #00000080;
  --text-light: white;
  --color-text-dark: #0d0726;
  --page-transition-ms: .6s;
  --split-breakpoint: 900;
  --text-spacing: calc(var(--space) * 2.2);
  --space: clamp(1rem, 1.5vw, 1.5rem);
  --padding-card: calc(var(--space) * 1);
  --full-height: calc(100dvh - var(--grid-margin) * 2);
  --grid-gap: calc(var(--space) * 1);
  --grid-margin: calc(var(--space) * .6);
  --card-radius: 1rem;
  --gradient-card: linear-gradient(180deg, #96b2c0 0%, #d0d1e4 49.31%, #aeb9df 50.5%, #62a4d3 100%);
  --blue-screen-width: 0;
  --blue-screen-height: 0;
}

@media (width >= 900px) {
  :root {
    --grid-margin: calc(var(--space) * 1.5);
  }
}

@font-face {
  font-family: Syne;
  font-weight: 1 999;
  src: url("Syne.9ae96565.ttf") format("truetype-variations");
}

@font-face {
  font-family: MisterPixel;
  font-weight: 400;
  src: url("MisterPixelRegular.4c758634.ttf") format("truetype-variations");
}

:root {
  font-size: clamp(var(--min-fs-rem), var(--min-fs-rem)  + var(--slope), var(--max-fs-rem));
  --min-fs: .9;
  --max-fs: 1.2;
  --min-vw: 40;
  --max-vw: 100;
  --min-fs-rem: var(--min-fs) * 1rem;
  --max-fs-rem: var(--max-fs) * 1rem;
  --min-vw-rem: var(--min-vw) * 1rem;
  --slope: (var(--max-fs)  - var(--min-fs)) * (100vw - var(--min-vw-rem)) / (var(--max-vw)  - var(--min-vw));
}

body {
  color: var(--color-text-dark);
  font-feature-settings: "ordn" on, "ss03" on, "ss04" on;
  font-synthesis: none;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: Syne, sans-serif;
  font-weight: 500;
  line-height: 1.5;
}

p {
  text-wrap: pretty;
  font-size: 1.1rem;
}

h1, h2, h3, h4, h5 {
  text-wrap: balance;
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
}

h1, h2 {
  font-family: Anybody, sans-serif;
  font-weight: 700;
}

h4, h5 {
  font-family: Syne, sans-serif;
}

article h1, article h2 {
  font-weight: 700;
  font-family: Fraunces, sans-serif !important;
}

article h3, article h4, article h5 {
  font-family: Syne;
  font-weight: 600;
}

h1 {
  font-size: 1.8rem;
}

@media (width >= 900px) {
  h1 {
    font-size: 2.2rem;
  }
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.8rem;
}

h4 {
  font-size: 1.6rem;
}

h5 {
  font-size: 1.2rem;
  font-weight: 700;
}

small, article .details dd {
  white-space: nowrap;
  text-transform: uppercase;
  font-size: .7rem;
  font-weight: 600;
}

.screen {
  -webkit-user-select: none;
  user-select: none;
  background-color: var(--color-blue);
  aspect-ratio: 16 / 9;
  filter: drop-shadow(0 .5rem 1rem #d4fffe);
  border-radius: 2% / 48%;
  width: 100%;
  font-family: MisterPixel;
  position: relative;
  box-shadow: inset 0 4px 3rem #000000e6, inset 0 4px 4px 3px #0000008f, inset 0 -5px 24px #0000008f, 0 4px 1rem 3px #d4fffe9d, 0 4px 4px 3px #fff, 0 -1px 2px 3px #000000ce;
}

@media (width >= 900px) {
  .screen {
    box-shadow: inset 0 4px 16rem #000000e6, inset 0 4px 4px 3px #0000008f, inset 0 -5px 24px #0000008f, 0 4px 1rem 3px #d4fffe9d, 0 4px 4px 3px #fff, 0 -1px 2px 3px #000000ce;
  }
}

.screen .info {
  color: #fff;
  mix-blend-mode: luminosity;
  filter: blur(1px) opacity(.8);
  animation: 50ms infinite behave;
  position: absolute;
  top: 2rem;
  left: 2rem;
}

.screen #clock {
  opacity: .8;
  opacity: .6;
  color: #fff;
  filter: blur(1px) opacity(.8);
  font-family: MisterPixel;
  font-size: .8rem;
  animation: 50ms infinite behave;
  position: absolute;
  bottom: 2rem;
  left: 2rem;
}

.screen h4 {
  text-transform: uppercase;
  opacity: .7;
  margin-top: 0;
  font-family: MisterPixel;
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
}

@media (width >= 900px) {
  .screen h4 {
    font-size: 2rem;
  }
}

.screen .dvd-logo {
  opacity: 0;
  border-radius: inherit;
  filter: opacity(.8) saturate(0) blur(1px);
  mix-blend-mode: color-dodge;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  transition: opacity .1s;
  display: flex;
  position: absolute;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.screen .dvd-logo img {
  width: 4rem;
  animation: .1s infinite behave;
}

.screen .lines {
  border-radius: inherit;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.screen .lines div {
  filter: blur(2px);
  width: 100%;
  height: 100%;
  animation: 3s infinite line1;
  position: absolute;
  top: 0;
}

.screen .lines div:after {
  content: "";
  opacity: .13;
  background-color: #00d0ff;
  width: 100%;
  height: 1px;
  display: block;
}

.screen .lines div:first-child {
  animation: 2s ease-in-out infinite line2;
}

.screen .lines div:nth-child(2) {
  animation: 30s ease-in 10s infinite line3;
  transform: translateY(-20%);
}

.screen .lines div:nth-child(2):after {
  opacity: .1;
  background-image: linear-gradient(to top, #fff, #fff0);
  height: 4rem;
}

.screen .dvd-animation-y {
  --blue-screen-height: 0;
  animation: 8s linear infinite alternate moveY;
}

.screen .dvd-animation-x {
  --blue-screen-width: 0;
  animation: 10s linear infinite alternate moveX;
}

.screen .crt {
  animation: 1.6s infinite textShadow;
}

.screen .crt:before {
  z-index: 2;
  content: " ";
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(#12101000 50%, #00000040 50%) 0 0 / 100% 2px, linear-gradient(90deg, #ff00000f, #00ff0005, #0000ff0f) 0 0 / 3px 100%;
  display: block;
  position: absolute;
  inset: 0;
}

.screen .crt:after {
  z-index: 2;
  content: " ";
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  background: #1210101a;
  animation: .15s infinite flicker;
  display: block;
  position: absolute;
  inset: 0;
}

@keyframes line1 {
  10% {
    opacity: .9;
    transform: translateY(10%);
  }

  28% {
    opacity: 0;
    transform: translateY(90%);
  }

  30% {
    opacity: .7;
    transform: translateY(60%);
  }

  54% {
    opacity: .5;
    transform: translateY(0%);
  }

  60% {
    opacity: .9;
    transform: translateY(45%);
  }

  90% {
    opacity: 2;
    transform: translateY(25%);
  }
}

@keyframes line2 {
  10% {
    opacity: .9;
    transform: translateY(100%);
  }

  28% {
    opacity: 0;
    transform: translateY(90%);
  }

  30% {
    opacity: .1;
    transform: translateY(75%);
  }

  54% {
    opacity: .8;
    transform: translateY(90%);
  }

  60% {
    opacity: .4;
    transform: translateY(45%);
  }

  90% {
    opacity: 1;
    transform: translateY(85%);
  }
}

@keyframes line3 {
  0% {
    transform: translateY(-20%);
  }

  10% {
    opacity: .3;
    transform: translateY(100%);
  }

  15% {
    opacity: .2;
    transform: translateY(80%);
  }

  21% {
    opacity: 0;
    transform: translateY(95%);
  }

  22% {
    transform: translateY(-20%);
  }
}

@keyframes moveX {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--blue-screen-width));
  }
}

@keyframes moveY {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(var(--blue-screen-height));
  }
}

@keyframes behave {
  10% {
    opacity: .9;
    transform: translateX(0);
  }

  28% {
    opacity: 5;
  }

  30% {
    opacity: .9;
    transform: translateX(-.5px);
  }

  54% {
    opacity: 7;
  }

  60% {
    opacity: .8;
    transform: translateX(.7px);
  }

  90% {
    opacity: 7;
  }
}

@keyframes flicker {
  0% {
    opacity: .27861;
  }

  5% {
    opacity: .34769;
  }

  10% {
    opacity: .23604;
  }

  15% {
    opacity: .90626;
  }

  20% {
    opacity: .18128;
  }

  25% {
    opacity: .83891;
  }

  30% {
    opacity: .65583;
  }

  35% {
    opacity: .67807;
  }

  40% {
    opacity: .26559;
  }

  45% {
    opacity: .84693;
  }

  50% {
    opacity: .96019;
  }

  55% {
    opacity: .08594;
  }

  60% {
    opacity: .20313;
  }

  65% {
    opacity: .71988;
  }

  70% {
    opacity: .53455;
  }

  75% {
    opacity: .37288;
  }

  80% {
    opacity: .71428;
  }

  85% {
    opacity: .70419;
  }

  90% {
    opacity: .7003;
  }

  95% {
    opacity: .36108;
  }

  100% {
    opacity: .24387;
  }
}

.page {
  transform-origin: 0 100%;
  background: #fff 0 0 / 5px 5px;
  padding: 1.4rem;
  transition: transform .3s ease-in;
  display: none;
}

@media (width >= 900px) {
  .page {
    padding: 3rem 3rem 10vw;
  }
}

.page.active {
  display: block;
}

.polaroid {
  right: var(--grid-margin);
  background-color: #fff;
  width: 18rem;
  padding: .5rem;
  position: absolute;
  transform: translateY(-.4%)rotate(1deg);
  box-shadow: 0 3.09302px 3.09302px #0003, 0 3.09302px 40.2093px .773256px #00000013;
}

.polaroid .asset {
  filter: brightness(.9);
}

.polaroid .clip {
  filter: drop-shadow(2px 1px 1px #2223);
  width: 6rem;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-12.5%)translateX(-40%);
}

.polaroid .inside {
  justify-content: center;
  display: flex;
  position: relative;
}

.polaroid .inside .logo {
  width: 60%;
  position: absolute;
  top: 3rem;
}

article h1 {
  text-align: left;
  text-transform: capitalize;
  margin-top: 0;
  margin-bottom: 2rem;
  font-size: 4rem;
  line-height: 1;
}

@media (width >= 900px) {
  article h1 {
    height: 30vw;
    min-height: 10rem;
  }
}

article h4 {
  padding-bottom: var(--text-spacing);
  margin-top: 5rem;
}

@media (width >= 900px) {
  article h4 {
    margin-top: 2rem;
  }
}

article h5 {
  padding-bottom: 1rem;
}

article p {
  font-weight: 350;
}

article .content {
  padding-top: var(--text-spacing);
  border-top: 1px solid #000;
}

@media (width >= 900px) {
  article .content {
    gap: var(--text-spacing);
    grid-template-columns: auto 1fr;
    grid-template-areas: "details inner";
    display: grid;
  }
}

.details-inner {
  gap: 2rem;
  margin-bottom: 1.5rem;
  display: flex;
}

.details-inner .details {
  flex-grow: 1;
}

.details-inner .polaroid {
  position: relative;
  top: 0;
  right: 0;
}

@media (width >= 900px) {
  .details-inner .polaroid {
    display: none;
  }
}

.page > .polaroid {
  display: none;
}

@media (width >= 900px) {
  .page > .polaroid {
    display: flex;
  }
}

article .details {
  grid-area: details;
  display: flex;
}

@media (width >= 900px) {
  article .details {
    display: block;
  }
}

article .details dt {
  white-space: nowrap;
  margin-bottom: 1rem;
  font-size: .9rem;
}

article .inner {
  grid-area: inner;
}

article section:not(:first-child) {
  padding: 1rem 0;
}

@media (width >= 900px) {
  article section:not(:first-child) {
    padding: 2rem 0;
  }
}

.iphone, .ipad {
  color: #fff;
  text-shadow: 0 0 .5em #000;
  background-color: #000;
  border: solid #111;
  display: block;
  position: relative;
  box-shadow: 0 .5em 2em .2em #1c181820, inset 0 0 0 .5px #2a1c1c;
}

.old-device .iphone {
  padding: calc(2 * var(--radius)) 0;
  --radius: 1.4vw;
}

.old-device .iphone img {
  border-radius: calc(.1vw + 1px);
}

.old-device .four .iphone, .four .iphone {
  padding: calc(1.3 * var(--radius)) 0;
  --radius: 1.2vw;
}

.iphone {
  --border: clamp(.1vw + 4px, .5vw, 1rem);
  border-width: var(--border);
  border-radius: calc(var(--border)  + var(--radius));
  --radius: 1.2vw;
}

.iphone img, .iphone video {
  border-radius: var(--radius);
}

.ipad {
  --border: clamp(.2vw + 8px, 1vw, 2rem);
  border-width: var(--border);
  border-radius: calc(var(--border) * 2);
}

.ipad img, .ipad video {
  border-radius: var(--border);
}

.combo {
  flex-wrap: nowrap;
  gap: 1rem;
  display: flex;
}

.combo img {
  flex: 1;
  width: 100%;
  min-width: auto;
}

.device-background {
  background-color: #25352a;
  justify-content: center;
  padding: 5rem;
  display: flex;
}

.device-background figure {
  width: 45%;
}

header {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "intro navigation"
                       "intro about"
                       "intro radio";
  gap: 0 var(--grid-gap) !important;
}

header .intro {
  grid-area: intro;
}

header .intro .intro-inner {
  top: var(--space);
  width: 100%;
  height: 75vh;
  position: sticky;
}

@media (width >= 900px) {
  header .intro .intro-inner {
    height: var(--full-height);
  }
}

header .intro .card {
  padding: calc(var(--space) * 2) calc(var(--space) * 1);
  border-radius: var(--card-radius);
  background-image: var(--gradient-card);
  justify-content: center;
  gap: calc(var(--space) * 1);
  transform-style: preserve-3d;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "start"
                       "end";
  width: 100%;
  height: 100%;
  display: grid;
  transform: perspective(1000px);
}

header .intro .logo {
  padding: 0rem calc(var(--space) * 1);
  color: var(--color-main-darken);
  grid-area: start;
  transition: color .25s;
}

header .intro .logo svg {
  width: 100%;
  height: 100%;
}

header .intro .logo.shadow {
  filter: drop-shadow(.2rem .2rem 1rem var(--shadow-color));
  transform: translateZ(1px);
}

header .intro .logo.low {
  transform: translateZ(20px);
}

header .intro .logo.mid {
  transform: translateZ(40px);
}

header .intro .logo.top {
  color: var(--color-main);
  transform: translateZ(60px);
}

header .intro .headline {
  padding: 0 calc(var(--space) * .5);
  text-align: center;
  grid-area: end;
  transform: translateZ(10px);
}

@keyframes blink {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

header .navigation {
  border-radius: var(--card-radius);
  margin-bottom: var(--grid-margin);
  grid-area: navigation;
}

header .navigation .device {
  border-radius: var(--card-radius);
  background-image: linear-gradient(#efe1d6, #fef4e8 16.1%, #f7e9dc 16.25%, #e3d6ce 16.6%, #d9cbc6 39%, #d5c5c0 55.02%, #cdc4bd, #cbc2bd, #cbbeb6 96%, #c5bcb3 96.15%, #797069 97.25%, #544f4c), linear-gradient(170deg, #cdc4bd, #c6bdb6);
  background-position: 0 0, 0 0;
  background-size: 100% 100%, 100% 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem 1.5rem 2.5rem;
  display: flex;
  position: relative;
  box-shadow: inset 0 2px 1px -1px #fff, inset 0 3px 1px -1px #e1dddc, inset 0 -4px 3px -3px #353439, 30px 40px 50px #00000017, 0 30px 70px #00000040;
}

header .navigation .top {
  text-transform: uppercase;
  color: #3c3230;
  background-color: #2d131317;
  border-radius: 2px;
  gap: .4rem;
  width: calc(100% + 1rem);
  margin-bottom: 2rem;
  padding: .4rem .2rem .3rem .3rem;
  box-shadow: 0 1px 2px 1px #fff9, 0 -1px 1px #5d36367a;
}

@media (width >= 900px) {
  header .navigation .top {
    flex: 1;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3rem;
    display: flex;
  }
}

header .navigation .title {
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  letter-spacing: .2px;
  opacity: .8;
  color: #48403e;
  flex-grow: 1;
  flex-shrink: 1;
  justify-content: space-between;
  height: 1.8rem;
  margin: .5rem;
  font-family: sans-serif;
  font-size: .5rem;
  font-weight: 600;
  line-height: 1;
  display: flex;
  position: relative;
}

@media (width >= 900px) {
  header .navigation .title {
    margin-bottom: 0;
  }
}

header .navigation .title .mini {
  opacity: .8;
  color: #3e2d29;
  font-size: .3rem;
}

header .navigation .title:before, header .navigation .title:after {
  content: "";
  opacity: .6;
  background-color: #4e4644;
  width: 100%;
  height: 4px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
}

header .navigation .title:after {
  height: 2px;
  bottom: 6px;
}

header .navigation .lights {
  gap: .2rem;
  display: flex;
}

header .navigation .lights .light {
  border-radius: 3px;
  width: 15px;
  height: 6px;
  position: relative;
}

header .navigation .lights .light.green {
  background-image: linear-gradient(#a7b991, #b6bd9c);
  box-shadow: inset 0 0 1px .5px #b3b198, inset 1.5px 0 1px -1px #7a7766, inset -1.75px 0 1.25px -.75px #aab491, 0 0 1px #b4bea3;
}

header .navigation .lights .light.green:before {
  background-color: #00fc00;
}

header .navigation .lights .light.red {
  background-image: linear-gradient(#b99191, #bd9c9c);
  box-shadow: inset 0 0 1px .5px #b3b198, inset 1.5px 0 1px -1px #7a6666, inset -1.75px 0 1.25px -.75px #b49191, 0 0 1px #beaea3;
}

header .navigation .lights .light.red:before {
  background-color: red;
}

header .navigation .lights .light:before {
  content: "";
  opacity: 0;
  border-radius: inherit;
  filter: blur(3px);
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
}

header .navigation .lights .light.blink:before {
  animation: .3s linear infinite blink;
}

header .navigation nav {
  padding: .5rem;
  display: flex;
}

@media (width >= 900px) {
  header .navigation nav {
    padding: 0;
  }
}

header .navigation nav a {
  text-align: center;
  white-space: nowrap;
  background-color: #020202;
  border-radius: 6px;
  flex-grow: 1;
  align-items: center;
  margin-left: .2rem;
  font-size: .9rem;
  font-weight: 400;
  text-decoration: none;
  transform: translateY(.08rem);
  box-shadow: 0 1px 1px 1px #0003;
}

header .navigation nav a div {
  color: #d7cecee2;
  text-shadow: 0 -1px #000;
  background-color: #2d241f;
  background-image: linear-gradient(187deg, #00000080, #0000, #0000004d);
  border: 1px solid #ffffff24;
  border-radius: 10px;
  padding: .7em 1em .5em;
  font-weight: 600;
  transition: transform 80ms ease-in;
  transform: translateY(-.8rem);
}

@media (width >= 900px) {
  header .navigation nav a div {
    padding: .4em .8em .2em;
    transform: translateY(-.4rem);
  }
}

header .navigation nav a:active div {
  transform: translateY(-.1rem);
}

header .navigation nav a:hover div {
  filter: brightness(1.1);
}

header .about {
  grid-area: about;
}

header .about .card {
  padding: var(--padding-card);
  border-radius: var(--card-radius);
  background: linear-gradient(#e1e1ff 0%, #a9bfda 100%);
  grid-template: "left minifigs" minmax(0, 1fr)
                 "bottom minifigs"
                 / minmax(0, 1fr) auto;
  gap: .5rem;
  min-height: 30rem;
  overflow: hidden;
}

@media (width >= 900px) {
  header .about .card {
    display: grid;
  }
}

header .about .card .headline {
  grid-area: left;
  padding-top: 2rem;
  padding-bottom: 1.5rem;
}

header .about .card .content {
  grid-area: bottom;
}

header .about .card .content b {
  font-weight: 650;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.minifigures {
  flex-direction: column;
  grid-area: minifigs;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 8rem;
  margin-bottom: 2rem;
  margin-left: 2.2rem;
  display: flex;
  position: relative;
  transform: translateX(8%)translateX(-10%);
}

@media (width >= 900px) {
  .minifigures {
    align-items: center;
    margin-top: 0;
    transform: translateX(8%)translateX(3%);
  }
}

.minifigures h3 {
  font-size: 1rem;
}

.minifigures.show-names .name-arrow {
  opacity: 1 !important;
}

.minifigures.show-names .arrow-path {
  animation-name: draw;
}

.minifigures svg.arrow {
  width: 30px;
}

.minifigures .arrow-path {
  stroke-width: 4px;
  stroke: var(--color-blue);
  fill: none;
  stroke-dasharray: 400;
  stroke-dashoffset: 400px;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

.minifigures .arrow-path.tail-1 {
  animation-delay: .5s;
}

.minifigures .arrow-path.tail-2 {
  animation-delay: .7s;
}

.minifigures .name-arrow {
  opacity: 0;
  transition: all .2s ease-in;
  position: absolute;
}

.minifigures .figures {
  z-index: 1;
  gap: .2rem;
  display: flex;
}

.minifigures .figures .minifig {
  width: var(--size);
  --size: 5rem;
}

@media (width >= 900px) {
  .minifigures .figures .minifig {
    --size: 6rem;
  }
}

.minifigures .figures .minifig:after {
  z-index: 0;
  width: var(--size);
  height: var(--size);
  content: "";
  opacity: .3;
  filter: blur(10px);
  background-color: #000;
  border-radius: 100%;
  display: block;
  position: absolute;
}

.minifigures .figures .minifig img {
  z-index: 1;
  position: relative;
}

.minifigures .mattias {
  transform: scaleX(-1)translateY(5%)rotate(3deg);
}

.minifigures .mattias h3 {
  transform: scaleX(-1)translate(-31%, -22%)rotate(15deg);
}

.minifigures .mattias .name-arrow {
  transition-delay: 1s;
  transform: translateY(-130%);
}

.minifigures .mattias svg.arrow {
  transform: rotate(11deg);
}

.minifigures .mattias:after {
  transform: scaleY(.4)translateY(-174%)scale(.7);
}

.minifigures .mattias .arrow-path {
  animation-delay: 1.3s;
}

.minifigures .mattias .tail-1 {
  animation-delay: 1.8s;
}

.minifigures .mattias .tail-2 {
  animation-delay: 2s;
}

.minifigures .can {
  transform: rotate(-3deg);
}

.minifigures .can .name-arrow {
  transform: translate(-140%, -40%);
}

.minifigures .can h3 {
  transform: translate(34%, -15%)rotate(-5deg);
}

.minifigures .can svg.arrow {
  transform: rotate(356deg);
}

.minifigures .can:after {
  transform: scaleY(.4)rotate(3deg)scaleX(.88)translateY(-160%)scale(.7);
}

.minifigures .scene {
  z-index: 0;
  width: var(--size);
  height: var(--size);
  background-color: var(--color-main-darken);
  --size: 18rem;
  border-radius: 100%;
  position: absolute;
  bottom: 0;
  transform: scaleY(.5)translateY(99%)translateX(17%);
}

@media (width >= 900px) {
  .minifigures .scene {
    transform: scaleY(.5)translateY(99%);
  }
}

.minifigures .scene:before {
  width: var(--size);
  height: var(--size);
  content: "";
  background-color: var(--color-main);
  border-radius: 100%;
  display: block;
  position: absolute;
  top: 0;
  transform: scaleY(.8)translateY(-15%);
}

.js-tilt-glare {
  overflow: hidden;
  border-radius: inherit !important;
}

header .radio {
  grid-area: radio;
}

header .radio iframe {
  aspect-ratio: 1000 / 638;
  width: 100%;
}

main {
  grid-template-columns: minmax(0, .8fr) minmax(0, 2fr);
  grid-template-areas: "navigation pages";
  grid-auto-rows: minmax(min-content, max-content);
}

main .pages {
  grid-area: pages;
}

main .pages .pages-inner {
  position: relative;
}

main .navigation {
  grid-area: navigation;
}

main .navigation .navigation-inner {
  top: var(--space);
  position: sticky;
}

main .device {
  padding: calc(var(--padding-card) * 1);
  padding-bottom: calc(var(--padding-card) * 2);
  color: #ddd6d7;
  border-radius: var(--card-radius);
  background: #e8e8e7;
  border: 2px solid #ffffff1a;
  height: 100%;
}

main .device h3 {
  color: #1a322d;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

main .device p {
  color: #696b63;
  font-weight: 400;
}

main .device menu {
  background: linear-gradient(#aca79b 0%, #fcfbfa 100%);
  border-radius: 1.1rem;
  width: 100%;
  margin-top: 1rem;
  padding: .4rem;
}

@media (width >= 900px) {
  main .device menu {
    flex-direction: column;
  }
}

main .device menu .indent {
  box-sizing: border-box;
  --gap: .1rem;
  justify-content: center;
  gap: var(--gap);
  background: #494444;
  border-radius: 1.1rem;
  flex-wrap: wrap;
  width: 100%;
  padding: 1px;
  display: flex;
  box-shadow: inset 0 0 20px #000;
}

main .device menu a {
  color: #4a3030;
  text-shadow: 0 1px #fff;
  background-color: #a09d97;
  align-items: center;
  width: 100%;
  padding: 1.2rem 2rem;
  font-size: 1.4rem;
  text-decoration: none;
  display: flex;
}

main .device menu a:visited {
  color: #4a3030;
}

menu a {
  background: linear-gradient(#e9e4da 0%, #e9e5db 100%);
  border-radius: 1rem;
  display: block;
  position: relative;
  box-shadow: inset 0 2px 2px #fff, inset 0 -1px 2px #aeaba4;
}

menu a:hover {
  filter: brightness(.94);
}

menu a:before {
  z-index: 1;
  content: "";
  background-color: #500;
  background-image: radial-gradient(.3em .25em at 50% 25%, #ffffffa1 25%, #fff0), radial-gradient(.25em .25em at 30% 75%, #ffffff80, #fff0), radial-gradient(.3em .3em at 60% 80%, #ffffff80, #fff0), radial-gradient(100% 100%, #fff0 30%, #ffffff4d 40%, #00000080 50%);
  border: 2px solid #000;
  border-radius: 100%;
  width: 1rem;
  height: 1rem;
  transition: all .1s;
  display: block;
  position: absolute;
  right: 2rem;
}

menu a.active {
  width: 100% !important;
  transition: all !important;
}

@media (width >= 900px) {
  menu a.active {
    order: unset;
    transition: all .2s;
  }
}

menu a.active:before {
  background-color: #0d0;
  background-image: radial-gradient(.3em .25em at 50% 25%, #ffffffd7 25%, #fff0), radial-gradient(.25em .25em at 30% 75%, #ffffff80, #fff0), radial-gradient(.3em .3em at 60% 80%, #ffffff80, #fff0), radial-gradient(100% 100%, #fff0 30%, #ffffff4d 40%, #00000080 50%);
  box-shadow: 0 0 .75em #0f0;
}

menu a:active {
  box-shadow: inset 0 0 10px #00000040, inset 0 5px 10px #00000040, inset 0 2px 2px #ddd, inset 0 -1px 2px #9d9b94;
}

footer {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-areas: "pricing contact";
  grid-auto-rows: 1fr;
}

footer .pricing {
  grid-area: pricing;
}

footer .contact {
  grid-area: contact;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }

  80% {
    opacity: .8;
  }

  100% {
    opacity: 1;
  }
}

.contact-inner {
  padding: calc(var(--padding-card) * 1);
  color: #fff;
  border-radius: var(--card-radius);
  background: radial-gradient(79.63% 185.91% at 83.95% 79.63%, #485477 0%, #161c2d 100%);
  border: 2px solid #ffffff1a;
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

.contact-inner h3 {
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 1.8rem;
}

.contact-inner p {
  color: #acb2be;
  margin-bottom: 2rem;
}

.contact-inner .phone {
  align-self: center;
  margin-bottom: -110%;
  transition: transform .23s ease-out;
  bottom: 0;
  transform: translate(0%)rotate(-3.45deg)scale(.95);
}

@media (width >= 900px) {
  .contact-inner .phone {
    margin-bottom: -70%;
  }
}

.contact-inner:hover .phone {
  transform: translate(0%)rotate(0);
}

footer button {
  cursor: pointer;
  background-color: #980000;
  background-image: linear-gradient(90deg, #00000040, #0000 10% 90%, #00000040);
  border: 0;
  border-radius: 4rem;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
  box-shadow: 0 2px 1px 3px #000, -1px 5px 14px 2px #925a5a78;
}

footer button:hover {
  filter: brightness(1.05);
}

footer button:hover > div {
  transform: translateY(-.9rem)scaleX(.98)scaleY(.97);
}

footer button:active {
  filter: brightness(1.05);
}

footer button:active > div {
  transform: translateY(-.5rem)scaleX(.99)scaleY(.99);
}

footer button > div {
  border-radius: inherit;
  background-image: linear-gradient(#980000 0%, #6f0000 30% 70%, #980000 100%);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 4rem;
  padding: .5rem 1rem 6rem;
  transition: all .1s;
  display: flex;
  transform: translateY(-1rem)scaleX(.98)scaleY(.97);
  box-shadow: 0 4px 6px #c30100;
}

footer button > div:after {
  content: "";
  border-radius: inherit;
  background-image: radial-gradient(#0000 30%, #8c000066 70%);
  background-size: 7px 7px;
  display: block;
  position: absolute;
  inset: 0;
  box-shadow: inset 1px -5px 5px 4px #c30000;
}

footer button > div:before {
  z-index: 0;
  content: "";
  border-radius: inherit;
  background-image: radial-gradient(#ffc97e, #ff1818 40%, #0000 70%);
  animation: .15s .3s infinite flicker;
  display: block;
  position: absolute;
  inset: 0;
}

footer button > div a {
  z-index: 1;
  white-space: nowrap;
  text-transform: uppercase;
  text-shadow: 0 2px 4px #ff7d42, 0 -1px 4px #6e0000;
  font-size: 1.2rem;
  font-weight: 800;
  text-decoration: none;
  position: relative;
  transform: translateY(2.6rem);
  color: #410000eb !important;
}

.pricing {
  padding: var(--padding-card);
  border-radius: var(--card-radius);
  border: 1px solid #fff4;
  flex-direction: column;
  display: flex;
}

.pricing p {
  margin-bottom: 1rem;
}

.pricing h3 {
  color: #fff;
  padding-top: 1rem;
  padding-bottom: 2rem;
  font-size: 1.8rem;
}

.pricing .table {
  transform-style: preserve-3d;
  flex-direction: column;
  flex-grow: 1;
  gap: 1rem;
  width: 100%;
  display: flex;
}

@media (width >= 900px) {
  .pricing .table {
    flex-direction: row;
    gap: 1rem;
  }
}

.pricing .table .package {
  padding: var(--padding-card);
  color: #fff;
  border-radius: var(--card-radius);
  border: 2px solid #ffffff1a;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  padding-top: 3rem;
  display: flex;
  position: relative;
}

.pricing .table .package:after {
  content: "";
  background-color: var(--color-background);
  border-radius: 100%;
  width: .8rem;
  height: .8rem;
  display: block;
  position: absolute;
  top: 1rem;
}

.pricing .table .package > div {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 10rem;
  display: flex;
}

.pricing .table .package > div img {
  width: 100%;
}

.pricing .table .package .price {
  padding-top: var(--padding-card);
  width: 100%;
  font-family: monospace;
  font-size: .8rem;
}

.pricing .table .package .price:before {
  content: "";
  transform: translateY(calc(var(--padding-card) * -1));
  opacity: .6;
  border-top: 2px dashed var(--color-background);
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
}

.pricing .table .package img {
  margin-bottom: 2rem;
}

.pricing .table .package.one {
  background-color: #0fc600;
}

.pricing .table .package.two {
  background-color: #c300c6;
}

.pricing .table .package.three {
  background-color: #0b00c6;
}

.pricing .table .package p {
  margin-bottom: 0;
}

.pricing .table .package small, .pricing .table .package article .details dd, article .details .pricing .table .package dd {
  opacity: .5;
  color: #fff;
  display: block;
}

@media (width >= 900px) {
  .pricing .table .package small, .pricing .table .package article .details dd, article .details .pricing .table .package dd {
    margin-top: 0;
  }
}

div.bye11111 {
  color: #fff;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 1rem;
  margin-top: -6rem;
  display: none;
  overflow: hidden;
}

@media (width >= 900px) {
  div.bye11111 {
    transform: translateY(var(--grid-margin));
    display: grid;
  }
}

div.bye11111 .polaroid {
  width: 100%;
  transition: all .23s ease-out;
  position: relative;
  right: 0;
  transform: none;
}

@media (width >= 900px) {
  div.bye11111 .polaroid {
    transform: translateY(50%);
  }

  div.bye11111 .polaroid:hover {
    transition: all .23s ease-in;
    transform: translateY(4rem);
  }
}

div.bye {
  color: #fff;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  display: grid;
  overflow: hidden;
}

@media (width >= 900px) {
  div.bye {
    grid-template-columns: repeat(6, 1fr);
    gap: 5rem;
    padding: 2rem 5rem;
  }
}

div.bye img {
  opacity: .4;
  filter: invert();
}

html {
  background-color: var(--color-background);
}

header, main, footer, .bye {
  margin: var(--grid-margin);
}

@media (width >= 900px) {
  header, main, footer, .bye {
    gap: var(--grid-gap);
    display: grid;
  }
}

header > *, main > *, footer > *, .bye > * {
  margin-bottom: var(--grid-margin);
}

@media (width >= 900px) {
  header > *, main > *, footer > *, .bye > * {
    margin-bottom: 0;
  }
}

/*# sourceMappingURL=index.867122b9.css.map */