@charset "utf-8";


/* === { DOCUMENT } === */

body {
    background-attachment: fixed;
    background-color: var(--color_tertiary);
    background-image: url(../images/background_3840x2160.jpg);
    background-size: cover;
    color: var(--color_primary);
    display: flex;
    flex-direction: column;

    :where(footer, main, section) {
        display: inherit;
        flex-direction: inherit;
    }

    :where(footer, section) {
        align-items: center;
        background-color: hsl(from var(--color_secondary) h s l / 25%);
        padding-inline: 1rem;

        .container {
            max-width: 560px;
            padding-block: 4rem;
            width: 100%;

            > *:not(:first-child) {
                margin-block-start: 1lh;

                &:where(h1, h2, h3) {
                    margin-block-start: 2lh;
                }
            }
        }
    }

    footer {
        .container {
            display: flex;
            justify-content: center;

            ul {
                display: flex;
                gap: 2rem;

                li {
                    a {
                        &:where(:link, :visited) {
                            color: hsl(from var(--color_primary) h s l / 75%);
                            text-decoration: none;
                        }
                        
                        &:where(:hover, :active) {
                            color: var(--color_primary);
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 1920px) {
    body {
        background-image: url(../images/background_1920x1080.jpg);
    }
}

@media (max-width: 960px) {
    body {
        background-image: url(../images/background_960x1080.jpg);
    }
}


/* === { FORM } === */

form {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    label {
        font-weight: 500;
        line-height: 120%;
        text-transform: uppercase;
    }

    :where(input, select, textarea) {
        background-color: var(--color_primary);
        border: none;
        border-radius: 0.125rem;
        box-shadow: 0.25rem 0.25rem 0 var(--color_secondary);
        height: 2rem;
        padding-inline: 0.5rem;
        width: 100%;
    }

    input[type="checkbox"] {
        height: 1rem;
        width: 1rem;
    }

    input[type="submit"] {
        background-color: var(--color_quaternary);
        color: var(--color_secondary);
        cursor: pointer;
        font-weight: 700;
        text-transform: uppercase;
        transition: all 0.25s cubic-bezier(0.5, 0, 0.5, 1);

        &:hover {
            box-shadow: none;
        }
    }

    textarea {
        line-height: 140%;
        padding-block: 0.5rem;
    }

    .row {
        display: inherit;
        flex-wrap: wrap;
        gap: 1rem;

        .element {
            display: inherit;
            flex: 1 0 0;
            flex-direction: column;
            gap: 0.5rem;

            .wrapper {
                display: flex;
                gap: 1rem;
            }
        }
    }
}


/* === { DIALOG } === */

dialog[open] {
    border: none;
    border-radius: 0.125rem;
    box-shadow: 0.25rem 0.25rem 0 var(--color_secondary);
    display: flex;
    flex-direction: column;
    left: 50%;
    max-width: 560px;
    padding: 2rem;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: calc(100% - 2rem);

    &::backdrop {
        backdrop-filter: blur(0.5rem);
        background-color: hsl(from var(--color_tertiary) h s l / 25%);
    }

    &:focus {
        outline: none;
    }

    > *:not(:first-child) {
        margin-block-start: 1lh;

        &:where(h1, h2, h3) {
            margin-block-start: 2lh;
        }
    }

    button {
        background-color: var(--color_quaternary);
        border: none;
        border-radius: 0.125rem;
        box-shadow: 0.25rem 0.25rem 0 var(--color_secondary);
        color: var(--color_secondary);
        cursor: pointer;
        font-weight: 700;
        margin-block: 2rem -1rem !important;
        margin-inline: -1rem;
        padding: 0.5rem 0.75rem;
        text-transform: uppercase;
        transition: all 0.25s cubic-bezier(0.5, 0, 0.5, 1);
        width: calc(100% + 2rem);

        &:hover {
            box-shadow: none;
        }

        &:focus {
            outline: none;
        }
    }
}