@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: 'Inter';
    src: url(fonts/Inter.ttf) format('truetype');
}

.iconF {
    font-family: iconF;
}

html {
    font-family: Inter;
    font-size: 12px;
}

/* 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: #EE4950;
    border-radius: 10px;
}

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

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

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

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

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

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


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