@import "tailwindcss";

:root {
    --favcolor1: rgb(27, 135, 128);
}

#stars {
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    z-index: 0;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: twinkle 2s infinite ease-in-out, drift 20s linear infinite;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }
}

@keyframes drift {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(20px);
    }
}

@layer components {
    .gradient-bg {
        background: #136e3c;
        background: linear-gradient(180deg, rgb(55, 163, 143) 0%, rgb(32, 98, 132) 5%, rgba(36, 36, 36, 1) 15%);
    }

}

@layer components {
    .costum-bg {
        background-color: rgba(255, 255, 255, 0);
        /* box-shadow: 0 0 50px rgba(25, 22, 170, 0.47); */
        /* backdrop-filter: blur(10px); */
    }

}

#sidebar {
    padding-left: 10px;
    box-sizing: border-box;
    height: 70vh;
}

.scroll-box {
    height: 100%;
    overflow-y: scroll;
    padding-right: 5px;
}

li:not(:first-child) {
    border-bottom: 1px solid rgba(12, 152, 147, 0.628);
}

#question {
    height: 100px;
    padding-top: 35px;
    line-height: 1.5;
}

.popup-content {
    >ul {
        >li {
            border-bottom: none;
        }
    }
}

.welcome-content {
    >ul {
        >li {
            border-bottom: none;
        }
    }
}

spline-viewer::part(logo) {
    display: none;
}