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

@font-face {
    font-family: 'iconF';
    src: url(fonts/icon.ttf) format('truetype');
    font-variation-settings:
        'FILL' 0
}

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

.iconF {
    font-family: iconF;
}

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

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

.F {
    font-variation-settings:
        'FILL' 1
}

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

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

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

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




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

button:focus {
    color: #FF0000;
    font-variation-settings:
        'FILL' 1
}

a:focus {
    color: #FF0000;
}

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


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