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

:root {
    --ff-sora: "Sora", sans-serif;
    --ff-roboto-mono: "Roboto Mono", monospace;
    --ff-roboto-flex: "Roboto Flex", sans-serif;

    --display-lg: 800 4.5rem/130% var(--ff-sora);
    --display-md: 800 2.5rem/130% var(--ff-sora);
    --display-sm: 700 2rem/130% var(--ff-sora);

    --overline: 700 1rem/150% var(--ff-roboto-mono);

    --paragraph-lg: 500 1rem/150% var(--ff-roboto-flex);
    --paragraph-md: 500 .875rem/150% var(--ff-roboto-flex);
    --paragraph-sm: 500 .75rem/150% var(--ff-roboto-flex);

    --label-md: 700 1.25rem/150% var(--ff-roboto-flex);
    --label-sm: 700 1rem/150% var(--ff-roboto-flex);

    --content-primary: #FFFFFF;
    --content-secondary: #C7C9CC;
    --content-tertiary: #D9D9D9;
    --content-brand: #C58DE7;
    --color-inverse: #030203;

    --background-primary: #020202;
    --background-secondary: #111012;
    --background-tertiary: #24222E;
    --background-brand: #C58DE7;
    --background-gray: #3D3D3D;

    --accent-pink: #D586E0;
    --accent-blue: #91A1FA;
    --accent-green: #77C0AF;
    --accent-lime: #D1DC97;
    --accent-red: #E9A9B3;

    --gradient-border: #77C0AF 0%, #D1DC97 14.84%, #E9A9B3 32.15%, #D586E0 65.79%, #91A1FA 84.58%;
    --gradient-background: #D586E0 0%, #91A1FA 98.93%;
    --gradient-content: #C7C9CC 0%, #3D3D3D 100%;

    --px: 2rem;
}

.container {
    --max-width: 390px;
    width: min(var(--max-width), 100% - var(--px) * 2);
    margin-inline: auto;
    padding-block: 2.75rem;
}

.hidden {
    display: none;
}

body {
    background-image: url(../assets/bg.png);
    background-color: var(--background-primary);

    color: var(--content-primary);
}

h1, h2, h3 {
    color: var(--content-primary);
    text-transform: uppercase;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-bottom: 2.875rem;

    font: 800 1.5rem/130% var(--ff-sora);
}

button {
    width: 100%;
    height: 3.5rem;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;

    border: none;
    padding: 1rem;

    background: var(--background-tertiary);
    border-radius: .5rem;
    outline: none;

    font: var(--label-md);
    color: var(--label-md);
    text-transform: uppercase;
    cursor: pointer;

    position: relative;
    z-index: 1;

    &:hover,
    &:focus {
        background-image: linear-gradient(90deg, #77C0AF 0%, #D1DC97 14.84%, #E9A9B3 32.15%, #D586E0 65.79%, #91A1FA 84.58%);
    }

    & img[src*='arrow'] {
        transform: translateX(0);
        transition: transform 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    &:hover img[src*='arrow'],
    &:focus img[src*='arrow'] {
        transform: translateX(10px);
    }

    &:hover img[src*='replay'],
    &:focus img[src*='replay'] {
        animation: rotate 1s forwards linear;
    }

    &:hover&::before,
    &:focus&::before {
        content: "";
        position: absolute;
        background: var(--background-tertiary);
        border-radius: inherit;
        inset: 2px;
        z-index: -1;
    }
}

main section {
    display: grid;
}

main section > div:nth-child(1) {
    & P {
        font: var(--overline);
        text-transform: uppercase;
        background: linear-gradient(90deg, #C7C9CC 0%, #3D3D3D 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    & h1 {
        font: var(--display-md);
        margin-top: .5rem;
    }
}

#raffle {
    margin-top: 2.625rem;
}

form {
    display: grid;
    gap: 2.5rem;

    & .title-form {
        & h3 {
            font: var(--label-md);
        }
        & p {
            font: var(--paragraph-md);
            color: var(----content-tertiary);
        }
    }

    & fieldset {
        border: none;

        & .fields {
            display: flex;
            gap: .75rem;

            & .input-wrapper {
                width: 5.5rem;

                display: flex;
                flex-direction: column;
                align-items: center;
                gap: .5rem;

                &:hover label,
                &:focus-within label {
                    color: var(--content-brand);
                }
                &:hover .border-gradient,
                &:focus-within .border-gradient {
                    background: linear-gradient(90deg, #77C0AF 0%, #D1DC97 14.84%, #E9A9B3 32.15%, #D586E0 65.79%, #91A1FA 84.58%);
                }
                &:hover .border-gradient input,
                &:focus-within .border-gradient input {
                    background: var(--background-tertiary);
                }
                
                & label {
                    font: var(--label-sm);
                    color: var(--content-secondary);
                    text-transform: uppercase;

                    transition: color 200ms linear;
                }

                & .border-gradient {
                    padding: 1px;
                    border-radius: .5rem;
                    background: transparent;

                    transition: all 600ms linear;

                    & input {
                        width: 100%;
                        height: 3.5rem;

                        font: var(--display-sm);
                        color: var(--content-primary);

                        text-align: center;
                        padding: .25rem .5rem;

                        background: var(--background-secondary);
                        border: 1px solid transparent;
                        outline: none;
                        border-radius: .5rem;

                        transition: all 300ms linear;
                    }
                }
            }
        }

        & .toggle-wrapper {
            margin-top: 1.25rem;
            display: flex;
            align-items: center;
            gap: .5rem;

            & .toggle-inner {
                width: 1.875rem;
                height: 1.25rem;

                border-radius: 1rem;
                background: var(--content-tertiary);
                
                position: relative;

                &:has(:checked) img {
                    left: calc(66% - 22px / 2);
                }

                &:has(:checked) {
                    background: linear-gradient(90deg, #D586E0 0%, #91A1FA 98.93%);
                }

                & input {
                    position: absolute;
                    inset: 0;
                    opacity: 0;
                    cursor: pointer;
                }

                & img {
                    position: absolute;
                    top: calc(50% - 22px / 2);
                    left: 0;
                    transition: all 300ms ease;
                }
            }

            & label {
                font: 400 .75rem/150% "Inter", sans-serif;
            }
        }
    }
}

.questions {
    margin-top: 5rem;

    display: grid;
    gap: 2.25rem;

    & .question {
        display: flex;
        align-items: start;
        gap: .5rem;

        & p:nth-child(1) {
            font: var(--paragraph-md);
            color: var(--content-brand);
        }

        & p:nth-child(2) {
            font: var(--paragraph-sm);
            color: var(--content-secondary);
        }
    }
}

#result {
    display: none;
    gap: 2.5rem;
    height: fit-content;
    margin-top: 50px;

    & .title {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .25rem;
        margin: 0;
        height: fit-content;

        animation: appear_title 1s linear;

        & h3 {
            font: var(--label-md);
            color: var(--content-primary);
        }

        & p {
            font: var(--overline);
            color: var(--content-secondary);
            text-transform: uppercase;
        }
    }
}

.number-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem;
}

.number-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 100px;
    color: var(--content-brand);
    font: 700 3rem/150% var(--ff-roboto-mono);
    border-radius: 28px;

    position: relative;
    z-index: 1;
}

.number {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;

    animation: 1s 1900ms appear_number linear both;
}

.rectangle {
    width: 84px;
    height: 100px;
    border-radius: 28px;
    background: var(--background-brand);

    position: absolute;
    inset: 0;
    z-index: -1;

    scale: 0;
    rotate: 0;
    animation: 1900ms 1s scale_shape linear both, 900ms 1300ms rotate_shape linear both;
}

@keyframes appear_title {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes rotate_shape {
    100% {
        rotate: 180deg;
    }
}

@keyframes scale_shape {
    0% {
        scale: 0;
    }
    10%, 90% {
        scale: 1;
    }
    91% {
        scale: 1;
    }
    100% {
        scale: 0;
    }
}

@keyframes appear_number {
    0%,95% {
        color: #020202;
    }

    100% {
        color: var(--content-brand);
    }
}

@keyframes appear_button {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes rotate {
    0% {
        rotate: 0deg;
    }
    100% {
        rotate: 360deg;
    }
}

@media (width >= 85.375em) {
    :root {
        --px: 8.375rem;
    }

    .container {
        --max-width: 85.375em;
        padding-block: 4.75rem 9.5rem;
    }

    .logo {
        justify-content: start;
        margin-bottom: 5.5rem;
    }

    main section {
        grid-template-areas: 
            'A B'
            'C B';

        & > div:nth-child(1) {
            grid-area: A;
            width: 32rem;

            & h1 {
                font: var(--display-lg);
                margin-top: .75rem;
            }
        }

        & #raffle {
            grid-area: B;

            margin-top: 2.625rem;
            width: 26rem;
        }

        & #result {
            grid-area: B;
            width: 482px;
        }

        & > .questions {
            grid-area: C;

            margin-top: 2.375rem;
            width: 24rem;
        }
    }
}