body {
    min-height: 100vh;
    padding-top: 100px;
}

.navbar {
    background-color: #00204a;
}

#logoSymbol {
    margin-left: 30%;
    margin-right: 30%;
}

.yellow-font {
    color: #fbdb6b;
}

.menu-item::first-letter {
    font-size: x-large !important;
    font-weight: bold;
}

.width-10 {
    width: 10%
}

.width-20 {
    width: 20%;
}

.width-30 {
    width: 30%;
}

.width-33 {
    width: 33% !important;
} 

.width-40 {
    width: 40%;
}

.width-50 {
    width: 50%;
}

.width-66 {
    width: 66% !important;
}

.width-80 {
    width: 80%;
}

.width-90 {
    width: 90%;
}

.width-100 {
    width: 100%;
}

.logo-blue {
    color: #00204a;
}

.logo-blue-dark {
    color: #000a17;
}

.logo-ble-light {
    color: #00367d;
}

.logo-yellow {
    color: #facf39;
}

.logo-yellow-dark {
    color: #f9c307;
}

.logo-color-light {
    color: #fbdb6b;
}

.bckgr-logo-blue {
    background-color: #00204a;
}

.button-play:hover {
    color: white;
}

.button-download {
    text-decoration: none !important;
    color: white;
}

.button-link {
    text-decoration: none !important;
    color: black;
}

.img-center {
    display: block;
    margin: auto;
}

.font-x-large {
    font-size: x-large;
}

#partOf {
    color: #fbdb6b;
    font-size: smaller;
    text-align: right;
}

#comingSoonDiv {
    display: flex;
    flex-wrap: wrap;
}

#logoHeroDiv {
    flex: 33.33%;
}

#comingSoonHeroDiv {
    flex: 66.66%
}

.paragraph {
    text-align: justify;
}

#quizModalHeader {
    background-image: radial-gradient(#facf39, #fbdb6b, #00367d)
}

#quizModalBody {
    background-image: linear-gradient(to bottom, #000a17, #00204a, #00367d);
}

.jsk-mint-light {
    color: #8ED4C4;
}

.quiz-action-btn {
    background-color: #fbdb6b !important;
    color: #000a17 !important;
}

.correct {
    color: #06c83d;
    font-weight: bold;
    font-style: italic;
}
#congratsDiv {
    color: #06c83d;
    font-weight: bold;
    font-style: italic;
    text-align: center;
}

.incorrect {
    color: #e10c4f;
    font-weight: bold;
    font-style: italic;
}

.question-separator {
    color: white;
}
#warnHr {
    color: white;
}

@media screen and (max-width: 991px) {
    #partOfQamcomImg {
        width: 20% !important;
    }
}

@media screen and (max-width: 1000px) {
    .card {
        width: 100% !important;
    }
}

@media screen and (max-width: 770px) {
    #mainContainer {
        max-width: 90% !important;
    }
}

@media screen and (max-width: 700px) {
    #spaceHeroImg {
        height: 200px;
        object-fit: cover;
        max-width: 100%;
    }
}