:root {
    --animation-ease: ease;
    --button-effect-duration: 200ms;
    --layout-animation-duration: 500ms;
    --button-border-top: 3px;
    --button-border-bottom: -3px;
    --button-border-radius: 24px;

    --color-linkedin: #0a66c2;
    --color-dribbble: #ea4c89;

    --color-button-active: #EEE;
    --color-background: #FCFCFC;
    --color-button-default: #F9F9F9;
    --color-button-hover: #FFF;

    --color-accent: #111;
    --color-title: #222;
    --color-subtitle: #777;
    --color-text: #444;

    --shadow-default:
        inset 0px -1px 0px 0px rgba(0, 0, 0, .2),
        inset 0px 0px 0px 1px rgba(255, 255, 255, 1),
        0px 0px 0px 1px rgba(0, 0, 0, .08),
        0px 1px 2px 1px rgba(0, 0, 0, .05),
        0px 0px 0px rgba(0, 0, 0, 0),
        inset 0px 1px 3px 1px rgba(0, 0, 0, 0);
    --shadow-hover:
        inset 0px -3px 0px 0px rgba(0, 0, 0, .1),
        inset 0px -1px 0px 1px rgba(255, 255, 255, 1),
        0px 1px 0px 1px rgba(0, 0, 0, .15),
        0px 1px 3px 1px rgba(0, 0, 0, .15),
        0px 7px 6px rgba(0, 0, 0, .15),
        inset 0px 1px 3px 1px rgba(0, 0, 0, 0);
    --shadow-active:
        inset 0px 3px 0px 0px rgba(0, 0, 0, .1),
        inset 0px -1px 0px 0px rgba(255, 255, 255, .4),
        0px 0px 0px 1px rgba(0, 0, 0, 0.1),
        0px 0px 0px 1px rgba(0, 0, 0, 0),
        0px 0px 0px rgba(0, 0, 0, 0),
        inset 0px 1px 2px 1px rgba(0, 0, 0, .4);

    --image-background-left: url("../assets/background-left.png");
    --image-background-right: url("../assets/background-right.png");
    --background-blend-mode: multiply;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    :root {
        --image-background-left: url("../assets/background-left@2x.png");
        --image-background-right: url("../assets/background-right@2x.png");
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-linkedin: #1470CC;
        --color-dribbble: #E0427F;

        --color-button-active: #0F0F0F;
        --color-background: #131313;
        --color-button-default: #161616;
        --color-button-hover: #202020;

        --color-accent: #EEE;
        --color-title: #DEDEDE;
        --color-subtitle: #808080;
        --color-text: #DDD;

        --shadow-default:
            inset 0px -1px 0px 0px rgba(0, 0, 0, .8),
            inset 0px 0px 0px 1px rgba(255, 255, 255, .1),
            0px 0px 0px 1px rgba(0, 0, 0, .8),
            0px 1px 2px 1px rgba(0, 0, 0, .5),
            0px 0px 0px rgba(0, 0, 0, 0),
            inset 0px 1px 3px 1px rgba(0, 0, 0, 0);
        --shadow-hover:
            inset 0px -3px 0px 0px rgba(0, 0, 0, .5),
            inset 0px -1px 0px 1px rgba(255, 255, 255, .03),
            0px 1px 0px 1px rgba(0, 0, 0, .8),
            0px 1px 3px 1px rgba(0, 0, 0, 1),
            0px 7px 6px rgba(0, 0, 0, .4),
            inset 0px 1px 3px 1px rgba(0, 0, 0, 0);
        --shadow-active:
            inset 0px 3px 0px 0px rgba(0, 0, 0, .8),
            inset 0px -1px 0px 0px rgba(255, 255, 255, .1),
            0px 0px 0px 1px rgba(0, 0, 0, 0.2),
            0px 0px 0px 1px rgba(0, 0, 0, 0),
            0px 0px 0px rgba(0, 0, 0, 0),
            inset 0px 1px 2px 1px rgba(0, 0, 0, .8);

        --image-background-left: url("../assets/background-left-dark.png");
        --image-background-right: url("../assets/background-right-dark.png");
        --background-blend-mode: lighten;
    }

    @media (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 192dpi) {
        :root {
            --image-background-left: url("../assets/background-left-dark@2x.png");
            --image-background-right: url("../assets/background-right-dark@2x.png");
        }
    }
}

@font-face {
    font-family: "CustomFontMedium";
    src:
        local("CustomFontMedium"),
        url("../assets/custom-font-medium.woff2") format("woff");
}

@font-face {
    font-family: "CustomFontRegular";
    src:
        local("CustomFontRegular"),
        url("../assets/custom-font-regular.woff2") format("woff");
}

@keyframes moveUpward {
    from {
        opacity: 0;
        transform: translateY(32px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes moveDownward {
    from {
        opacity: 0;
        transform: translateY(-32px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-blend-mode: var(--background-blend-mode);
    background-color: var(--color-background);
    background-repeat: no-repeat;
    background-image: var(--image-background-left), var(--image-background-right);
    background-position: top left, bottom right;
    background-size: 288px 480px;
    -webkit-tap-highlight-color: transparent;
}

main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.layout {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: 0 0 32px 0;
}

.header-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-container svg {
    display: none;
    animation: moveDownward var(--layout-animation-duration) var(--animation-ease) 350ms;
    animation-fill-mode: both;
    margin-bottom: 16px;
    fill: var(--color-subtitle);
}

.header-container h1 {
    animation: moveDownward var(--layout-animation-duration) var(--animation-ease) 300ms;
    animation-fill-mode: both;
}

.header-container h2 {
    animation: moveDownward var(--layout-animation-duration) var(--animation-ease) 250ms;
    animation-fill-mode: both;
}

.buttons-container {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: center;
}

.buttons-container div:nth-child(1) {
    animation-delay: 600ms;
    z-index: 3;
}

.buttons-container div:nth-child(2) {
    animation-delay: 650ms;
    z-index: 2;
}

h1 {
    font-family: 'CustomFontMedium', arial, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 25px;
    line-height: 30px;
    margin-block: auto;
    color: var(--color-title);
}

h2 {
    font-family: 'CustomFontMedium', arial, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 17px;
    line-height: 28px;
    margin-block: auto;
    color: var(--color-subtitle);
}

.button {
    animation: moveUpward var(--layout-animation-duration) var(--animation-ease);
    animation-fill-mode: both;
    transition: background-color, box-shadow, border-top, border-bottom;
    transition-duration: var(--button-effect-duration);
    transition-timing-function: var(--animation-ease);
    align-self: stretch;
    border-radius: var(--button-border-radius);
    background-color: var(--color-button-default);
    box-shadow: var(--shadow-default);
}

.button:hover {
    background-color: var(--color-button-hover);
    box-shadow: var(--shadow-hover);
}

.button:active {
    background-color: var(--color-button-active);
    box-shadow: var(--shadow-active);
}

.button a {
    transition: color, padding;
    transition-duration: var(--button-effect-duration);
    transition-timing-function: var(--animation-ease);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 15.5px;
    font-weight: 500;
    font-family: 'CustomFontMedium', arial, sans-serif;
    font-style: normal;
    line-height: 20px;
    text-decoration: none;
    color: var(--color-text);
    padding: 10px 20px 10px 20px;
}

.button a:hover {
    padding: 9px 20px 11px 20px;
    color: var(--color-title);
}

.button a:active {
    padding: 11px 20px 9px 20px;
    color: var(--color-subtitle);
}

.button a svg {
    transition: fill;
    transition-duration: var(--button-effect-duration);
    transition-timing-function: var(--animation-ease);
    fill: var(--color-subtitle);
}

.buttons-container div:nth-child(1) a:hover svg {
    fill: var(--color-dribbble);
}

.buttons-container div:nth-child(2) a:hover svg {
    fill: var(--color-linkedin);
}

.buttons-container div:nth-child(1) a:active svg {
    fill: var(--color-subtitle);
}

.buttons-container div:nth-child(2) a:active svg {
    fill: var(--color-subtitle);
}

/*Overrides if a touchscreen is detected*/
@media (pointer:coarse) {
    .button {
        background-color: var(--color-button-hover);
        box-shadow: var(--shadow-hover);
    }

    .button a {
        padding: 9px 20px 11px 20px;
        color: var(--color-title);
    }

    .buttons-container div:nth-child(1) a svg {
        fill: var(--color-dribbble);
    }

    .buttons-container div:nth-child(2) a svg {
        fill: var(--color-linkedin);
    }
}

.prevent-select {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}