@layer reset, openprops, base, custom, utilities;

@import url('reset.css') layer(reset);

@import url('open-props.min.css') layer(openprops);

@import url('base.css') layer(base);

@import url('utilities.css') layer(utilities);

@layer custom {
    body {
        margin: var(--size-3);
        font-family: var(--font-sans);
    }

    header {
        max-width: var(--size-content-3);
    }

    h1 > img {
        max-width: 100%;
        width: 480px;
        height: auto;
    }

    footer {
        padding-block: var(--size-7);
        border-block-start: var(--border-size-1) solid var(--primary);
        margin-block: var(--size-7);
    }

    address {
        font-style: normal;
    }

    .projects {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--size-6);
    }

    .projects li {
        flex: 1;
    }

    .projects a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--size-3);
        text-decoration: none;
    }

    .projects img {
        width: 200px;
        height: auto;
    }
}