@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap');

:root{
    --orange:#ff9500;
    --white-color:#fff;
    --black-color:#333;
    --light-color:rgba(0,0,0,.3);
}

*{
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0 ;
    outline: none;
    border: none;
    text-decoration: none;
    text-transform: capitalize;
    transition:.2s linear;
}

html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-padding-top: 7.5rem;
    scroll-behavior: smooth;

}

html::-webkit-scrollbar{
    width: 1rem;
}

html::-webkit-scrollbar-track{
    background-color: var(--white-color);
}

html::-webkit-scrollbar-thumb{
    background: var(--black-color);
    border-radius:5rem;
}

body{
    background: #eee;
}

body.active{
    --white-color:#111;
    --black-color:#fff;
    --light-color:rgba(255,255,255,.3);
    background:#222;
}