* {
    box-sizing: border-box;
    transform: translateZ(1px);
}
img {
}
body {
    margin: 0;
}
#root {
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
}

/* COMMON */
.header, .footer {
    display: flex;
    justify-content: center;
    padding: 20px;
}
.header img {
    max-width: 200px;
}
.footer {
    align-items: center;
    flex-direction: column;
}
.footer img {
    max-width: 600px;
}
.footer img[src*="urbaser"] {
    max-width: 100px;
    margin-top: 24px;
}
.footer {
    /* background-color: #8fa350; */
}
.footer img {
    max-height: 300px;
}
.page-title {
    display: flex;
    justify-content: center;
    padding: 60px 20px 0;
    color: #238044;
    font-size: 24pt;
    font-weight: bold;
}
.page-title-bar {
    width: 500px;
    border: 0 none;
    border-top: 3px solid #f3ebd8;
    margin-bottom: 30px;
}
.page-title-number {
    color: #2c7437;
}
.page-title > .var {
    font-weight: bold;
}

/* FRONT PAGE */
.frontpage-hero {
    display: flex;
    justify-content: center;
    background-color: #f3ead9;
}
.frontpage-hero img {
    height: 90vh;
}
.frontpage-fluff {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 32px;
}
.frontpage-fluff img {
    width: 1000px;
    max-width: 100%;
}
.frontpage-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 200px 60px;
}
.frontpage-cta img {
    max-height: 100%;
    max-width: 800px;
}

/* DEMO PAGE */
.demo-main {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("demo-background.png") no-repeat center;
    background-size: contain;
    height: 80vh;
}
.demo-form {
    font-size: 13pt;
    line-height: 30px;
    color: #707070;
    display: flex;
    flex-direction: column;
}
.demo-form .demo-type.spaced {
    margin-bottom: 20px;
}
.demo-form .demo-type label {
    font-weight: bold;
}
.demo-form input#citizen {
    margin-left: 20px;
}
.demo-form select, .demo-form .demo-start {
    border: 2px solid #8fa350;
    border-radius: 6px;
    color: #8fa350;
}
.demo-form select {
    width: 100%;
    margin-bottom: 20px;
    margin-top: 4px;
    font-size: 13pt;
    padding: 4px;
}
.demo-form .demo-start {
    font-size: 22pt;
    padding: 6px;
    background-color: white;
    align-self: center;
    width: 200px;
    text-transform: uppercase;
    margin-top: 20px;
    cursor: pointer;
}
.demo-form .demo-type.error label,
.demo-form select.error {
    border-color: #da0f17;
    color: #da0f17;
}

/* QUESTION PAGE */
.question-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url("demo-background.png") no-repeat center;
    background-size: contain;
    height: 70vh;
    padding-top: 20px;
}
.question-main .question-answer {
    border: 2px solid #1e8549;
    border-radius: 6px;
    color: #1e8549;
    font-size: 16pt;
    padding: 8px 12px;
    background-color: white;
    align-self: center;
    width: 600px;
    margin-top: 20px;
    cursor: pointer;
}

/* RESULT PAGE */
body.result.correct {
    background-color: #7bcf65;
}
body.correct .result-header,
body.correct .result-continue {
    color: #1e8549;
}
.result-main {
    margin-top: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url("correct-background.png") no-repeat center;
    background-size: 700px;
    height: 100%;
    width: 100%;
}
.result-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 700px;
    height: 570px;
    padding: 60px 50px 200px;
}
.result-header {
    margin-bottom: 20px;
    font-size: 32pt;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}
.result-text {
    line-height: 24px;
    margin-bottom: 24px;
    color: #1e8549;
    text-align: center;
}
.result-continue {
    border: 2px solid #1e8549;
    border-radius: 6px;
    color: #1e8549;
    font-size: 18pt;
    padding: 6px;
    background-color: white;
    align-self: center;
    width: 200px;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
}
body.result.incorrect {
    background-color: #f02d2d;
}
body.result.incorrect .result-main {
    background-image: url("incorrect-background.png");
}
body.result.incorrect .result-header {
    color: #da0f17;
}
body.result.incorrect .result-continue {
    color: white;
    border-color: #f02d2d;
    background-color: #f02d2d;
}
body.result.incorrect .result-text {
    color: #f02d2d;
}

/* END */
body.end {
    background: url("demo-background.png") no-repeat center;
    background-size: 80%;
}
body.end .page-title {
    text-transform: uppercase;
    font-size: 38pt;
    font-weight: bold;
}
.page-title {
    padding: 0 50px;
}
.end-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.end-subtitle {
    font-size: 14pt;
    color: #707070;
    text-align: center;
    margin: 10px 0 40px;
}
.end-score {
    border: 10px solid #2c7437;
    color: #8fa350;
    border-radius: 100%;
    width: 180px;
    height: 180px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 16pt;
}
.end-score .var {
    font-size: 69pt;
    line-height: 90px;
}
.end-text {
    max-width: 600px;
    text-align: center;
    font-size: 14pt;
    color: #707070;
    line-height: 24px;
    margin: 100px 20px 50px;
}
.frontpage-cta-button, .end-restart {
    border: 2px solid #8fa350;
    border-radius: 6px;
    color: #8fa350;
    font-size: 18pt;
    padding: 6px;
    background-color: white;
    align-self: center;
    width: 300px;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
    margin-bottom: 100px;
}
body.end.failed .end-score,
body.end.failed .end-score .var {
    border-color: #da0f17;
    color: #da0f17;
}
body.end.failed .end-passed {
    display: none;
}
body.end.passed .end-failed {
    display: none;
}

@media screen and (max-width: 900px) {
    .header {
        padding: 20px 0;
    }
    .header img {
        max-width: 80%;
    }
    .frontpage-hero {
        margin-top: 0;
    }
    .frontpage-hero img {
        height: 300px;
    }
    .frontpage-fluff {
        padding: 40px;
    }
    .frontpage-fluff-text img {
        float: none;
        margin: 0 auto;
        display: block;
    }
    .frontpage-fluff-title,
    .frontpage-fluff-text img {
        margin-bottom: 20px;
    }
    .frontpage-fluff-title,
    .frontpage-fluff-text {
        width: unset;
    }
    .frontpage-cta-button {
        display: unset;
    }
    .frontpage-cta img {
        max-width: 100%;
    }
    .frontpage-cta {
        padding: 60px 20px;
    }
    .demo-main {
        background: #f4f6ee;
        height: unset;
    }
    .demo-form {
        padding: 20px;
    }
    .question-main {
        background: #f4f6ee;
        height: unset;
        padding: 20px 20px 20px;
    }
    .question-main .question-answer {
        width: 80%;
        margin: 20px;
    }
    body.result.incorrect .result-main,
    .result-main {
        background: white;
    }
    .result-main .result-content {
        width: auto;
        height: auto;
        padding: 40px;
    }
    body.end .page-title {
        font-size: 30pt;
    }
    .page-title {
        padding: 0 20px 20px;
    }
    .frontpage-fluff {
        margin: 0;
        margin-top: 24px;
        padding: 0;
    }
    .page-title-bar {
        width: 90%;
    }
}