/* Font: */
html {
    font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}


/*BUTTONS*/

/*Logo*/
.logo {
    font-weight: bold;
    color: white;
    font-size: 28px;
    font-weight: 500;
    text-decoration: none;
    margin: 5px;
}

/*Header*/
.header_2 a {
    cursor: default;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 0.5rem;
    transition: background 0.3s ease-in-out;
    font-weight: 500;
    text-decoration: none;
}
    .header_2 a:hover {
        background: rgba(255, 255, 255, 0.25);
    }
    .header_2 a:active {
        transform: scale(0.96);
    }



/**/

/* Animed */
.animated-button {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 0.5rem;
    font-weight: 500;
    
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

    .animated-button:hover {
        background: rgba(33, 150, 243, 0.35);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .animated-button span:first-child {
        position: relative;
        z-index: 3;
    }

    .animated-button::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        opacity: 0;
        z-index: 2;
        transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .animated-button:hover::after {
        width: 100px;
        height: 100px;
        opacity: 0.15;
    }

    .animated-button:active {
        transform: scale(0.97);
    }



/* Like Button */
/* From Uiverse.io by Yaya12085 */
/* Edited */

.ui-like {
    --icon-size: 24px;
    --icon-secondary-color: rgb(255, 255, 255);
    --icon-hover-color: rgb(211, 205, 205);
    --icon-primary-color: rgb(230, 26, 26);
    --icon-circle-border: 1px solid var(--icon-primary-color);
    --icon-circle-size: 35px;
    --icon-anmt-duration: 0.3s;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

    .ui-like .like {
        width: var(--icon-size);
        height: auto;
        fill: var(--icon-secondary-color);
        transition: 0.2s;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        transform-origin: center;
    }

.like::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    box-shadow: 0 30px 0 -4px var(--icon-primary-color), 30px 0 0 -4px var(--icon-primary-color), 0 -30px 0 -4px var(--icon-primary-color), -30px 0 0 -4px var(--icon-primary-color), -22px 22px 0 -4px var(--icon-primary-color), -22px -22px 0 -4px var(--icon-primary-color), 22px -22px 0 -4px var(--icon-primary-color), 22px 22px 0 -4px var(--icon-primary-color);
    border-radius: 50%;
    transform: scale(0);
}

.like::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: var(--icon-circle-border);
    opacity: 0;
}

.ui-like:hover .like {
    fill: var(--icon-hover-color);
}

.ui-like:active .like {
    fill: var(--icon-primary-color);
    animation: like var(--icon-anmt-duration) forwards;
}

    .ui-like:active .like::after {
        animation: circles var(--icon-anmt-duration) cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    .ui-like:active .like::before {
        animation: circle var(--icon-anmt-duration) cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

.ui-like:focus-visible .like {
    fill: var(--icon-primary-color);
}

/* Animations */
@keyframes like {
    50% {
        transform: scale(0.7);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes circle {
    from {
        width: 0;
        height: 0;
        opacity: 0;
    }

    90% {
        width: var(--icon-circle-size);
        height: var(--icon-circle-size);
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes circles {
    from {
        transform: scale(0);
    }

    40% {
        opacity: 1;
    }

    to {
        transform: scale(0.8);
        opacity: 0;
    }
}