.btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .6em;
    font-family: var(--font-pixel);
    font-size: clamp(16px, 1.6vw, 20px);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 15px;
    border: 3px solid var(--color-black);
    background: var(--color-grey);
    color: var(--color-black);
    box-shadow: 4px 4px 0 red;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s, color 0.2s;
}
.btn:hover {
    transform: translate(-1px,-1px);
    box-shadow: 5px 5px 0 red;
}
.btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 red;
}

.btn.grey-yellow {
    color: var(--color-yellow);
    background-color: var(--color-grey);
    box-shadow: 4px 4px 0 var(--color-yellow);
}
.btn.grey-yellow:hover {
    transform: translate(-1px,-1px);
    box-shadow: 5px 5px 0 var(--color-yellow);
}
.btn.grey-yellow:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--color-yellow);
}

.btn.yellow-grey {
    background-color: var(--color-yellow);
    box-shadow: 4px 4px 0 var(--color-grey);
}
.btn.yellow-grey:hover {
    transform: translate(-1px,-1px);
    box-shadow: 5px 5px 0 var(--color-grey);
}
.btn.yellow-grey:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--color-grey);
}
.link-btn {
    color: var(--color-blue);
}

.text-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-pixel);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    letter-spacing: 1px;
    padding: 3px 0;
    text-transform: uppercase;
}
.text-btn .icon {
    width: 14px;
    height: 14px;
}
.text-btn:hover {
    text-decoration: underline;
}
.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    cursor: pointer;
    background-color: var(--color-white);
    color: var(--color-black);
    border: 2px solid var(--color-black);
    transition: transform 0.16s var(--snap), background 0.16s, color 0.16s;
}
.icon-btn:hover {
    background-color: var(--color-black);
    color: var(--color-white);
}
.icon-btn:active {
    transform: scale(0.9);
}
.icon-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.icon-btn#previous-btn .icon {
    transform: rotate(180deg);
}
.icon-btn .icon * {
    fill: var(--color-black);
    transition: fill 0.16s;
}
.icon-btn:hover .icon * {
    fill: var(--color-white);
}