:root {
    --brand-light: #59B2FF;
    --brand-mid: #3487CF;
    --brand-dark: #1D6FB6;

    --purple: #B259FF;
    --fuschia: #FF59F9;
    --pink: #FF598B;
    --orange: #FF8B59;
    --yellow: #FFCD59;
    --lime: #E1FF59;
    --green: #59FF91;
    --cyan: #59FFF9;
    --navy: #6A59FF;

    --danger: #FF5959;

    --input-base: #1C1F21;
    --input-stroke: #363B40;
    --input-placeholder: #869198;

    --shape-background: #131516;
    --shape-body: #212427;
    --shape-button: #2D3136;
    --shape-hover: #383D42;

    --text-body: #C8CDD0;
    --text-heading: #F9F9F9;

    --logo-font: normal 2.5rem/normal "Leckerli One", cursive;

    --heading-font-family: "Baloo 2", sans-serif;
    --heading-md: bold 1.75rem/normal var(--heading-font-family);
    --heading-sm: bold 1.125rem/normal var(--heading-font-family);

    --body-font-family: "Open Sans", sans-serif;
    --body-md: normal 1rem/normal var(--body-font-family);
    --body-sm: normal .875rem/normal var(--body-font-family);
    --body-xs: normal .75rem/normal var(--body-font-family);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #1E1E1E;
    display: flex;
    justify-content: center;

    font: var(--body-md);
}

#wrapper {
    flex: 0 1 80rem;
    margin: 5rem;
    display: flex;
}

.radio-hidden {
    height: 0;
    width: 0;
    position: absolute;
    appearance: none;
}

input {
    &:invalid {
        border-color: var(--danger);
    }

    &[required] + .error {
        display: flex;
    }

    &:valid + .error {
        display: none;
    }
}

.error {
    display: flex;
    align-items: center;
    gap: .5rem;

    span {
        font: var(--body-xs);
        color: var(--danger);
    }
}