@font-face {
    font-family: "sfpro_d";
    src: url(../../font/SF-Pro-Display-Medium.otf);
}

body {
    height: 100vh;
    width: 100vw;
    margin: 0px;
    overflow: hidden;
    background-color: #a69b8f;
    font-family: 'sfpro_d', 'inter', Times, serif;
    font-size: 20pt;
    cursor: none;
}

a:not(.nav-shape):not(.home-btn) {
    color: #000000;
}

#mousetrailer {
    height: 15px;
    width: 15px;
    background: black;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 10000;
    pointer-events: none;
    opacity: 1;
    transition: opacity 250ms ease;
    display: none;
}

#background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 11;
    pointer-events: none;
    background: none;

    & * {
        background: none;
    }

    &::before {
        content: 'vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite';
        position: absolute;
        top: 0;
        left: 0;
        width: 300%;
        height: 300%;
        font-size: clamp(30px, 8vw, 80px);
        font-family: 'sfpro_d', 'inter', Times, serif;
        color: rgba(255, 255, 255, 0.05);
    }

    & > .bg-shape {
        position: absolute;
        opacity: 0.25;
        will-change: transform;

        &.triangle {
            width: 0;
            height: 0;
            border-left: 40px solid transparent;
            border-right: 40px solid transparent;
            border-bottom: 70px solid #ffffff;
            animation: float-and-roll-left 20s linear infinite;
        }

        &.triangle-reverse {
            width: 0;
            height: 0;
            border-left: 40px solid transparent;
            border-right: 40px solid transparent;
            border-bottom: 70px solid #ffffff;
            animation: float-and-roll-right 20s linear infinite;
        }

        &:nth-child(1) { top: 5%; animation-delay: 0s; animation-duration: 22s; }
        &:nth-child(2) { top: 15%; animation-delay: -5s; animation-duration: 25s; }
        &:nth-child(3) { top: 25%; animation-delay: -10s; animation-duration: 28s; }
        &:nth-child(4) { top: 35%; animation-delay: -15s; animation-duration: 20s; }
        &:nth-child(5) { top: 45%; animation-delay: -8s; animation-duration: 24s; }
        &:nth-child(6) { top: 55%; animation-delay: -12s; animation-duration: 26s; }
        &:nth-child(7) { top: 65%; animation-delay: -18s; animation-duration: 23s; }
        &:nth-child(8) { top: 75%; animation-delay: -3s; animation-duration: 27s; }
        &:nth-child(9) { top: 85%; animation-delay: -20s; animation-duration: 21s; }
        &:nth-child(10) { top: 95%; animation-delay: -14s; animation-duration: 29s; }
    }
}

@keyframes float-and-roll-left {
    from { transform: translateX(-100px) rotate(0deg); }
    to { transform: translateX(calc(100vw + 100px)) rotate(-360deg); }
}

@keyframes float-and-roll-right {
    from { transform: translateX(calc(100vw + 100px)) rotate(0deg); }
    to { transform: translateX(-100px) rotate(360deg); }
}

.nav-shape {
    position: fixed;
    width: clamp(120px, 25vw, 225px);
    height: clamp(120px, 25vw, 225px);
    cursor: none;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12;
    transition: border-radius 200ms ease-in-out;
    border-radius: 6rem;
    overflow: hidden;
    opacity: 1;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    outline: none;

    &.expanding {
        z-index: 9999;
        border-radius: 0 !important;
    }

    & > .shape-label {
        font-family: 'sfpro_d', 'Times New Roman', Times, serif;
        font-size: clamp(18px, 3vw, 30px);
        text-align: center;
        opacity: 1;
        transition: opacity 300ms ease;
        pointer-events: none;
        color: #000000;
        background: none;
        background-color: transparent;
    }
}


@media (hover: hover) and (pointer: fine) {
    #mousetrailer {
        display: block;
    }
}

#about-shape { background-color: #cc0000; }
#projects-shape { background-color: rebeccapurple; }
#experience-shape { background-color: #D4A017; }
#misc-shape { background-color: #069494; }

.contact-icons img {
    width: 24px;
    height: 24px;
}

.welcome {
    height: 100px;
    display: flex;
    align-content: center;
    justify-content: center;
}

h1 {
    font-family: 'sfpro_d', 'Times New Roman', Times, serif;
    font-size: 40px;
    color: ivory;
    display: flex;
    align-content: center;
}

h2 {
    font-family: 'sfpro_d', 'Times New Roman', Times, serif;
    font-size: 30px;
    color: ivory;
    display: flex;
    align-content: center;
    padding-right: 50px;
}