.img-as-text {
    height: 2rem; /* Match the text line height */
    vertical-align: middle; /* Align with text baseline */
}
body{
    margin: 0;
    padding: 0;
    background-image: url('../images/zeyit-bg-002.svg');
    background-repeat: no-repeat;
    background-size: cover; /* Ensures the image covers the entire viewport */
    background-position: center; /* Centers the image */
    height: 100vh; /* Sets the height to fill the viewport */
    overflow: hidden; /* Prevents any overflow issues */
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner-square {
    display: flex;
    flex-direction: row;
    width: 5rem;
    height: 8rem;
}

.spinner-square > .square {
    width: 15px;
    height: 60px;
    margin: auto auto;
    border-radius: 4px;
}

.square-1 {
    animation: square-anim 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s infinite;
}

.square-2 {
    animation: square-anim 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 200ms infinite;
}

.square-3 {
    animation: square-anim 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 400ms infinite;
}

.square-4 {
    animation: square-anim 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 600ms infinite;
}

@keyframes square-anim {
    0% {
        height: 80px;
        background-color: rgb(111, 163, 240);
    }
    20% {
        height: 80px;
    }
    40% {
        height: 120px;
        background-color: rgb(111, 200, 240);
    }
    80% {
        height: 80px;
    }
    100% {
        height: 80px;
        background-color: rgb(111, 163, 240);
    }
}