/******** Colours ********/
:root {
    color-scheme: dark light;
}

@media (prefers-color-scheme: light) {
    * {
        --col-bg: #f6edda;
        --col-fg: #0e232d;
        --col-accent: #669BBC;
        --col-hl: #6018c4;
    }

    .icon-light {
        -webkit-filter: invert();
        filter: invert();
    }


    @supports(mix-blend-mode: multiply) {
        a:has(.icon)::after {
            mix-blend-mode: screen;
        }
    }
}

@media (prefers-color-scheme: dark) {
    * {
        --col-bg: #030d12;
        --col-fg: #fcf7ec;
        --col-accent: #669BBC;
        --col-hl: #6018c4;
    }

    .icon-dark {
        -webkit-filter: invert();
        filter: invert();
    }

    @supports(mix-blend-mode: multiply) {
        a:has(.icon)::after {
            mix-blend-mode: multiply;
        }
    }
}

/******** end colours ********/

/******** Constants ********/
* {
    --font-heading: 'Tomorrow', sans-serif;
    --font-body: 'Roboto Serif', serif;

    --border-radius: 20px;
    --page-margin: max(20px, 5vw);

    --font-size-text: 1rem;
    --font-size-h1: 4rem;
    --font-size-h2: calc(var(--font-size-h1) * 0.8);
    --font-size-h3: calc(var(--font-size-h1) * 0.7);
    --font-size-h4: calc(var(--font-size-h1) * 0.6);
    --font-size-h5: calc(var(--font-size-h1) * 0.5);
    --font-size-h6: calc(var(--font-size-h1) * 0.4);

    --icon-height: 40px;

    --icon-transition: transform cubic-bezier(.2, .6, .35, 1) 0.125s;
    --icon-hover-scale: 1.25;
}

/******** end constants ********/

/******** GENERAL STYLING ********/
body {
    margin: 0;
    padding: 0;
    background-color: var(--col-bg);
    color: var(--col-fg);
}

#main-content {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 500;
}

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
}

h3 {
    font-size: var(--font-size-h3);
}

h4 {
    font-size: var(--font-size-h4);
}

h5 {
    font-size: var(--font-size-h5);
}

h6 {
    font-size: var(--font-size-h6);
}

p,
span {
    font-family: var(--font-body);
}

.icon {
    height: var(--icon-height);
    object-fit: contain;

    cursor: pointer;

    transform: scale(1);
    transition: var(--icon-transition);
}

.icon:hover {
    transform: scale(var(--icon-hover-scale));
}

@supports(mix-blend-mode: multiply) {
    a:has(.icon)::after {
        content: '';

        pointer-events: none;
        /* make clicks and hovers visible to lower layers */

        display: block;
        position: relative;

        height: var(--icon-height);
        width: 100%;

        margin-top: calc(-1 * var(--icon-height));
        z-index: 10;
        background-color: var(--col-fg);
        transform: scale(var(--icon-hover-scale));
    }

}

/******** end general styling ********/


/* Specific styling */

#business-card-wrapper {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    gap: 5vw;
}

#name {
    line-height: 1;
    margin-bottom: 25px;
    filter: drop-shadow(0 3px 6px var(--col-accent))
}

.socials-list {
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
}

#personal-photo-wrapper {
    width: 350px;
}

#personal-photo-wrapper img {
    object-fit: contain;

    border-radius: var(--border-radius);

    filter: drop-shadow(0 4px 10px var(--col-accent))
}




/******* Adjustments for mobile ********/
@media (max-width: 1000px) {
    * {
        --font-size-h1: 6rem;
        --font-size-text: 1.5rem;
        --icon-height: 50px;
    }

    #business-card-wrapper {
        flex-direction: column;
    }

    #name {
        text-align: center;
    }

    .socials-list {
        justify-content: center;
    }
}

/******** end mobile adjustments ********/