:root {
    --theme-50: #54a7dc1c;
    --theme-100: #e0f2fe;
    --theme-200: #bae6fd;
    --theme-300: #7dd3fc;
    --theme-400: #38bdf8;
    --theme-500: #54a7dc;
    --theme-600: #54a7dc;
    --theme-700: #0369a1;
    --theme-800: #075985;
    --theme-900: #0c4a6e;
    --theme-950: #082f49
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

::-webkit-scrollbar-track {
    background: 0 0
}

::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px
}

    ::-webkit-scrollbar-thumb:hover {
        background: #cbd5e1
    }

* {
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent
}

.loader-container {
    position: absolute;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transition: opacity .2s ease-in-out
}

.logo-icon-img {
    transition: opacity .2s ease-in-out
}

.logo-block:hover .loader-container {
    opacity: 1
}

.logo-block:hover .logo-icon-img {
    opacity: 0
}

.sheets-logo {
    width: 32px;
    height: 32px;
    background: #53a7db;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center
}

.sheet-grid {
    width: 64%;
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14%
}

    .sheet-grid span {
        border-radius: 2px;
        background: #fff;
        opacity: .3;
        transform: scale(.9);
        animation: wave-pulse 1.5s infinite ease-in-out
    }

        .sheet-grid span:nth-child(-n+3) {
            background: #f7941d
        }

@keyframes wave-pulse {
    0%,100% {
        opacity: .3;
        transform: scale(.9)
    }

    30% {
        opacity: 1;
        transform: scale(1.1)
    }

    60% {
        opacity: .3;
        transform: scale(.9)
    }
}

.sheet-grid span:nth-child(1) {
    animation-delay: 0s
}

.sheet-grid span:nth-child(2) {
    animation-delay: .1s
}

.sheet-grid span:nth-child(3) {
    animation-delay: .2s
}

.sheet-grid span:nth-child(4) {
    animation-delay: .3s
}

.sheet-grid span:nth-child(5) {
    animation-delay: .4s
}

.sheet-grid span:nth-child(6) {
    animation-delay: .5s
}

.sheet-grid span:nth-child(7) {
    animation-delay: .6s
}

.sheet-grid span:nth-child(8) {
    animation-delay: .7s
}

.sheet-grid span:nth-child(9) {
    animation-delay: .8s
}