@import url('https://fonts.googleapis.com/css2?family=Clicker+Script&family=Poppins:wght@200;300;400;500;600;700&display=swap');

:root {
    /* Em construção
    --bg-black-900: #151515;
    --bg-black-100: #222;
    --bg-black-50: #393939;
    --text-black-900: #FFF;
    --text-black-700: #E9E9E9E9;
    */
    /*--------------*/

    --bg-black-900: #312E38; /* background */
    --bg-black-100: #28262E; /*black-medium*/
    --bg-black-50: #393939;
    --text-black-900: #FFF;
    --text-black-700: #E9E9E9E9;

    --bg-input: #232129;
    --bg-shape: #3E3B47;
}

body.light {
    /* Em construção */
    /*
    --bg-black-900: #f2f2fc;
    --bg-black-100: #fdf9ff;
    --bg-black-50: #e8dfec;
    --text-black-900: #302e4d;
    --text-black-700: #504e70;

    --bg-input:#fdf9ff;
    --bg-shape: #fdf9ff; 
    */
    /*--------------*/

    /* Light Mode */
    /*
    --bg-black-900: #F7F7FA; 
    --bg-black-100: #E9E9EF; 
    --bg-black-50: #E1E1E6;
    --text-black-900: #1C1C1C; 
    --text-black-700: #3A3A3A; 

    --bg-input: #F0F0F5; 
    --bg-shape: #DADADA; 
    */
    /*--------------*/

    --bg-black-900: #f2f2fc; 
    --bg-black-100: #E9E9EF; 
    --bg-black-50: #C0C0C0; 
    --text-black-900: #312E38; 
    --text-black-700: #4A4A4A; 

    --bg-input: #FFFFFF; 
    --bg-shape: #fff; 
}

* {
    margin: 0;
    padding: 0;
    outline: none;
    text-decoration: none;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}   

body {    
    line-height: 1.5;
    font-size: 1.6rem;
    font-family: 'Poppins', sans-serif;
    height: 100vh;
}

::before, ::after {
    box-sizing: border-box;
}

ul {
    list-style: none;
}

::-webkit-scrollbar {
    width: 1.2rem;
}

::-webkit-scrollbar-track {
    background-color: var(--bg-black-900);
}

::-webkit-scrollbar-thumb {
    background-color: var(--skin-color);
    border: .3rem solid var(--bg-black-900); 
    border-radius: 1rem;
}