@import url('https://fonts.googleapis.com/css2?family=Basic&family=Bebas+Neue&display=swap');

:root{
    --bg: #fff;
    --hl_fg: #E72E87;
    --fg: #2C2C2C;
}


*{
    outline: none;
    margin: 0;
    padding: 0;

    scrollbar-color: var(--fg) var(--bg);

    font-family: "Basic";
}

html{
    width: 100%;
    height: 100%;
    min-width:fit-content;
}

body{
    width: 100%;
    height: 100%;
}

a{
    color: var(--fg);
    text-decoration: none;
    transition-property: color, text-decoration;
    transition-duration: 0.4s;
    text-decoration: none;

}

a:hover{
    transition-property: color, text-decoration;
    transition-duration: 0.4s;
    color: var(--hl_fg);
    text-decoration: underline;
    text-decoration: none;
}

#site_content{
    margin-top: 70px;
    width: 100%;
    height: 100%;
}

#cart_counter_display{
    font-size: 14pt;
    width: 15pt;
    height: 15pt;
    color: var(--bg);
    position: absolute;
    transform: translate(18pt, -14pt);
    background: var(--hl_fg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
}

*::-webkit-scrollbar {
    width: 15px;

}

/* Track */
*::-webkit-scrollbar-track {
    background: transparent;

}

/* Handle */
*::-webkit-scrollbar-thumb {
    transition: all 0.2s;
    
    padding: 2px;
    background: #424242;
}

/* Handle on hover */
*::-webkit-scrollbar-thumb:hover {
    transition: all 0.2s;
    background: var(--fg);

}