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

* {
    background-color: #a69b8f;
}

#mousetrailer {
    height: 15px;
    width: 15px;
    /*
    background-image: url("cursor/cursorhand.png");
    */
    background: red;
    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 250 ms ease;
    transform: rotate(35deg);
}


body {
    height: 100vh;
    width: 100vw;
    margin: 0px;
    overflow: hidden;
    background-color: #a69b8f;

    font-family: 'sfpro_d', 'inter', Times, serif;
    font-size: 20pt;

    & :hover>#mousetrailer {
        opacity: 1;
    }
}

#background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: 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 vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite 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: 80px;
        font-family: 'sfpro_d', 'Times New Roman', Times, serif;
        color: rgba(255, 255, 255, 0.05);
    }

    &>.bg-shape {
        position: absolute;
        opacity: 0.15;

        &.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;
        }

        &:nth-child(11) {
            top: 8%;
            animation-delay: -2s;
            animation-duration: 23s;
        }

        &:nth-child(12) {
            top: 18%;
            animation-delay: -7s;
            animation-duration: 26s;
        }

        &:nth-child(13) {
            top: 28%;
            animation-delay: -13s;
            animation-duration: 24s;
        }

        &:nth-child(14) {
            top: 38%;
            animation-delay: -19s;
            animation-duration: 21s;
        }

        &:nth-child(15) {
            top: 48%;
            animation-delay: -4s;
            animation-duration: 25s;
        }

        &:nth-child(16) {
            top: 58%;
            animation-delay: -16s;
            animation-duration: 28s;
        }

        &:nth-child(17) {
            top: 68%;
            animation-delay: -9s;
            animation-duration: 22s;
        }

        &:nth-child(18) {
            top: 78%;
            animation-delay: -6s;
            animation-duration: 27s;
        }

        &:nth-child(19) {
            top: 88%;
            animation-delay: -11s;
            animation-duration: 20s;
        }

        &:nth-child(20) {
            top: 92%;
            animation-delay: -17s;
            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: 225px;
    height: 225px;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: border-radius 750ms ease-in-out, transform 300ms ease-in-out;
    border-radius: 6rem;

    &:hover {
        transform: scale(1.15);

        & > .shape-label {
            opacity: 1;
        }
    }

    & > .shape-label {
        font-family: 'sfpro_d', 'Times New Roman', Times, serif;
        font-size: 30px;
        text-align: center;
        opacity: 0;
        transition: opacity 300ms ease;
        pointer-events: none;
        color: #000000;
        background: none;
        background-color: transparent;
        animation: counter-rotate 8s linear infinite;
    }
}

.nav-shape:nth-child(3) {
    background-color: #D60270;
}

.nav-shape:nth-child(4) {
    background-color: #9B4F96;
}

.nav-shape:nth-child(5) {
    background-color: #0038A8;
}

.nav-shape:nth-child(6) {
    background-color: #069494;
}

.nav-shape:nth-child(7) {
    background-color: #940606;
}

#misc-shape {
    background-color: #940606;
}

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

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

.ved {
    padding: 100px;
} */



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;
}