body {
    background-image: url('/images/bg/bg-image3.jpeg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    /* optional fallback background color */
    background-color: #f8fafc;
}

.navbar-top {
    background-image: url('/images/bg/bg-image3.jpeg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    /* optional fallback background color */
    background-color: #f8fafc;
}

.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 #258cfb;
}

.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;
}

.answer_incorrect > td {
    background-color: #f29999;
}

.answer_partial-answered > td {
    background-color: #a5edf2;
}

.answer_not-answered > td {
    background-color: #edc785;
}

@keyframes mercuryTypingAnimation {
    0% {
        transform: translateY(0px);
        background-color: #000000;
    }

    28% {
        transform: translateY(-7px);
        background-color: #3d3d3d;
    }

    44% {
        transform: translateY(0px);
        background-color: #6a6a6a;
    }
}

.my-card {
    border-radius: 2rem;
    box-shadow: 10px 10px 20px #a3b1c6, /* dark shadow */
    -10px -10px 20px #ffffff; /* light shadow */
    transition: all 0.3s ease;
}

.my-card-header-img {
    min-height: 200px;
}

.my-card-header-img img {
    object-fit: fill;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
}

.step-trigger.completed .bs-stepper-circle {
    background-color: #28a745 !important; /* Bootstrap green */
    color: #fff !important;
}