@font-face {
  font-family: "iASansDay";
  src: url("../fonts/iASans-BoldC.woff2") format("woff2");
  font-style: normal;
  font-weight: bold;
}

@font-face {
  font-family: "iASansDay";
  src: url("../fonts/iASans-MediumC.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
}


@font-face {
  font-family: "iASansDay";
  src: url("../fonts/iASans-TextC.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}

body {
  font-family: "iASansDay";
  font-size: 24px;
  font-style: normal;
/*  background-color: black;*/
}

ul {
  list-style-type: none;
}

li {
  margin-top: 1rem;
}

.container {
  margin: 2rem auto;
  max-width: 52rem;
  width: 80vw;
  background: #7208CF;
  background: linear-gradient(to top, #7208CF 0%, #FF29B8 88%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

form {
  display: grid;
  place-content: center;
}

.form-control {
  display: grid;
  grid-template-columns: 1em auto;
  gap: 0.5em;
}

input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: transparent;
  /* Not removed via appearance */
  margin: 0;

  font: inherit;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid hotpink;
  border-radius: 0.15em;
  transform: translateY(-0.075em);

  display: grid;
  place-content: center;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  color: hotpink;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em;
  /* Windows High Contrast Mode */
  background-color: CanvasText;
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:focus {
  outline: max(2px, 0.15em) solid;
  outline-offset: max(2px, 0.15em);
}

input[type="checkbox"]:disabled {
  --form-control-color: var(--form-control-disabled);
  color: var(--form-control-disabled);
  cursor: not-allowed;
}

@keyframes rainbow {
  0% { background-color: red; }
  14% { background-color: orange; }
  28% { background-color: yellow; }
  42% { background-color: green; }
  56% { background-color: blue; }
  70% { background-color: indigo; }
  84% { background-color: violet; }
  100% { background-color: red; }
}

.rainbow-background {
  animation: rainbow 10s linear infinite;
}