style.css

/* Cosmic Theme */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&display=swap');

body {
    background: #000;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    min-height: 100vh;
    padding: 2rem;
}

.cosmic-text {
    position: relative;
    display: inline-block;
    color: white;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    letter-spacing: 2px;
}

.cosmic-text::after {
    content: 'Seek the unknown';
    position: absolute;
    left: 0;
    top: 0;
    color: transparent;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
    z-index: -1;
    animation: cosmicGlow 3s infinite alternate;
}

@keyframes cosmicGlow {
    0% {
        transform: translate(0, 0);
        opacity: 0.5;
    }
    25% {
        transform: translate(2px, -2px);
    }
    50% {
        transform: translate(-2px, 2px);
    }
    75% {
        transform: translate(1px, -1px);
    }
    100% {
        transform: translate(-1px, 1px);
        opacity: 0.8;
    }
}
/* Base Checkbox Styles */
.checkbox-container {
    @apply relative;
}
.checkbox-label {
    @apply flex items-center cursor-pointer select-none;
}

.checkbox-input {
    @apply absolute opacity-0 h-0 w-0;
}

.checkbox-text {
    @apply ml-3 text-gray-700 font-medium;
}

/* Simple Checkbox */
.checkbox-custom {
    @apply relative h-6 w-6 rounded border-2 border-gray-300 transition-all duration-200;
}

.checkbox-input:checked ~ .checkbox-custom {
    @apply bg-indigo-500 border-indigo-500;
}

.checkbox-input:checked ~ .checkbox-custom::after {
    content: '';
    @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-2 h-3 border-r-2 border-b-2 border-white rotate-45;
}

/* Animated Checkbox */
.animated-checkbox {
    @apply relative h-6 w-12 rounded-full bg-gray-300 transition-all duration-300;
}

.animated-checkbox-inner {
    @apply absolute top-1 left-1 h-4 w-4 rounded-full bg-white shadow-md transition-all duration-300;
}

.checkbox-input:checked ~ .animated-checkbox {
    @apply bg-indigo-500;
}

.checkbox-input:checked ~ .animated-checkbox .animated-checkbox-inner {
    @apply transform translate-x-6;
}

/* Icon Checkbox */
.icon-checkbox {
    @apply relative h-6 w-6 rounded border-2 border-gray-300 flex items-center justify-center transition-all duration-200;
}

.icon-check {
    @apply text-transparent w-4 h-4 stroke-[3px] transition-all duration-200;
}
.checkbox-input:checked ~ .checkbox-custom {
    @apply bg-transparent border-white;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.checkbox-input:checked ~ .checkbox-custom::after {
    @apply border-white;
}

.checkbox-input:checked ~ .animated-checkbox {
    @apply bg-transparent border-white;
}

.checkbox-input:checked ~ .animated-checkbox .animated-checkbox-inner {
    @apply bg-white;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

.checkbox-input:checked ~ .icon-checkbox {
    @apply bg-transparent border-white;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.checkbox-input:checked ~ .icon-checkbox .icon-check {
    @apply text-white;
}

/* Hover Effects */
.checkbox-label:hover .checkbox-custom,
.checkbox-label:hover .animated-checkbox,
.checkbox-label:hover .icon-checkbox {
    @apply shadow-md;
}

/* Focus Styles */
.checkbox-input:focus ~ .checkbox-custom,
.checkbox-input:focus ~ .animated-checkbox,
.checkbox-input:focus ~ .icon-checkbox {
    @apply ring-2 ring-indigo-200;
}