h1 {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: clamp(1.656rem, calc(1.427rem + 1.143vw), 2.284rem);
    letter-spacing: 0.02em;
    line-height: 1.2;
    opacity: 1;
}

h2 {
    font-family: 'Familjen Grotesk', Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(1.399rem, calc(1.278rem + 0.609vw), 1.734rem);
    letter-spacing: 0.02em;
    line-height: 1.2;
    opacity: 0.9;
}

h3 {
    font-family: 'Familjen Grotesk', Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(1.287rem, calc(1.205rem + 0.409vw), 1.511rem);
    letter-spacing: 0.025em;
    line-height: 1.2;
    opacity: 0.9;
}

h4 {
    font-family: 'Familjen Grotesk', Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: clamp(1.183rem, calc(1.134rem + 0.244vw), 1.317rem);
    letter-spacing: 0.025em;
    line-height: 1.2;
    opacity: 0.9;
}

h5 {
    font-family: 'Familjen Grotesk', Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: clamp(1.134rem, calc(1.100rem + 0.173vw), 1.229rem);
    letter-spacing: 0.03em;
    line-height: 1.2;
    opacity: 0.9;
}

h6 {
    font-family: 'Familjen Grotesk', Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: clamp(1.088rem, calc(1.066rem + 0.109vw), 1.148rem);
    letter-spacing: 0.03em;
    line-height: 1.2;
    opacity: 0.9;
}

p {
    font-family: 'Familjen Grotesk', Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: clamp(1.000rem, calc(1.000rem + 0.000vw), 1.000rem);
    letter-spacing: 0.03em;
    line-height: 1.4;
    opacity: 0.9;
}

html,
body {
    font-family: 'Familjen Grotesk', Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: clamp(1.000rem, calc(1.000rem + 0.000vw), 1.000rem);
    letter-spacing: 0.03em;
    line-height: 1.6;
}

.home-accent-letters span {
    opacity: 0;
    color: #8B3dff;
    display: inline-block;
    transform: translateY(10px);
    animation: letterFadeIn 0.5s forwards;
}

.home-accent-letters .home-accent-last {
    color: #000;
}

.home-welcome {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(1.959rem, calc(1.577rem + 1.909vw), 3.008rem);
    letter-spacing: 0.02em;
    line-height: 1;
}

.home-demoquiz {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(2.520rem, calc(1.783rem + 3.685vw), 4.547rem);
    letter-spacing: 0.02em;
    line-height: 1;
}

.home-accent-letters {
    font-size: inherit;
    display: inline-block;
    line-height: 1.0;
    word-break: break-word;
}

@keyframes subtitleFadeInUp {
    from {
        opacity: 0;
        transform: translateY(0px);
    }

    to {
        opacity: 0.9;
        transform: translateY(0);
    }
}

.home-intro {
    opacity: 0;
    animation: subtitleFadeInUp 0.5s ease-out forwards;
    animation-delay: 0.225s;
}

@keyframes letterFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.about-name-intro {
    opacity: 0;
    animation: subtitleFadeInUp 0.5s ease-out forwards;
}

    .about-name-intro.delay-1 {
        animation-delay: 0.10s;
    }

    .about-name-intro.delay-2 {
        animation-delay: 0.15s;
    }

    .about-name-intro.delay-3 {
        animation-delay: 0.20s;
    }

.home-accent-letters span:nth-child(1) {
    animation-delay: 0.05s;
}

.home-accent-letters span:nth-child(2) {
    animation-delay: 0.10s;
}

.home-accent-letters span:nth-child(3) {
    animation-delay: 0.15s;
}

.home-accent-letters span:nth-child(4) {
    animation-delay: 0.20s;
}

.home-accent-letters span:nth-child(5) {
    animation-delay: 0.25s;
}

.home-accent-letters span:nth-child(6) {
    animation-delay: 0.30s;
}

.home-accent-letters span:nth-child(7) {
    animation-delay: 0.35s;
}

.home-accent-letters span:nth-child(8) {
    animation-delay: 0.40s;
}

.home-accent-letters span:nth-child(9) {
    animation-delay: 0.45s;
}

@keyframes avatarFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.about-avatar-animate {
    opacity: 0;
    animation: avatarFadeInUp 0.45s forwards;
}

@keyframes contactImageFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.contact-image-animate {
    opacity: 0;
    animation: contactImageFadeInUp 0.3s forwards;
}

    .contact-image-animate.delay-1 {
        animation-delay: 0.05s;
    }

    .contact-image-animate.delay-2 {
        animation-delay: 0.1s;
    }

.about-avatar-animate.avatar-delay-1 {
    animation-delay: 0.05s;
}

.about-avatar-animate.avatar-delay-2 {
    animation-delay: 0.1s;
}

.about-avatar-animate.avatar-delay-3 {
    animation-delay: 0.15s;
}

.quiz-feedback-placeholder {
    min-width: 50px;
}

.navbar {
    background-color: #00000009;
}

.list-group-item {
    background-color: #f7f9fa;
    font-weight: 500;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: rgba(139, 63, 254, 0.1);
    border-color: #8B3dff;
    color: #000 !important;
}

.list-group-item-action:active {
    background-color: rgba(139, 63, 254, 0.5);
}


.container {
    max-width: 1200px;
}


.main {
    background-color: #FAFAFA;
}

a:not(.nav-link) {
    color: #000;
    opacity: 1 !important;
    text-decoration: none;
}

.nav-link {
    font-family: 'Montserrat';
    font-weight: 500;
    text-decoration: none;
}

    .nav-link.active {
        font-family: 'Montserrat';
        font-weight: 600;
        text-decoration: none;
    }

.quiz-link {
    font-family: 'Montserrat';
    font-weight: 700;
}

    .quiz-link.active {
        /*    color: #8B3dff !important;*/
        font-weight: 700;
    }

    .quiz-link:hover,
    .quiz-link:focus {
        color: #8B3dff !important;
    }

.logo-img {
    max-width: 168px;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 1;
    display: block;
}

.quiz-img {
    height: auto;
    max-height: 192px;
    max-width: 100%;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid #00000009;
}

.card-img {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: rgba(139, 63, 254, 0.1);
    border-radius: 50%;
    margin: 0 auto;
}

.contact-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

a,
.btn-link {
    color: #000;
    font-weight: bold;
    text-decoration: none;
}

    a:not(.nav-link):hover,
    .btn-link:hover {
        color: #8B3dff;
        opacity: 1;
        transition: 0.2s ease;
        text-decoration: underline;
    }

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.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 #7215ff;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}


.valid.modified:not([type=checkbox]):not([type=radio]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.correct-answer-faded {
    background-color: rgba(40, 167, 69, 0.1);
    color: #000;
}

.btn-outline-primary {
    color: #000;
    background-color: #fff;
    border-color: #929292;
}

    .btn-outline-primary.active,
    .btn-outline-primary:active {
        background-color: rgba(139, 63, 254, 0.5);
        color: #000;
        border-color: #8b3dff;
    }

    .btn-outline-primary:not(.active):hover,
    .btn-outline-primary:not(.active):focus {
        background-color: rgba(139, 63, 254, 0.1);
        color: #000;
        border-color: #8b3dff;
    }

.btn-primary {
    background-color: #8B3dff;
    border-color: #7215ff;
}

    .btn-primary:hover {
        background-color: #7215ff;
        border-color: #5a0fcc;
    }

.snowflake {
    color: #FFFFFF;
    font-size: 1em;
    font-family: Arial;
    text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall {
    0% {
        top: -10%
    }

    100% {
        top: 100%
    }
}

@-webkit-keyframes snowflakes-shake {
    0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }

    50% {
        -webkit-transform: translateX(80px);
        transform: translateX(80px)
    }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
}

@keyframes snowflakes-fall {
    0% {
        top: -10%
    }

    100% {
        top: 100%
    }
}

@keyframes snowflakes-shake {
    0% {
        transform: translateX(0px)
    }

    50% {
        transform: translateX(80px)
    }

    100% {
        transform: translateX(0px)
    }
}

.snowflake {
    color: #FFFFFF;
    position: fixed;
    top: -10%;
    z-index: 9999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    -webkit-animation-name: snowflakes-fall, snowflakes-shake;
    -webkit-animation-duration: 10s, 3s;
    -webkit-animation-timing-function: linear, ease-in-out;
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-play-state: running, running;
    animation-name: snowflakes-fall, snowflakes-shake;
    animation-duration: 10s, 3s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-play-state: running, running
}

    .snowflake:nth-of-type(0) {
        left: 1%;
        -webkit-animation-delay: 0s, 0s;
        animation-delay: 0s, 0s
    }

    .snowflake:nth-of-type(1) {
        left: 10%;
        -webkit-animation-delay: 1s, 1s;
        animation-delay: 1s, 1s
    }

    .snowflake:nth-of-type(2) {
        left: 20%;
        -webkit-animation-delay: 6s, .5s;
        animation-delay: 6s, .5s
    }

    .snowflake:nth-of-type(3) {
        left: 30%;
        -webkit-animation-delay: 4s, 2s;
        animation-delay: 4s, 2s
    }

    .snowflake:nth-of-type(4) {
        left: 40%;
        -webkit-animation-delay: 2s, 2s;
        animation-delay: 2s, 2s
    }

    .snowflake:nth-of-type(5) {
        left: 50%;
        -webkit-animation-delay: 8s, 3s;
        animation-delay: 8s, 3s
    }

    .snowflake:nth-of-type(6) {
        left: 60%;
        -webkit-animation-delay: 6s, 2s;
        animation-delay: 6s, 2s
    }

    .snowflake:nth-of-type(7) {
        left: 70%;
        -webkit-animation-delay: 2.5s, 1s;
        animation-delay: 2.5s, 1s
    }

    .snowflake:nth-of-type(8) {
        left: 80%;
        -webkit-animation-delay: 1s, 0s;
        animation-delay: 1s, 0s
    }

    .snowflake:nth-of-type(9) {
        left: 90%;
        -webkit-animation-delay: 3s, 1.5s;
        animation-delay: 3s, 1.5s
    }

.main-content {
    width: 90%;
    max-width: 75rem;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    background: #f7f9fa;
    border-radius: 20px !important;
}

.quiz-description {
    max-width: 80ch;
    margin-left: auto;
    margin-right: auto;
    word-break: break-word;
}

@media (max-width: 768px) {
    .wrapper {
        flex-direction: column;
        padding: 1rem 0.5rem;
        border-radius: 0.5rem;
    }
}

@media (max-width: 576px) {
    .card-img {
        min-width: 80px;
    }

    .card-text {
        font-size: 0.9rem !important;
    }
}


.list-group-item:first-child {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
}

.list-group-item:last-child {
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}

.list-group-item:focus-visible {
    outline: 2px solid black;
    outline-offset: 2px;
}
/* DARK MODE */
[data-bs-theme="dark"] .list-group-item-action:hover {
    background-color: rgba(139, 63, 254, 0.1) !important;
    color: #fff !important;
    /*    border-color: #8b3dff !important;*/
    text-decoration: none;
}

[data-bs-theme="dark"] .list-group-item-action:active {
    background-color: rgba(139, 63, 254, 0.5);
}

[data-bs-theme="dark"] .wrapper {
    background: #00000020;
}

[data-bs-theme="dark"] .card {
    background-color: #00000020;
    color: #f8f9fa;
}

[data-bs-theme="dark"] input,
[data-bs-theme="dark"] .form-control {
    background-color: #00000020;
    color: #f8f9fa;
    border-color: #444;
}

[data-bs-theme="dark"] .navbar {
    background-color: #00000020 !important;
    color: #f8f9fa !important;
}

[data-bs-theme="dark"] .list-group-item {
    background-color: #00000020 !important;
    color: #f8f9fa !important;
}

[data-bs-theme="dark"] a:not(.nav-link) {
    color: #fff;
    opacity: 1;
    text-decoration: none;
}

[data-bs-theme="dark"] .nav-link {
    font-family: 'Montserrat';
    font-weight: 500;
    text-decoration: none;
}

    [data-bs-theme="dark"] .nav-link:hover {
        font-family: 'Montserrat';
        font-weight: 500;
        text-decoration: none;
    }

[data-bs-theme="dark"] a,
[data-bs-theme="dark"] .btn-link {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

    [data-bs-theme="dark"] a:not(.nav-link):hover,
    [data-bs-theme="dark"] .btn-link:hover {
        color: #8B3dff;
        opacity: 1;
        transition: 0.2s ease;
        text-decoration: underline;
    }

[data-bs-theme="dark"] .nav-link {
    font-family: 'Montserrat';
    font-weight: 500;
    text-decoration: none;
}

    [data-bs-theme="dark"] .nav-link.active {
        font-family: 'Montserrat';
        font-weight: 600;
        text-decoration: none;
    }

[data-bs-theme="dark"] .quiz-link {
    font-family: 'Montserrat';
    font-weight: 700;
}

    [data-bs-theme="dark"] .quiz-link.active {
        font-family: 'Montserrat';
        font-weight: 700;
    }

    [data-bs-theme="dark"] .quiz-link:hover {
        font-family: 'Montserrat';
        font-weight: 700;
    }

    [data-bs-theme="dark"] .quiz-link:hover,
    [data-bs-theme="dark"] .quiz-link:focus {
        color: #8B3dff !important;
    }

[data-bs-theme="dark"] .btn-outline-primary {
    background-color: #23272b;
    color: #fff;
    border-color: #6d6d6d;
}

    [data-bs-theme="dark"] .btn-outline-primary.active,
    [data-bs-theme="dark"] .btn-outline-primary:active {
        background-color: rgba(139, 63, 254, 0.5);
        color: #fff;
        border-color: #8B3dff;
    }

    [data-bs-theme="dark"] .btn-outline-primary:not(.active):hover,
    [data-bs-theme="dark"] .btn-outline-primary:not(.active):focus {
        background-color: rgba(139, 63, 254, 0.1);
        color: #fff;
        border-color: #8b3dff;
    }

[data-bs-theme="dark"] .correct-answer-faded {
    color: #fff;
}
/*Button transiations*/
.theme-btn-dark .bi,
.theme-btn-light .bi {
    transition: color 0.0s, opacity 0.0s;
}
/* Light mode: highlight sun, fade others */
.theme-btn-light .bi {
    color: #000 !important;
    opacity: 1 !important;
}

.theme-btn-dark .bi {
    color: #000 !important;
    opacity: 0.3 !important;
}

.theme-btn-dark:hover .bi {
    color: #000;
    opacity: 1 !important;
    transition: 0.5s ease;
}
/* Dark mode: highlight moon, fade others */
[data-bs-theme="dark"] .theme-btn-dark .bi {
    color: #fff !important;
    opacity: 1 !important;
    transition: 0.0s;
}

[data-bs-theme="dark"] .theme-btn-light .bi {
    color: #fff !important;
    opacity: 0.3 !important;
}

[data-bs-theme="dark"] .theme-btn-light:hover .bi {
    color: #fff;
    opacity: 1 !important;
    transition: 0.5s ease;
}
/* Remove focus/active border and shadow for theme switcher buttons */
.theme-btn:focus,
.theme-btn:active,
.theme-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}
/* Animation...*/
[data-bs-theme="dark"] .home-accent-letters .home-accent-last {
    color: #fff;
}