* {
    box-sizing: border-box;

    --background-color: #1e1e1e;

    --text-color: #e0e0e0;
    --text-accent-color: #4caf50;

    --accent-color: #4caf50;

}

html,
body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);

    font-family: 'Helvetica Neue', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

#topLeft {

    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    display: flex;
    flex-direction: row;
    gap: 1vw;

}

/* #region Logo */

.logo-corner {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 100px;
    opacity: 0.2;
    pointer-events: none;
    animation: heartbeat 2s ease-in-out infinite;
    transform-origin: center;
}

/* #endregion Logo */

/* #region Quote Block */

/*
STRUCTURE:
    <blockquote>
    ↳ <span#verse-content> <-- Contains the verse content
    ↳ <cite#verse-ref>     <-- Contains the verse reference (x:y)
*/

blockquote {
    font-size: 1.5rem;
    width: 50%;
    font-style: italic;
    color: #aaa;
    background: transparent;
    text-align: justify;
}

cite {
    display: block;
    margin-top: 0.8rem;
    font-style: normal;
    font-size: 1.1rem;
    color: #666;
    text-align: right;
}

/* #endregion Quote Block */

/* #region Chapter Overlay */

#chapter-overlay {

    font-size: 0.9rem;
    color: #ccc;
    background-color: #2a2a2a;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    user-select: none;
    z-index: 10;
    overflow: hidden;
}

/* #endregion Chapter Overlay */

/* #region Combo */

#combo-label {

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.7rem;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    color: #888;
    opacity: 0;
    transition: opacity 0.3s;
}

/* #endregion Combo */

/* #region Animations */

@keyframes heartbeat {

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

    50% {
        transform: scale(1.03);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* #region Animation classes */

.fade-horizontal-left {
    animation: slide-horizontal-left 1s ease;
}

.fade-horizontal-right {
    animation: slide-horizontal-right 1s ease;
}

.fade-vertical-up {
    animation: slide-vertical-up 1s ease;
}

.fade-vertical-down {
    animation: slide-vertical-down 1s ease;
}

.bump-left {
    animation: bump-left 0.3s ease;
}

.bump-right {
    animation: bump-right 0.3s ease;
}

.bump-up {
    animation: bump-up 0.3s ease;
}

.bump-down {
    animation: bump-down 0.3s ease;
}

/* #endregion Animation classes */

/* #region slide animations */

@keyframes slide-horizontal-left {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-horizontal-right {
    from {
        transform: translateX(50px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-vertical-up {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-vertical-down {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* #endregion slide animations */

/* #region Bump Animation */

@keyframes bump-left {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes bump-right {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes bump-up {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes bump-down {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0);
    }
}

/* #endregion Bump Animation */

/* #endregion Animations */