*{
    color: var(--text-2);
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

:root{
    font-size: 97%;
}

body {
    position: relative;
    background-color: var(--bg-1);

    font-family: "Inter", sans-serif;
    font-weight: 400;
    scrollbar-color: var(--grey-1) transparent;
    scrollbar-width: auto;

    min-height: 100dvh;
}


img {
    height: 1.25rem;
}

header{
    padding: 15px 20px 0 20px;
    width: 100%;
    display: flex;
    flex-direction: row;
    a{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;

        img{
            height: 1rem;
            display: block;
        }
        p{
            font-size: 0.9em;
            font-weight: 600;
            color: var(--text-1);
        }
    }
    >div#menu{
      margin-left: auto;
    }
}


.hide{
    display: none !important;
}



img.favorite{
    margin-right: 1.25rem;
    display: block;
    transition-duration: 0.2s;

    opacity: 0.3;

    &:hover,&.isfav{
        filter: var(--icon-brightness);
        opacity: 1;
    }
    &:hover{
        cursor: pointer;
    }
}


#menu{
    margin-left: 0;
    position: relative;

    &.focus {
        div.menu{
            display: flex !important;
        }
    }

    >img{
        margin-left: auto;
        transition: filter 0.3s;
        display: block;
        &:hover{
            cursor: pointer;
            filter: var(--icon-brightness);
        }
    }

    div.menu{
        display: none;
        position: absolute;
        top: 100%;
        right: 0px;
        flex-direction: column;
        width: max-content;
        background-color: var(--bg-popup-1);
        backdrop-filter: blur(20px);
        box-shadow: var(--shadow-popup);
        border: 0.02rem solid var(--border-1);
        padding: 0.4rem;
        border-radius: 0.7rem;
        z-index: 10;

        hr{
            border: none;
            height: 1px;
            background-color: var(--border-1);
            width: 90%;
            margin: 5px auto;
        }


        span{
            display: flex;
            flex-direction: row;
            min-width: fit-content;
            align-items: center;
            padding: 0.5rem 0.7rem;
            border-radius: 0.4rem;
            gap: 1rem;
            img{
                filter: var(--icon-brightness);
                height: 1.4rem;
                display: block;
            }
            &:hover{
                background-color: var(--bg-popup-2);
                cursor: pointer;
            }
        }
    }
}

html{
    scrollbar-width: none;
}

.pulse{
    animation: pulse 0.3s ease;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(0.8);}
    100% { transform: scale(1); }
}