@font-face {
    font-family: 'material symbols outlined';
    src: url(fonts/icon.ttf) format('truetype');
}

@font-face {
    font-family: 'Barlow';
    src: url(fonts/Barlow-Regular.ttf) format('truetype');
}

.Bdark {
    background-color: #020617;
    color: #cbd5e1;
}

.Bwhite {
    color: #020617;
    background-color: #cbd5e1;
}


body {
    font-family: Barlow, sans-serif;
    font-size: 14px;
}

.icon {
    font-family: material symbols outlined;
    font-size: 1.2rem;
    padding: 0 0.3rem;
    font-variation-settings:
        'FILL' 0
}


.F,
.fav:focus {

    font-variation-settings:
        'FILL' 1
}

/* width */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #ffffff8e;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #878787;
}




.Fav {
    color: #EE4950;
    font-variation-settings:
        'FILL' 1
}

.heart:focus {
    color: #EE4950;
    font-variation-settings:
        'FILL' 1
}

.cat {
    text-shadow: 0px 2px 8px #000000;
}


.shad {
    box-shadow: 0px 5px 20Px #00000080;
}