@font-face {
   font-family: Titillium;
   src: url('../fonts/TitilliumWebR.woff2') format('woff2');
   font-weight: 400;
   font-display: swap;
}

@font-face {
   font-family: Titillium;
   src: url('../fonts/TitilliumWebB.woff2') format('woff2');
   font-weight: 700;
   font-display: swap;
}

* {
   box-sizing: border-box;
}

[hidden] {
   display: none !important;
}

body {
   margin: 0;
   color: white;
   background: #07152f;
   font: 18px/1.5 Titillium, sans-serif;
}

.background {
   position: fixed;
   inset: 0;
   overflow: hidden;
   z-index: -1;
   background: linear-gradient(135deg, #07152f 0%, #102e60 55%, #073c43 100%);
}

.glow,
.ring {
   position: absolute;
   border-radius: 50%;
   animation: 6s ease-in-out infinite alternate;
}

.green {
   width: 300px;
   height: 300px;
   top: -110px;
   right: -90px;
   background: radial-gradient(circle, #21ad4b66, transparent 70%);
   animation-name: green;
}

.red {
   width: 330px;
   height: 330px;
   bottom: -135px;
   left: -105px;
   background: radial-gradient(circle, #ed1c2455, transparent 70%);
   animation-name: red;
}

.blue {
   width: 360px;
   height: 360px;
   top: 230px;
   left: -170px;
   background: radial-gradient(circle, #2f64be44, transparent 70%);
   animation-name: blue;
}

.ring {
   width: 185px;
   height: 185px;
   right: -76px;
   top: 29%;
   border: 2px solid #4bd27a33;
   animation-name: ring;
}

@keyframes green {
   from {
      transform: translate(0, 32px);
   }

   to {
      transform: translate(52px, 0);
   }
}

@keyframes red {
   to {
      transform: translate(-44px, -38px);
   }
}

@keyframes blue {
   to {
      transform: translate(36px, -24px);
   }
}

@keyframes ring {
   from {
      transform: scale(.94);
   }

   to {
      transform: translate(-28px, 34px) scale(1.06);
   }
}

main {
   width: min(100%, 640px);
   min-height: 100vh;
   min-height: 100dvh;
   margin: auto;
   padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
   text-align: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.logo {
   max-width: 40vw;
   object-fit: contain;
}

h1 {
   font-size: clamp(30px, 7vw, 42px);
   margin: 8px 0 0;
}

p {
   margin: 14px 0;
}

.intro {
   max-width: 440px;
   margin: 4px 0 24px;
   color: #dae5f5;
}

.card {
   width: 100%;
   border: 1px solid #91a8bf;
   border-radius: 22px;
   padding: 24px;
   background: #07152fb8;
   box-shadow: 0 6px 24px #0003;
}

.pin {
   display: block;
   font-size: 48px;
   line-height: 1.3;
   letter-spacing: .22em;
   padding-left: .22em;
}

a,
button {
   -webkit-tap-highlight-color: transparent;
}

button,
.primary {
   font: inherit;
   cursor: pointer;
   border-radius: 12px;
   min-height: 48px;
   padding: 10px 20px;
   color: white;
}

.primary {
   display: block;
   background: #1ba94c;
   border: 1px solid #58dc80;
   text-decoration: none;
   font-weight: 700;
   font-size: 21px;
}

.secondary {
   background: #ffffff0d;
   border: 1px solid #91a8bf;
   margin-top: 8px;
}

a:focus-visible,
button:focus-visible {
   outline: 3px solid #fff;
   outline-offset: 4px;
}

a:hover,
button:hover {
   filter: brightness(1.12);
}

#status,
#instructions {
   color: #e1eafa;
}

.stores {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 20px;
   margin-top: 24px;
}

.badge {
   display: inline-flex;
   min-width: 170px;
   min-height: 56px;
   align-items: center;
}

.badge img {
   max-width: 100%;
   object-fit: contain;
}

small {
   display: block;
   font-size: 15px;
}

.store-help {
   font-size: 15px;
   color: #cbd8ed;
   margin-bottom: 0;
}

@media (max-width: 360px) {
   .card {
      padding: 18px 14px;
   }
}

@media (max-height: 520px) and (orientation: landscape) {
   .logo {
      height: 65px;
   }

   main {
      padding-top: 16px;
   }
}

@media (prefers-reduced-motion: reduce) {

   .glow,
   .ring {
      animation: none;
   }
}