:root {
    font-size: 10px;
    
    /* Typography */
    --overline: 1.8rem;
    --smallPara: 2rem;
    --navDropdown: 16rem;
    --followType: 1.2rem;

    --black: rgb(27, 28, 28);
    --white: rgb(255, 255, 255);
    --grey: rgb(131, 131, 131);
}

.underline::before {
    background-color: var(--white);
}

.underlineBlack::before {
    background-color: var(--black);
}


.underline::before, .underlineBlack::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: opacity .25s ease-in-out;
}
  
.underline:hover::before, .underlineBlack:hover::before {
    opacity: 1;
}


.cursorText {
    color: var(--white);
    text-decoration: none;
    user-select: none;
    z-index: 997;
    position: absolute;
    font-size: var(--followType);
    font-family: 'tt-commons-pro', sans-serif;
    font-weight: 300;
    font-style: normal;
    white-space: nowrap;
    will-change: transform;
    pointer-events: none;
    transition: opacity 0.25s ease;
    padding: 0.75em 1.5em;
    /* border-radius: 100em;
    backdrop-filter: blur(150px); */
}



@media screen and (max-width: 100em) {
    :root {
        --navDropdown: 12rem;

    }
}


@media screen and (max-width: 80em) {
    :root {
        --navDropdown: 8rem;
    }
}