style.css

@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(assets/roboto-condensed-300-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    background: linear-gradient(to top right, #4BC0C8, #C779D0, #FEAC5E);
    font-family: 'Roboto Condensed', sans-serif;
    color: #333333;

    display: flex;
    align-items: center;
    justify-content: center;
}

#wrapper {
    width: 500px;
    max-width: 90%;
    margin: 20px 0;

    /* Flip animation */
    perspective: 1000px;
}

#card {
    position: relative;
    --v-padding: 30px;
    --h-padding: 8%;
    --section-gap: 40px;
    padding: var(--v-padding) var(--h-padding);
    border-radius: 20px;
    box-shadow: 0 1.5rem 2.5rem 0.5rem #00000020;
    background: linear-gradient(30deg, #FFFFFF50 10%, white 50%);

    /* Flip animation */
    transition: transform 1s;
    transform-style: preserve-3d;
}

/* CARD FRONT */

#front {
    /* Initialise render, otherwise:
     * Breaks positioning of button.flip
     * Also breaks backface-visibility in FF
     */
    transform: scale(1);

    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

#profile {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#headshot {
    width: 200px;
    max-width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    margin-bottom: 15px;
}

h1 {
    font-size: min(2rem, 8.8vw);
}

#tagline {
    font-size: min(1.5rem, 6.6vw);
}

#profile::after {
    content: "";
    position: relative;
    top: calc(var(--section-gap) / 2);
    width: 100%;
    border-bottom: 1px solid #00000050;
}

#social-links {
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
}

#social-links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;

    background: #00000030;
    opacity: 60%;
    transition: 0.25s ease;

    display: flex;
    justify-content: center;
    align-items: center;
}

#social-links a:hover {
    opacity: 80%;
}

#social-links svg {
    opacity: 70%;
    width: 60%;
    height: 60%;
}

/* CARD BACK */

#back {
    /* Mimic same position as #front but as 'absolute' */
    position: absolute;
    top: var(--v-padding);
    right: var(--h-padding);
    width: calc(100% - 2 * var(--h-padding));
    transform: rotateY(180deg);
}

#projects {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--section-gap);
}

.heading {
    width: 100%;
}

.heading > h1 {
    text-align: center;
}

.heading::after {
    position: relative;
    display: block;
    top: calc(var(--section-gap) / 2);
    content: "";
    border-bottom: 1px solid #00000050;
}

p {
    font-size: min(1rem, 4.4vw);
}

/* FLIP FEATURE */

#front, #back {
    backface-visibility: hidden;
}

button.flip {
    position: absolute;
    top: 0;
    right: 0;

    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: none;
    opacity: 40%;

    display: flex;
    justify-content: center;
    align-items: center;
}

button.flip:hover {
    opacity: 60%;
}

.flip svg {
    width: 75%;
    height: 75%;
}

/* DARK MODE */

@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(to right top, rgb(45, 141, 147), rgb(110, 41, 118), rgb(147, 72, 1));
        color: rgb(200, 195, 188);
    }

    #card {
        background: linear-gradient(30deg, #18181890 10%, #181818 50%);
        box-shadow: 0 1.5rem 2.5rem 0.5rem #00000040;
    }

    #social-links a {
        background: #FFFFFF20;
    }

    /* Firefox requires explicit selection of 'svg use' */
    svg path, svg use {
        fill: white;
    }

    #profile::after, .heading::after {
        border-bottom-color: #FFFFFF50;
    }
}