:root {
    --on: turquoise;
    --off: #99c3b3;
    --dark: #022;
    --back: #022;
    --mrg: 32px;
}

* {
    transition: all 1s ease-out;
    -webkit-animation : fadein 500ms ease-in forwards;
    animation         : fadein 500ms ease-in forwards;
    box-sizing : border-box;
    margin     : 0;
    padding    : 0;
}

html {
    font-family            : 'IBM Plex Sans Condensed', sans-serif;
    line-height: 1.2em;
    font-smooth: always;
    -webkit-font-smoothing : antialiased;
    color: var(--on);
  }
@keyframes fadein {
    from {
      opacity : 0;
    }
    to {
      opacity : 1;
    }
  }

  /* Safari, Chrome and Opera > 12.1 */
  @-webkit-keyframes fadein {
    from {
      opacity : 0;
    }
    to {
      opacity : 1;
    }
  }

body {
    background-color: var(--back);
    height: 100vh;
    width: 100vw;
    display: grid;
    justify-content: center;
    align-items: center;
}

form {
    position: relative;
    padding: var(--mrg);
    background-color: var(--dark);
}
form div {
    margin-top: var(--mrg);
}
input {
    width: 100%;
    border-bottom: 2px solid var(--off);
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    padding: calc(var(--mrg)/3);
    font-family:inherit;
    font-size:inherit;
    font-weight: 600;
    color:white;
    outline:none;
    background:none;
    margin-top: calc(var(--mrg) / 6);
}
input[type='checkbox'] {
    appearance: none;
  background-color: var(--dark);
  margin: 0;
  padding: calc(var(--mrg)/3);
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid currentColor;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
 }
 input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--on);
    transform-origin: bottom left;
    clip-path: polygon(17% 23%, 0 47%, 50% 100%, 100% 20%, 80% 0%, 46% 63%);
  }
  input[type="checkbox"]:checked::before {
    transform: scale(1);
  }
  input[type="checkbox"]:focus {
    outline: max(2px, 0.15em) solid currentColor;
    outline-offset: max(2px, 0.15em);
  }
  input[type="checkbox"]:hover {
    cursor: pointer;
  }
input:focus {
    border-color: var(--on);
}
input:focus + label {
    color: var(--on);
}
input::placeholder {
    color: var(--off);
}
input:focus::placeholder {
    color: var(--on);
}
label {
    font-size: 0.9rem;
    font-weight: 300;
    padding-left: calc(var(--mrg)/3);
    color: var(--off);
}
.rgpd {
    display: grid;
  grid-template-columns: 2em auto;
  gap: 0.5em;
}
button {
    border: 2px solid var(--off);
    border-radius: calc(var(--mrg)/4);
    padding: calc(var(--mrg)/3);
    font-family:inherit;
    font-size:inherit;
    font-weight: 300;
    color: var(--dark);
    background-color: var(--off);
    width: 50%;
    align-self: flex-end;
}
button:hover {
    background-color: var(--on);
    border-color: var(--on);
    cursor: pointer;
}
form > :last-child {
  text-align: center;
}