@layer reset, theme, utilities;

:root {
    --color-stone-400: #a8a29e;
    --color-stone-500: #78716c;
}

@layer reset {
    /* Use a more intuitive box-sizing model */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* Remove default margins */
    * {
        margin: 0;
    }

    body {
        /* Make line height more accessible (according to WCAG, should be at least 1.5) */
        -webkit-font-smoothing: antialiased;
        /* Make line height more accessible (according to WCAG, should be at least 1.5) */
        line-height: 1.5;
    }

    /* Improve media defaults */
    img,
    picture,
    video,
    canvas,
    svg {
        display: block;
        max-width: 100%;
    }

    /* Remove default form typography styles */
    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    /* Avoid text overflows */
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word;
    }
}

@layer theme {
    html {
        font-family: system-ui, sans-serif;
    }

    h1,
    h2,
    h3,
    h4 {
        padding-block-start: 0.75em;
        padding-block-end: 0.5em;
        font-family: Montserrat, system-ui, sans-serif;
        font-style: normal;
        font-optical-sizing: auto;
    }

    h1 {
        font-weight: 800;
    }

    h2 {
        font-weight: 700;
    }

    .bg {
        position: fixed;
        inset: 0;
        z-index: -1;
        height: 100lvh;
        background-image: url(/assets/background.jpg);
        background-position: center;
        background-size: cover;
        filter: blur(32px);
        scale: 1.2;
    }

    main {
        max-width: clamp(36rem, 100% - 64px, 52rem);
        min-height: 100svh;
        margin-inline: auto;
        background-color: rgb(255 255 255 / 0.8);
    }

    .profile-img {
        border-radius: 100%;
    }

    div:has(> .profile-img) {
        width: min(60%, 192px);
        margin-inline: auto;
    }

    a {
        font-weight: 600;
        color: inherit;
        text-decoration: underline 2px var(--color-stone-400);
        text-underline-offset: 0.125em;
        transition: all;
        transition-duration: 300ms;

        &:hover {
            text-decoration-thickness: 2.25px;
            text-decoration-color: var(--color-stone-500);
        }
    }

    footer {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
        font-size: 0.875rem;
        color: var(--color-stone-500);
    }
}

@layer utilities {
    .px-32 {
        padding-inline: 32px;
    }

    .pt-48 {
        padding-block-start: 48px;
    }

    .pb-16 {
        padding-block-end: 16px;
    }

    .text-center {
        text-align: center;
    }
}