.reg-form > form{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.reg-input{
    /* display: flex;
    flex-direction: column; */
    padding: 0.75rem;

}

.reg-input > input {
    width: 30rem;
    background-color: transparent;
    color: var(--clr-neutral-100);
    border: 3px solid var(--clr-secondary-400);
    border-radius: 0.15em;
}

.reg-input label {
    font-size: 1rem;
}

.reg-form label.reg-error {
    font-size: 1.25rem;
    color: var(--clr-accent-400);
}

.reg-form .full-line {
    margin: 1rem;
    width: 100%;
}

.reg-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.reg-checkbox label{
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.15rem;
    line-height: 100%;
    display: grid;
    grid-template-columns: 1em auto;
    gap: 0.5em;
}

.reg-checkbox input[type="checkbox"]{
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: transparent;
    /* Not removed via appearance */
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 0.10em solid var(--clr-secondary-400);
    border-radius: 0.15em;
    transform: translateY(-0.15em) translateX(-0.25em);
    display: grid;
    place-content: center;
}

.reg-checkbox 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(--clr-accent-400);
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  }

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

.reg-form button[type="submit"]{
    width: max(10rem, calc(100vw - 5rem));
    max-width: 30rem;
    height: 3rem;
    font-size: 1.25rem;
    background-color: var(--clr-accent-400);
    color: var(--clr-neutral-100);
    border: 0;
}

.reg-form button[type="submit"]:hover,
.reg-form button[type="submit"]:focus{
  cursor: pointer;
  background-color: var(--clr-accent-300);
}

@media (max-width: 50em){
    .reg-input label {
        font-size: 0.85rem;
    }
    .reg-form label.reg-error {
        font-size: 0.7rem;
        color: var(--clr-accent-400);
    }
    .reg-checkbox label{
        font-size: 0.70rem;
        display: grid;
        grid-template-columns: 1em auto;
        gap: 0.25em;
    }
    .reg-input > input {
        width: 17rem;
    }
}