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

    --padding: clamp(40px, 2vw, 2vw);
    --border-size: clamp(4px, .25vw, .25vw);
}

/* -- 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;
}

html {
    background-color: rgba(var(--color-base), .7);
    background-size: cover;
    background-blend-mode: overlay;
    background-position: center;
    background-attachment: fixed;
}

picture {
    display: contents;
}

h1 {
    font-size: clamp(45px, 7vw, 6vh);
}

p, a {
    font-size: clamp(20px, 3vw, 2vh);
    text-align: justify;
}

/* -- Components -- */

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

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

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

    display: inline-block;
    text-decoration: none;
    text-align: center;
    user-select: none;
    background-color: rgba(var(--color-contrast), .13);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: 
        inset 0 .3vh 1.6vh rgba(0, 0, 0, 0),
        0 .1vh .3vh rgba(0, 0, 0, .12),
        0 .1vh .2vh rgba(0, 0, 0, .24);
}

/* --- */

#intro {
    padding: calc(var(--padding) / 2);
}

#intro a {
    padding: var(--padding-vert) 2vw;
    border-radius: 100px;
    border: solid var(--border-size) rgba(var(--color-contrast), 0);
    margin: var(--padding) 0;
    width: calc(100% - ((var(--padding) / 2) + var(--border-size)));
}

#intro p {
    margin: 1vh 0;
    font-size: clamp(20px, 3vw, 3vh);
}

/* --- */

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

#card {
    --portrait-size: clamp(128px, 12vw, 12vh);

    position: relative;
    max-width: 600px;
    padding: var(--padding);
    border-radius: clamp(18px, 1vw, 1vw);
    backdrop-filter: saturate(100) brightness(.4);
    -webkit-backdrop-filter: saturate(100) brightness(.4);
    border: solid var(--border-size) rgba(var(--color-contrast), .1);
    box-shadow:  0 1vh 2vh 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) + var(--border-size)) * -1);
    background-color: rgb(var(--color-base));
    box-shadow: 0 1vh 2vh rgba(0, 0, 0 , .19), 0 6px 6px rgba(0, 0, 0 , .23);
}

#card a {
    width: 100%;
    padding: var(--padding-vert) 0;
    margin-top: calc(var(--padding) / 2);
    border-radius: clamp(9px, .5vw, .5vw);
}

/* -- Media Queries -- */

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

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

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

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

@media (max-width: 330px) {
    p, a {
        text-align: left;
        font-size: 18px;
    }

    #card {
        padding: calc(var(--padding) / 2);
    }
}

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

    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;
        max-width: 30vw;
    }
}