:root {

    --background: #e8e5dd;
    --card: #faf9f6;

    --text: #161616;
    --accent: #405f8f;

}


* {
    box-sizing: border-box;
}


body {

    margin: 0;

    min-height: 100vh;

    background: #e8e5dd;

    color: var(--text);

    font-family: "Inter", sans-serif;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 40px;

}



/* Business card */

.card {

    width: min(90vw, 560px);

    aspect-ratio: 1.75 / 1;

    padding: 55px 65px;


    background: var(--card);


    border-radius: 12px;


    border: 1px solid rgba(0,0,0,0.12);


    box-shadow:

        0 18px 40px rgba(0,0,0,0.12),

        inset 0 0 0 1px rgba(255,255,255,0.65);


    display: flex;

    flex-direction: column;

    justify-content: center;


    animation: appear 0.8s ease-out;

}



/* Name */

h1 {

    margin: 0 0 45px 0;


    font-size: clamp(2.5rem, 7vw, 4rem);


    font-weight: 300;


    letter-spacing: -0.065em;

}



/* Links */

nav {

    display: flex;

    flex-direction: column;

    gap: 18px;

}


a {

    width: fit-content;


    color: var(--text);


    text-decoration: none;


    font-size: 1.05rem;


    font-weight: 300;


    position: relative;


    transition:

        color 0.25s ease,

        transform 0.25s ease;

}



/* Underline animation */

a::after {

    content: "";

    position: absolute;


    left: 0;

    bottom: -5px;


    height: 1px;


    width: 0;


    background: var(--accent);


    transition: width 0.25s ease;

}



a:hover {

    color: var(--accent);

    transform: translateX(5px);

}


a:hover::after {

    width: 100%;

}



/* Entrance animation */

@keyframes appear {

    from {

        opacity: 0;

        transform: translateY(12px);

    }


    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Dark mode */

@media (prefers-color-scheme: dark) {


    :root {

        --background: #111111;

        --card: #1b1b1b;

        --text: #eeeeee;

        --accent: #9bb4df;

    }


    body {

        background: #111111;

    }


    .card {

        border-color: rgba(255,255,255,0.12);

    }

}