@import url("header.css");
@import url("footer.css");

* {
    line-height: 1.5;
    
    accent-color: var(--black);

    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

*:focus-visible {
    outline: 2px solid var(--black);
}

body {
    display: flex;
    flex-direction: column;

    background-color: var(--background-color);
    color: var(--text-color);

    min-height: 100dvh;

    font-size: 1.15rem;
}

h1 {
    font-size: 2.7rem;
}
h2 {
    font-size: 1.7rem;
}
h3 {
    font-size: 1.25rem;
}

body > main {
    flex: 1;
    margin: auto;
    /* justify-items: center; */
    /* padding: 1rem; */

    section {
        padding: 0 1.5rem;
        max-width: 1000px;
        margin-bottom: 2rem;

        i {
            display: block;
            margin-bottom: 2rem;
        }

        p {
            text-wrap: balance;
            margin-top: 1.5rem;

            &:last-of-type {
                margin-bottom: 1.5rem;
            }

            a {
                display: inline-block;
                text-decoration: underline;
                min-width: 0;
                min-height: 0;
            }
        }

        ul:not(:has(ul)) li {
            margin-left: 1.5rem;

            &::marker {
                font-size: 1rem;
            }
        }
    }
}

h1, h2, h3, h4, h5, h6 {
    align-content: center;
}

p {
    max-width: 1000px;
}

img {
    width: 100%;
    object-fit: cover;
}

li::marker {
    font-size: 0;
}

input {
    background-color: transparent;
    border: 2px solid var(--black);
    padding: .5rem 1rem;

    font-size: 1.15rem;
}

select, 
datalist {
    background-color: transparent;
    border: 1px solid var(--black);
    padding: 1rem 1.5rem;
    font-size: 1rem;
    appearance: none;
}

a {
    display: inline-block;
    align-content: center;
}

button:has(svg) {
    display: flex;
    align-items: center;
    justify-content: center;
    
    padding: .85rem;

    gap: .5rem;

    svg {
        min-width: 32px;
        min-height: 32px;
    }

    @media screen and (max-width: 800px) {
        svg {
            min-width: 24px;
            min-height: 24px;
        }
    }
}

button, 
[role="button"] {
    background-color: transparent;
    white-space: nowrap;

    cursor: pointer;

    padding: 1rem 1.5rem;

    font-size: 1.15rem;

    text-decoration: none !important;
}

.call-to-action {
    background-color: var(--black);
    color: var(--background-color);

    border-radius: 5px;

    font-weight: bold;

    /* &:hover {
        background-color: var(--primary);
        color: var(--black);

        @media (prefers-color-scheme: dark) {
            color: var(--background-color);
        }
    } */
}

button, a {
    min-width: 44px;
    min-height: 44px;
}

hr {
    border-color: var(--black);
}

@media screen and (max-width: 800px) {
    body, 
    button, 
    input {
        font-size: 1.10rem;
    }
    h1 {
        font-size: 1.85rem;
    }
    h2 {
        font-size: 1.5rem;
    }
    h3 {
        font-size: 1.25rem;
    }
}