:root {
    --accent-color: #60BEF8;
    --accent-secondary: #FACC15;
    --bg-color: #E1F3FF;
}

.accent-color-bg {
    background: var(--accent-color);
}

.accent-color-text {
    color: var(--accent-color);
}

.bg-color {
    background: var(--bg-color);
}

.accent-secondary {
    background: var(--accent-secondary);
}

body {
    font-family: 'Nunito', sans-serif;
    background-color: var(--bg-color);
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(var(--tw-rotate));
    }

    50% {
        transform: translateY(-8px) rotate(var(--tw-rotate));
    }
}

.loader {
    width: 100%;
    height: 4.8px;
    display: inline-block;
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.loader::after {
    content: '';
    width: 96px;
    height: 4.8px;
    background: var(--primary-color);
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    animation: hitZak 1s linear infinite alternate;
}

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

    100% {
        left: 100%;
        transform: translateX(-99%);
    }
}

#appModal {
    opacity: 0;
    transition: opacity 300ms ease-out;
}

.modal-open {
    opacity: 1 !important;
}

#modalContent {
    transform: translateY(100%);
    transition: transform 300ms ease-out;
}

.modal-content-open {
    transform: translateY(0) !important;
}