.dialog-wrapper {
  display: grid;
  gap: 1rem;
  justify-items: center;
  padding-block: 2rem;
}

.logo {
  background-color: hsl(212, 100%, 15%);
  padding: 1rem;
  width: 180px;
  height: auto;
  filter: grayscale(80%) hue-rotate(3.5deg) saturate(500%);
}

dialog {
  border: none;
  border-top: 1px solid hsla(212, 100%, 15%, 0.85);
  box-shadow:
    0 1px 1px hsl(0deg 0% 0% / 0.075),
    0 2px 2px hsl(0deg 0% 0% / 0.075),
    0 4px 4px hsl(0deg 0% 0% / 0.075),
    0 8px 8px hsl(0deg 0% 0% / 0.075),
    0 16px 16px hsl(0deg 0% 0% / 0.075)
  ;
  margin-inline: auto;
  position: relative; 
  z-index: 99999;
}

dialog[open] {
  max-width: 650px;
  padding-block: 2rem;
  transition: 400ms ease-in-out;
}

dialog > .inner {
  padding-inline: 2rem;
  padding-block: 2.5rem;
  max-width: 60ch;
}

.counter {
  font-weight: bold;
}

::backdrop {
  background-image: linear-gradient(
    45deg,
    rgb(17, 17, 17),
    rgb(7, 5, 8),
    rgb(13, 15, 17),
    rgb(6, 9, 6)
  );
  opacity: 0.75;
}

#start-application {
  border: 2px solid #00244d;
  background: #fff;
  color: #00244d;
  font-weight: 600;
  letter-spacing: 0.055rem;
  padding-block: 10px;
  padding-inline: 20px;
  position: relative;
  transform: translate(-50%, -50%);
  transition: background 400ms ease-in-out;
  text-transform: uppercase;
  z-index: 9999;

  &:hover {
    background-color: rgb(16, 16, 94);
    color: #fff;
    cursor: pointer;
  }
}

/* Tokens  */

.stack > * + * {
  margin-block-start: 1.25rem;
}

.stack-lg > * + * {
  margin-block-start: 3rem;
}

.full-bleed {
  margin-left: 50%;
  transform: translateX(-50%);
  width: 100vw;
}