:root {
    --opacity: 30%;
    --margin: min(8rem, 10vw);

    --color-lavender: #d9c9c9;
    --color-lavender-20: color-mix(in oklab,var(--color-lavender)var(--opacity),transparent);

    --color-medium-blue: #2D01BD;

    --color-deep-twilight: #080A64;
    --color-deep-twilight-20: color-mix(in oklab,var(--color-deep-twilight)var(--opacity),transparent);

    --color-white: #fff;
    --color-white-20: color-mix(in oklab,var(--color-white)var(--opacity),transparent);

    --color-black: #000;
    --color-black-20: color-mix(in oklab,var(--color-black)var(--opacity),transparent);

    --cell-padding: min(1rem, 9vw);
    --cell-border-size: 1px;

    --logo-size: 8rem;

    --background: var(--color-medium-blue);
    --background-size: 12px;
    --background-size-multiplier: 5;

    --grid-color: var(--color-deep-twilight-20);
    --grid-color2: var(--color-lavender-20);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    color: var(--color-lavender);
    background-color: var(--background);
    background-size: 
        calc(var(--background-size) * var(--background-size-multiplier))
        calc(var(--background-size) * var(--background-size-multiplier))
        ;
    background-image: 
        repeating-linear-gradient(90deg,var(--grid-color)0,var(--grid-color)1px,transparent 0,transparent 50%),
        repeating-linear-gradient(0deg,var(--grid-color)0,var(--grid-color)1px,transparent 0,transparent 50%)
        ;
    font-family: Inter, sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    line-height: 1.4;

    &::before {
        content: '';
        position: absolute;
        z-index: 0;
        background-size: 
            calc(var(--background-size) * var(--background-size-multiplier) * 5)
            calc(var(--background-size) * var(--background-size-multiplier) * 5)
            ;
        background-image: 
            repeating-linear-gradient(90deg,var(--grid-color)0,var(--grid-color)1px,transparent 0,transparent 50%),
            repeating-linear-gradient(0deg,var(--grid-color)0,var(--grid-color)1px,transparent 0,transparent 50%)
            ;
        inset: 0;
    }
}

.layout {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: var(--margin) minmax(var(--margin), auto) 1fr minmax(var(--margin), auto) var(--margin);
    grid-template-rows: var(--margin) minmax(var(--margin), auto) 1fr minmax(var(--margin), auto) var(--margin);
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
}

.layout > div {
    position: relative;
    padding: var(--cell-padding);
    border: var(--cell-border-size) solid var(--grid-color);
    transition: 0.2s all ease-in-out;

    &:hover {
        background: var(--color-medium-blue);
    }
}

.gap {
    min-width: var(--margin);
    min-height: var(--margin);
    background-size: var(--background-size) var(--background-size);
    background-attachment: fixed;
    background-color: var(--background);
    background-image: repeating-linear-gradient(315deg,var(--grid-color)0,var(--grid-color)1px,transparent 0,transparent 50%);
}

.cell {
    display: grid;
    place-content: center;
}

.filler {
    display: grid;
    place-content: center;
}

.logo {
    max-width: var(--logo-size);
    background-color: var(--background);

    & svg {
        width: 100%;
        height: auto;
    }
}

.intro {
    grid-column: span 3;
    display: grid;
    place-content: center;
    background-color: var(--background);
}

.intro-content {
    max-width: 30rem;
    padding: var(--cell-padding);
}

.signature {
    background-color: var(--background);
}

h1 {
    margin-bottom: 2rem;
}

p {
    margin-bottom: 1rem;
    font-weight: 500;
    font-size: 1.5rem;
}

a {
    color: var(--color-white);
}