body::-webkit-scrollbar {
    width: 7px;
}
 
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #cc0e3e4f;
}
 
body::-webkit-scrollbar-thumb {
  background-color: #cc0e3e;
  outline: 1px solid #cc0e3e;
}

@keyframes blink {
    50% {
        opacity: 0.0;
    }
}

@-webkit-keyframes blink {
    50% {
        opacity: 0.0;
    }
}

.hero .typed-cursor {
    color: #fff;
    margin-left: 20px;
    font-size: xxx-large;
    opacity: 1;
    padding: 0 2px;
    animation: blink 1s step-start 0s infinite;
    -webkit-animation: blink 1s step-start 0s infinite;
}

.spinner {
    display: grid;
    place-items: center;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: conic-gradient(from 180deg at 50% 50%,
            rgba(82, 0, 255, 0) 0deg,
            #5200ff 360deg);
    animation: spin 2s infinite linear;
}

.spinner::before {
    content: "";
    border-radius: 50%;
    width: 80%;
    height: 80%;
    background-color: #000;
}

@keyframes spin {
    to {
        transform: rotate(1turn);
    }
}


.scrollDown {
    transform: translateY(0%) rotate(45deg);
    opacity: 0;
}

@keyframes scrolldown {
    0% {
        transform: translateY(20%) rotate(45deg);
        opacity: 0.7;
    }

    50% {
        transform: translateY(0%) rotate(45deg);
        opacity: 0.2;
    }

    100% {
        transform: translateY(20%) rotate(45deg);
        opacity: 0.7;
    }
}