/* ==== CSS VARIABLES ==== */
:root {
    --primary-color: rgb(121, 6, 230);
    --link-color: #00d9ff;
    --btn-hover-color: #7c07e9;
    --lg-heading: #61d0ec;
    --text-content: rgb(255, 255, 255);
    --fixed-header-height: 3.5rem;
}

@media (min-width: 768px) {
    .router-link-active {
        color: rgb(59 130 246 / 1);
    }
}

html::-webkit-scrollbar {
    width: 8px;
}

html::-webkit-scrollbar-track {
    background-color: black;
}

html::-webkit-scrollbar-thumb {
    background: var(--link-color);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--lg-heading);
}

svg {
    width: 30px;
    height: 30px;
    color: #956bd8;
}

/* ==== RESET HTML ==== */
body {
    font-family: 'Poppins';
    overflow-x: hidden;
    background-color: #000000;
    color: var(--link-color);
}

p {
    line-height: 1.8;
}