@layer {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        background-repeat: no-repeat;
    }

    * {
        padding: 0;
        margin: 0;
    }

    html {
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        block-size: 100%;
    }

    body {
        min-block-size: 100%;
    }

    img,
    iframe,
    audio,
    video,
    canvas {
        display: block;
        max-inline-size: 100%;
        block-size: auto;
    }

    svg {
        max-inline-size: 100%;
    }

    svg:not([fill]) {
        fill: currentColor;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    textarea {
        resize: vertical;
    }

    fieldset,
    iframe {
        border: none;
    }

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word;
    }

    p {
        text-wrap: pretty;
        font-variant-numeric: proportional-nums;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-variant-numeric: lining-nums;
    }

    p,
    blockquote,
    q,
    figcaption,
    li {
        hanging-punctuation: first allow-end last;
    }

    input,
    label,
    button,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: 1.1;
    }

    math,
    time,
    table {
        font-variant-numeric: tabular-nums lining-nums slashed-zero;
    }

    code {
        font-variant-numeric: slashed-zero;
    }

    table {
        border-collapse: collapse;
    }

    abbr {
        font-variant-caps: all-small-caps;
        text-decoration: none;

        &[title] {
            cursor: help;
            text-decoration: underline dotted;
        }
    }

    sup,
    sub {
        line-height: 0;
    }

    :disabled {
        opacity: 0.8;
        cursor: not-allowed;
    }

    :focus-visible {
        outline-offset: 0.2rem;
    }
}

html {
    --surface-bg: oklch(18.745% 0.00829 274.449);
    --text-primary: oklch(94.053% 0.02842 261.522);
    --text-accent: oklab(60.609% 0.11631 0.03184);
    --font-body: "Montserrat", sans-serif;
    --font-heading: "Raleway", sans-serif;

    --gallery: oklch(73.952% 0.09053 247.336);
    --testing: oklch(73.952% 0.09053 284.685);
    --homequery: oklch(73.952% 0.09053 333.231);
    --gallery-hover: oklch(from var(--gallery) 60% c h);
    --testing-hover: oklch(from var(--testing) 60% c h);
    --homequery-hover: oklch(from var(--homequery) 60% c h);

    --selection-bg: oklch(59.437% 0.07732 254.051 / 0.302);
    --overlay-bg: oklch(39.302% 0.0313 263.076);
    --overlay-bg-hover: oklch(49.166% 0.03799 264.155);

    --project-icon-size: clamp(3rem, 5.714vw + 1.714rem, 6rem);
    --ui-btn-size: clamp(2rem, 1.905vw + 1.571rem, 3rem);

    --fs-title: clamp(3rem, 5.714vw + 1.714rem, 6rem);
    --fs-subtitle: clamp(0.9rem, 1.143vw + 0.643rem, 1.5rem);
    --fs-h2: clamp(1.1rem, 0.571vw + 0.971rem, 1.4rem);
    --fs-body: clamp(0.9rem, 0.571vw + 0.771rem, 1.2rem);
    --fs-image-title: clamp(1.5rem, 2.857vw + 0.857rem, 3rem);
    scrollbar-color: var(--overlay-bg-hover) var(--surface-bg);
}

body {
    background: var(--surface-bg);
    color: var(--text-primary);
    font-family: var(--font-body);
    height: 100%;
    position: relative;
    font-size: var(--fs-body);
}

.centre-wrapper {
    display: grid;
    height: 100%;
    place-items: center;
    place-content: center;
}

.corner-deco {
    position: fixed;
}

.corner-deco.top-left {
    width: 30%;
    top: 0px;
    left: 0px;
    fill: #8fbcbb;
}

.corner-deco.bottom-right {
    width: 20%;
    bottom: 0px;
    right: 0px;
    fill: #5e81ac;
}

main.homepage {
    display: grid;
    grid-template:
        "title" auto
        "info" min-content
        "projects" 1fr;
    gap: 1rem;
    place-items: center;
    place-content: center;
    width: 100%;
    max-width: 100ch;
    padding: 0 1rem;
}

main.gallery {
    display: grid;
    grid-template: "title" auto "image-grid" 1fr;
    /* place-items: start center; */
    /* place-content: start center; */
}

.title {
    grid-area: title;
    color: var(--text-accent);
    font-family: var(--font-heading);
    font-size: var(--fs-title);
    font-weight: 300;
    text-align: center;
}

.subtitle {
    grid-area: info;
    text-align: center;
    font-size: var(--fs-subtitle);
    padding: 0 2ch;
}

.projects-list {
    grid-area: projects;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: var(--project-icon-size) auto;
    grid-auto-flow: row;
    place-items: center;
    place-content: center;
    gap: 2rem;
    margin-top: 1.5rem;
}

.link-button {
    width: var(--ui-btn-size);
    height: var(--ui-btn-size);
    background: var(--overlay-bg);
    color: var(--surface-bg);
    border-radius: 50%;
    transition: background-color 0.1s ease-in-out;
    box-shadow: 0.2rem 0.2rem 0.5rem #0006;
}

button.link-button {
    border: none;
}

a.link-button {
    text-decoration: none;
}

.link-button:hover {
    background: var(--overlay-bg-hover);
}

.link-icon {
    width: 100%;
    height: 100%;
    padding: 20%;
}

.project-link {
    width: var(--project-icon-size);
    height: var(--project-icon-size);
}

.projects-list > a:nth-of-type(3n + 1) {
    background: var(--gallery);
}

.projects-list > a:nth-of-type(3n + 2) {
    background: var(--testing);
}

.projects-list > a:nth-of-type(3n + 3) {
    background: var(--homequery);
}

.projects-list > a:nth-of-type(3n + 1):hover {
    background: var(--gallery-hover);
}

.projects-list > a:nth-of-type(3n + 2):hover {
    background: var(--testing-hover);
}

.projects-list > a:nth-of-type(3n + 3):hover {
    background: var(--homequery-hover);
}

.projects-list > .project-desc:nth-of-type(3n + 1) h2 {
    color: var(--gallery);
}

.projects-list > .project-desc:nth-of-type(3n + 2) h2 {
    color: var(--testing);
}

.projects-list > .project-desc:nth-of-type(3n + 3) h2 {
    color: var(--homequery);
}

.projects-list .project-desc {
    width: 100%;
}
.projects-list .project-desc h2 {
    font-size: var(--fs-h2);
    padding-bottom: 0.5rem;
}

.contacts {
    position: fixed;
    left: 1.5rem;
    bottom: 1.5rem;
    display: grid;
    grid-auto-flow: row;
    gap: 0.5rem;
    place-items: center;
    place-content: center;
}

.home-button {
    position: fixed;
    top: 1.5rem;
    left: 1.5rem;
}

::selection {
    background: var(--selection-bg);
}