.glass {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15), inset 0 1px 8px rgba(255,255,255,0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    color: #222 !important;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Add 5px margin on mobile devices */
@media (max-width: 576px) {
    .glass {
        margin-left: 10px;
        margin-right: 10px;
    }
}
    .glass, .glass * {
        color: #222 !important;
    }

.nav-link {
    background: transparent;
    border-radius: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    display: inline-block;
    transition: background 0.2s, padding 0.2s, border-radius 0.2s;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
}

.nav-link.active {
    background: #34caff;
    border-radius: 0; /* Ensure no corner radius */
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    display: inline-block;
    transition: background 0.2s, padding 0.2s, border-radius 0.2s;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
}

.typing-cursor {
    display: inline-block;
    width: 1ch;
    color: #34caff;
    background: none;
    font-weight: bold;
    animation: blink 1s steps(1) infinite;
    font-size: inherit;
    vertical-align: baseline;
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }

    51%, 100% {
        opacity: 0;
    }
}



body {
    --background: linear-gradient(120deg, #34caff 0%, #2bf598 100%);
    min-height: 100vh;
}

:root {
    --primary: rgba(52, 202, 255, 1);
    --secondary: rgba(43, 245, 152, 1);
    --bs-gradient: linear-gradient(90deg, rgba(52, 202, 255, 0.15), rgba(43, 245, 152, 0.15));
}

.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(52, 202, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(52, 202, 255, 0.15) 50%, rgba(52, 202, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: var(--bs-progress-height) var(--bs-progress-height);
}

.placeholder-wave {
    -webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
    mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
    animation: placeholder-wave 2s linear infinite;
}

.bg-gradient {
    background-image: var(--bs-gradient) !important;
}

.bg-gradient-primary-to-secondary {
    background: linear-gradient(90deg, rgba(52, 202, 255, 1.000) 0.000%, rgba(43, 245, 152, 1.000) 100.000%);
}

.text-gradient {
    background: linear-gradient(90deg, rgba(52, 202, 255, 1.000) 0.000%, rgba(43, 245, 152, 1.000) 100.000%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-primary {
    color: #fff !important;
    background-color: rgba(52, 202, 255, 1.000) !important;
    border-color: rgba(52, 202, 255, 1.000) !important;
}

    .btn-primary:hover {
        background-color: rgba(30, 180, 230, 1.000) !important;
        border-color: rgba(30, 180, 230, 1.000) !important;
    }

    .btn-primary:active,
    .btn-primary:focus {
        background-color: rgba(15, 160, 210, 1.000) !important;
        border-color: rgba(15, 160, 210, 1.000) !important;
        box-shadow: 0 0 0 0.2rem rgba(52, 202, 255, 0.25) !important;
    }

.text-secondary {
    --bs-text-opacity: 1;
    color: rgba(43, 245, 152, var(--bs-text-opacity)) !important;
}

.text-primary {
    --bs-text-opacity: 1;
    color: rgba(52, 202, 255, var(--bs-text-opacity)) !important;
}

a, .btn-link {
    color: rgba(52, 202, 255, 1.000);
}

    .btn:focus,
    .btn:active:focus,
    .btn-link.nav-link:focus,
    .form-control:focus,
    .form-check-input:focus {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(52, 202, 255, 0.6);
    }

.profile .dots-2 svg,
.profile .dots-4 svg {
    fill: rgba(52, 202, 255, 1.000);
}