:root {
  color: #172336;
  background: #4ec5ee;
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 32px 18px;
  background:
    radial-gradient(circle at 15% 20%, #fff46a 0 3%, transparent 3.3%),
    radial-gradient(circle at 86% 72%, #fff46a 0 2%, transparent 2.3%),
    linear-gradient(135deg, #3a9fe1, #59d4ee);
}

main {
  width: min(680px, 100%);
  text-align: center;
}

.label {
  margin: 0 0 8px;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: .12em;
  font-size: .8rem;
}

h1 {
  margin: 0;
  color: #f62f2f;
  font-size: clamp(3.1rem, 12vw, 5.7rem);
  line-height: .85;
  letter-spacing: -.08em;
  text-transform: uppercase;
  text-shadow: 0 5px 0 #571e28, 0 9px 0 rgba(23, 35, 54, .25);
}

.subtitle {
  margin: 19px 0 29px;
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  text-shadow: 0 2px 0 rgba(23, 35, 54, .25);
}

.download-box {
  padding: 32px clamp(22px, 7vw, 52px);
  border: 4px solid #172336;
  border-radius: 20px;
  background: #fffdf1;
  box-shadow: 0 9px 0 #172336;
}

h2 { margin: 0 0 12px; font-size: 1.7rem; }

.download-box p { line-height: 1.55; }

.download-button {
  display: inline-block;
  margin: 13px 0 8px;
  padding: 15px 25px;
  border: 3px solid #172336;
  border-radius: 11px;
  color: #fff;
  background: #f62f2f;
  box-shadow: 0 5px 0 #8c1a26;
  font-weight: 800;
  text-decoration: none;
  transition: transform .1s, box-shadow .1s;
}

.download-button:hover, .download-button:focus-visible {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #8c1a26;
}

.hint { margin: 14px 0 0; color: #506074; font-size: .9rem; }
.footer { margin: 29px auto 0; max-width: 520px; color: #fff; font-weight: 700; line-height: 1.5; text-shadow: 0 2px 0 rgba(23, 35, 54, .25); }

.make-link {
  display: inline-block;
  margin-top: 22px;
  color: #172336;
  background: #fff46a;
  border: 3px solid #172336;
  border-radius: 10px;
  padding: 12px 18px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 0 #172336;
}

.make-link:hover, .make-link:focus-visible { transform: translateY(2px); box-shadow: 0 2px 0 #172336; }

.make-phase {
  margin-top: 31px;
  padding: 32px clamp(22px, 7vw, 52px);
  text-align: left;
  border: 4px solid #172336;
  border-radius: 20px;
  background: #fffdf1;
  box-shadow: 0 9px 0 #172336;
}

.make-phase h2 { text-align: center; }
.make-phase h3 { margin: 27px 0 9px; font-size: 1.22rem; }
.make-phase p, .make-phase li { line-height: 1.55; }
.dark { color: #506074; text-align: center; text-shadow: none; }
.criteria, .questions { padding-left: 22px; }
.criteria li, .questions li { margin: 7px 0; }
code { color: #b01e27; font-weight: 700; }