:root {
    --color-base: 0, 0, 0;
    --color-contrast: 256, 256, 256;

    --padding: 40px;

    --font-min: 30px;
    --font-tar: 10vw;
    --font-max: 4vh;
}

/* -- Cornerstones -- */

* {
    margin: 0;
    font-family: "Monaco", "Consolas", monospace, sans-serif;
    color: rgb(var(--color-contrast));
}

*::selection {
    background-color: rgb(var(--color-contrast));
    color: rgb(var(--color-base));
}

html,
body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background-color: rgba(var(--color-base), .7);
    background-size: cover;
    background-blend-mode: overlay;
    background-position: fixed;
}

:is(p, h1) {    
    font-size: var(--font-min);
    user-select: none;
}

:is(#intro, #card) a {
    --padding-vert: 17px;

    display: inline-block;
    text-decoration: none;
    text-align: center;
    font-size: 20px;
}

h1 {
    font-size: clamp(var(--font-min), var(--font-tar), var(--font-max));
}

p {
    font-size: clamp(calc(var(--font-min) / 2), calc(var(--font-tar) / 2), calc(var(--font-max) / 2));
}

/* -- Components -- */

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    gap: var(--padding, 30px);
}

body > div {
    padding: calc(var(--padding) / 2);
}

/* --- */

#intro {
    --font-tar: 13vw;
    --font-max: 6vh;
    padding: calc(var(--padding) / 2);
}

#intro a {
    padding: var(--padding-vert) 40px;
    border-radius: 100px;
    border: solid 4px rgba(var(--color-contrast), .3);
    margin: var(--padding) 0;
    width: calc(100% - (var(--padding) * 2));
}

#intro p {
    margin: 10px 0;
}

/* --- */

#card,
#card > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--padding) / 2);
}

#card {
    --portrait-size: 128px;

    gap: var(--padding);
    position: relative;
    max-width: 600px;
    padding: var(--padding);
    padding-top: calc(var(--portrait-size) - (var(--padding) / 2));
    border-radius: 18px;
    backdrop-filter: saturate(100) brightness(.3);
    box-shadow:  0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
}

#card > img {    
    width: var(--portrait-size);
    height: var(--portrait-size);
    position: absolute;
    border-radius: 100%;
    top: calc((var(--portrait-size) / 2) * -1);
    box-shadow: 0 10px 20px rgba(0, 0, 0 , .19), 0 6px 6px rgba(0, 0, 0 , .23);
}

#card a {
    width: 100%;
    padding: var(--padding-vert) 0;
    border-radius: 9px;
    background-color: rgba(var(--color-contrast), .13);
    box-shadow: 
        inset 0 3px 16px rgba(0, 0, 0, 0),
        0 1px 3px rgba(0, 0, 0, .12),
        0 1px 2px rgba(0, 0, 0, .24);
}

/* -- Media Queries -- */

@supports (not (backdrop-filter: saturate)) and (not (backdrop-filter: brightness)) {
    #card {
        background-color: rgba(var(--color-base), .2);
    }
}

@media (pointer: fine) {
    :is(#intro, #card) a {
        --transition-speed: 200ms;
        transition: var(--transition-speed) background-color, var(--transition-speed) box-shadow;
    }

    :is(#intro, #card) a:hover {
        background-color: rgba(var(--color-contrast), .2);
        box-shadow: 
            inset 0 3px 16px rgba(0, 0, 0, .16),
            0 3px 6px rgba(0, 0, 0, .16),
            0 3px 6px rgba(0, 0, 0, .23);
    }

    :is(#intro, #card) a:active {
        background-color: rgba(var(--color-contrast), .15);
    }
}

@media (min-aspect-ratio: 14/9) and (min-height: 450px) {
    body {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    body > div {
        display: grid;
        align-items: center;
    }

    body > div:last-of-type {
        padding: calc(var(--padding) * 2);
    }

    #intro a {
        width: unset;
    }

    #card {
        min-width: 300px;
    }
}