:root {
    --color-bg-gradient-start: #ffe6f7;
    --color-bg-gradient-end: #e6f7ff;
    --color-heading: #ff69b4;
    --color-heading-shadow: rgba(255, 105, 180, 0.3);
    --color-white: #ffffff;
    --color-text: #d5d5d5;
    --color-key-shadow: rgba(0, 0, 0, 0.182);
    --color-black-key: #333333;
    --color-key-active: #ffd1e8;
    --color-black-key-active: #555555;
    --bg: #2b2b2b;
    --accent: #0a0a0a;
    --pointer: url('../assets/art/cursors/pointer.png') 0 0, pointer;
}

@font-face {
    font-family: pix;
    src: url("../assets/fonts/rainyhearts.ttf");
}

body {
    text-align: center;
    font-family: pix;
    display: flex;
    background-color: var(--bg);
    flex-direction: column;
    color: var(--color-text);
    padding: 0;
    margin: 0;
    cursor: url('../assets/art/cursors/auto.png') 0 0, auto;
}

.back-button {
    border-color: transparent;
    background-color: transparent;
    justify-self: start;
    text-align: start;

    color: var(--color-text);
    cursor: var(--pointer);
}

#cat-with-guitar-image {
    display: block;
    max-width: 250px;
    padding: 20px;
    margin: auto;
    border-radius: 40px;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform-style: preserve-3d;
    transition: transform 0.1s linear;
    perspective: 1000px;
}

@keyframes catDance {
    0% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.audio-toggle {
    cursor: var(--pointer);

    &:focus {
        outline: none;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18), 0 0 0 4px rgba(37, 99, 235, 0.18);
    }

    &:active {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
    }

    &:not(:active) {
        animation: img-bounce 2s cubic-bezier(.25, .8, .35, 1);
    }
}

.tracks-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    >* {
        width: 400px;
    }

    .info {
        flex-basis: 100%;
        margin: 0 auto;
        text-align: center;

        p {
            max-width: 400px;
            margin: 0 auto;
        }
    }

    .track {
        margin: 20px;
        flex: 100%;

        img {
            width: 200px;
            border-radius: 20px;
            cursor: var(--pointer);
            transition:
                transform 180ms cubic-bezier(.25, .7, .3, 1),
                box-shadow 200ms ease;

            &:focus {
                outline: none;
                box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18), 0 0 0 4px rgba(37, 99, 235, 0.18);
            }

            &:active {
                transform: scale(0.92);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
            }

            &:not(:active) {
                animation: img-bounce 260ms cubic-bezier(.25, .8, .35, 1);
            }
        }

    }

    .current-time, .total-time {
        min-width: 30px;
    }
}



@keyframes img-bounce {
    0% {
        transform: scale(0.92);
    }

    55% {
        transform: scale(1.04);
    }

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