:root {
    --gso-brand-main: #00a4b7;
    --gso-brand-secondary: #67c9ca;
    --gso-brand-contrast: #b71300;
    --gso-brand-light: #f1f6f7;
    --gso-brand-dark: #383838;
    --wrong: #b71300;
    --right: #00800b;
}

.btn-primary {
    background-color: var(--gso-brand-main);
    border: var(--gso-brand-secondary);
}

.btn-primary:hover {
    background-color: var(--gso-brand-secondary);
    border: var(--gso-brand-secondary);
}

#q1Response, #q2Response, #q3Response, #q4Response, #q5Response {
    margin: 20px 0 10px 0;
}

#q1toq2, #q2toq3, #q3toq4, #q4toq5, #q5toEnd {
    margin: 20px 0 20px 0;
}

.hide {
    display: none;
}

.show {
    display: flex;
    animation-name: fadeInAnimation;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.fadeIn {
    animation-name: fadeInAnimation;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.wrong {
    background-color: var(--wrong);
    color: var(--gso-brand-light);
    border-radius: 5px;
}

.right {
    background-color: var(--right);
    color: var(--gso-brand-light);
    border-radius: 5px;
}

.spotTheAiLogoIntro {
    width: 30%;
}

.introbackground {
    background-image: url('../ai.html\ background.png');
    background-position: center, 0 0;
    background-repeat: no-repeat;
    background-size: cover;
}

@media only screen and (max-width: 720px) {
    .spotTheAiLogoIntro {
        width: 100%;
    }
}