@font-face {
    font-family: 'Arca_Majora_3';
    src: url("/assets/arcamajora3-bold-webfont.woff2") format('woff2'),
        url("/assets/arcamajora3-bold-webfont.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    --tint: #4683FF;
    --tint-secondary: #506AFE;

    --tint-transparent-50: rgba(70, 131, 255, 0.5);
    --tint-transparent-30: rgba(70, 131, 255, 0.3);
    --tint-transparent-10: rgba(70, 131, 255, 0.1);
    --tint-transparent-5: rgba(70, 131, 255, 0.05);

    --primary: black;
    --primary-background: white;

    --title-size: max(3.9vw, 54px);
    --logo-size: max(5vw, 69.3px);
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Arca_Majora_3', sans-serif;
    font-weight: normal;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    color: var(--primary);
    background-color: var(--primary-background);
}

main {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

a {
    text-decoration: none;
    color: var(--primary);
}

svg {
    overflow: visible;
}

img {
    pointer-events: none;
}

.header-background {
    pointer-events: none;
    position: fixed;
    top: calc(var(--logo-size) * -1.5);
    left: 0%;
    width: 100vw;
    height: calc(var(--logo-size) * 4);
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.013) 4.86%,
        rgba(255, 255, 255, 0.049) 9.3%,
        rgba(255, 255, 255, 0.104) 13.5%,
        rgba(255, 255, 255, 0.175) 17.4%,
        rgba(255, 255, 255, 0.259) 21.18%,
        rgba(255, 255, 255, 0.352) 24.72%,
        rgba(255, 255, 255, 0.45) 28.26%,
        rgba(255, 255, 255, 0.55) 31.74%,
        rgba(255, 255, 255, 0.648) 35.28%,
        rgba(255, 255, 255, 0.741) 38.82%,
        rgba(255, 255, 255, 0.825) 42.6%,
        rgba(255, 255, 255, 0.896) 46.5%,
        rgba(255, 255, 255, 0.951) 50.7%,
        rgba(255, 255, 255, 0.987) 55.14%,
        rgb(255, 255, 255) 60%
      );
    z-index: 1;
}

.logo-image-fixed {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    height: var(--logo-size);
    transform-origin: top;
    z-index: 1000;
}

.logo-fixed {
    position: fixed;
    top: calc(var(--logo-size) / 4);
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 1000;
}

.logo-link {
    display: flex;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform-origin: top;
    z-index: 1000;
    scale: 0.5;
}

.about-content-section {
    margin-top: calc(var(--logo-size));
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-avatar {
    width: calc(var(--title-size) * 2);
    margin-top: calc(var(--title-size) * 1.5);
    margin-bottom: calc(var(--title-size) * 1.5);
    
    animation: avatarAnimation 0.5s ease-in-out;
}

@keyframes avatarAnimation {
    0% {
        opacity: 0;
        scale: 0.8;
    }
    100% {
        opacity: 1;
        scale: 1;
    }
}

.about-intro {
    font-size: calc(var(--title-size) * 0.6);
    text-align: center;
    width: calc(100% - 40px);
    max-width: 60%;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: calc(var(--title-size) * 1.5);
    opacity: 0;
    transform: translateY(calc(var(--title-size) * 0.75));
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.about-intro-show {
    opacity: 1;
    transform: translateY(0px);
}

.send-email-icon {
    fill: var(--tint);
    margin: 0;
    margin-right: calc(var(--title-size) * 0.02);
    height: calc(var(--title-size) * 0.43);
}

.send-email-link {
    -webkit-tap-highlight-color: transparent;
}

.send-email-link:hover .send-email-icon {
    animation: sendEmailArrowAnimation 1.2s infinite ease-in-out;
}

@keyframes sendEmailArrowAnimation {
    10% {
        transform: translateY(0px);
        opacity: 1;
    }
    49% {
        transform: translateX(calc(var(--title-size) * 0.3)) translateY(calc(var(--title-size) * -0.3));
        opacity: 0;
    }
    51% {
        transform: translateX(calc(var(--title-size) * -0.3)) translateY(calc(var(--title-size) * 0.3));
        opacity: 0;
    }
    90% {
        transform: translateY(0px);
        opacity: 1;
    }
}

.text-highlight {
    background: linear-gradient(45deg, var(--tint-secondary), var(--tint));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer {
    width: 100%;
    max-width: 60%;
    padding-bottom: calc(var(--title-size) * 0.3);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.footer-links {
    display: flex;
    flex-direction: column;
    opacity: 0;
    padding-bottom: calc(var(--title-size) * 0.1);
    transition: opacity 0.5s ease-in-out;
}

.footer-show .footer-links {
    opacity: 1;
}

.footer-link, .footer-copyright {
    position: relative;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    font-size: max(calc(var(--title-size) * 0.27), 14px);
    font-weight: normal;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: left;
    padding-top: calc(var(--title-size) * 0.1);
    padding-bottom: calc(var(--title-size) * 0.1);
    color: var(--primary);
    opacity: 0.3;
    transition: opacity 0.25s ease-in-out;
}

.footer-link:hover {
    opacity: 0.5;
}

.footer-link::before {
    content: "";
    position: absolute;
    background-color: var(--primary);
    width: calc(var(--title-size) * 0.06);
    height: calc(var(--title-size) * 0.06);
    top: 50%;
    left: calc(var(--title-size) * -0.4);
    transform: translateY(-50%);
    border-radius: 50%;
    opacity: 0;
    transition: 0.25s ease-in-out;
}

.footer-link:hover::before {
    left: calc(var(--title-size) * -0.2);
    opacity: 1;
}

.footer-copyright {
    padding-top: calc(var(--title-size) * 0.2);
    padding-bottom: 0%;
    opacity: 1;
}

.footer-logo-wrapper {
    display: flex;
}

.footer-logo-link {
    display: flex;
    -webkit-tap-highlight-color: transparent;
}

.footer-logo, .footer-logo-mobile {
    width: 100%;
    max-width: calc(var(--title-size) * 3.1323773603);
    fill: var(--primary);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.footer-logo-mobile {
    display: none;
    max-width: calc(var(--title-size) * 0.9 * 0.6128588708);
}

.footer-show .footer-logo, .footer-show .footer-logo-mobile {
    opacity: 0.15;
}

@media screen and (max-width: 1000px) {
    :root {
        --title-size: 52.5px;
        --logo-size: 67.375px;
    }

    .about-intro {
        max-width: 600px;
    }

    .footer {
        width: calc(100% - var(--title-size) * 0.8);
        max-width: 600px;
        padding-left: calc(var(--title-size) * 0.4);
        padding-right: calc(var(--title-size) * 0.4);
    }
}

@media screen and (max-width: 900px) {
    :root {
        --title-size: 51px;
        --logo-size: 65.45px;
    }
}

@media screen and (max-width: 800px) {
    :root {
        --title-size: 49.5px;
        --logo-size: 63.525px;
    }
}

@media screen and (max-width: 700px) {
    :root {
        --title-size: 48px;
        --logo-size: 61.6px;
    }
}

@media screen and (max-width: 500px) {
    .footer-logo-wrapper {
        padding-bottom: calc(var(--title-size) * 0.1);
    }

    .footer-logo {
        display: none;
    }

    .footer-logo-mobile {
        display: flex;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --tint-transparent-50: rgba(70, 131, 255, 0.6);
        --tint-transparent-30: rgba(70, 131, 255, 0.4);
        --tint-transparent-10: rgba(70, 131, 255, 0.2);
        --tint-transparent-5: rgba(70, 131, 255, 0.08);

        --primary: white;
        --primary-background: rgb(20, 20, 21);
    }

    .header-background {
        background: linear-gradient(
            to top,
            rgba(20, 20, 21, 0) 0%,
            rgba(20, 20, 21, 0.013) 4.86%,
            rgba(20, 20, 21, 0.049) 9.3%,
            rgba(20, 20, 21, 0.104) 13.5%,
            rgba(20, 20, 21, 0.175) 17.4%,
            rgba(20, 20, 21, 0.259) 21.18%,
            rgba(20, 20, 21, 0.352) 24.72%,
            rgba(20, 20, 21, 0.45) 28.26%,
            rgba(20, 20, 21, 0.55) 31.74%,
            rgba(20, 20, 21, 0.648) 35.28%,
            rgba(20, 20, 21, 0.741) 38.82%,
            rgba(20, 20, 21, 0.825) 42.6%,
            rgba(20, 20, 21, 0.896) 46.5%,
            rgba(20, 20, 21, 0.951) 50.7%,
            rgba(20, 20, 21, 0.987) 55.14%,
            rgb(20, 20, 21) 60%
          );
    }
}