:root, html, body {
    --brand-red: #C81737;
    --brand-red-darker: rgba(164, 19, 46, 0.7);
}

.button-step-row .btn-outline-dark {
    color: #C81737;
    border-color: #C81737;
}

.button-step-row .btn-outline-dark:hover {
    color: #C81737;
    background-color: rgb(255, 228, 228);
    border-color: #C81737;
}

.button-step-row {
    padding: 32px 0;
}

/* -------------------------------------------- */

.App {
    text-align: center;
    margin: 16px;
}

.results-row {
    margin: 0;
}

.results-row .calculation {
    background-size: contain;
    background-position: top left;
    background-repeat: no-repeat;
    margin: 8px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.results-row .calculation .calc-name,
.results-row .calculation .calc-info,
.results-row .calculation .percent {
    font-family: "futura-pt", sans-serif;
    line-height: 1;
    color: rgb(102, 102, 102);
    width: 50%;
}

.results-row .calculation .percent {
    color: var(--brand-red);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 2.4px;
}

.results-row .calculation .calc-name {
    font-size: 24px;
    font-variant: small-caps;
    text-transform: lowercase;
    color: var(--brand-red);
    border-bottom: 2px solid;
    padding-bottom: 8px;
}

.results-row .calculation .calc-info {
    display: inline-block;
    padding: 16px 0;
    background: rgba(255, 255, 255, 0.6);
}

.results-row .calculation .calc-info a {
    color: var(--brand-red-darker);
    text-decoration: underline;
}

.results-row .calculation .calc-info p {
    line-height: 1.3;
}

/* -------------------------------------------- QuizQuestion Component */
.question-single-outer {
    padding: 32px 40px;
    margin: 8px 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

.question-single-banner {
    font-family: "futura-pt", sans-serif;
    font-size: 24px;
    padding: 64px 0 40px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 5px #000;
    text-shadow: 0 0 1px var(--brand-red-darker), 0 0 1px var(--brand-red-darker), 0 0 5px var(--brand-red-darker);
}

.question-single-banner .question-single-number {
    display: inline-block;
    margin-right: 8px;
}

/* -------------------------------------------- END*/

/* -------------------------------------------- QuizAnswers Component */

.question-single-answer {
    font-family: "futura-pt", sans-serif;
    padding: 8px;
}

.question-single-answer .question-single-answer-inner {
    transition: 250ms all ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 4px solid transparent;

    color: #C81737;
    font-weight: 700;
    letter-spacing: 0.7px;
    word-spacing: 0.9px;
}

.question-single-answer.not-selected .question-single-answer-inner {
    background-color: rgba(255, 255, 255, 0.85);
}

.question-single-answer.selected .question-single-answer-inner {
    background-color: rgba(255, 237, 237, 0.85);
    border-color: #C81737;
}

@media screen AND (max-width: 759px) {
    .question-single-answer-inner {
        padding: 40px 24px;
    }
}

@media screen AND (min-width: 760px) {
    .question-single-answer-inner {
        padding: 80px 32px
    }
}

/* -------------------------------------------- END*/

/* -------------------------------------------- Question Rows, Specificity Access
.question-single-outer-question-number-{question number}
*/
.question-single-outer-question-number-1 {
    background-image: url("imgs/backgrounds/quiz-1.jpg");
}

.question-single-outer-question-number-2 {
    background-image: url("imgs/backgrounds/quiz-2.jpg");
}

.question-single-outer-question-number-3 {
    background-image: url("imgs/backgrounds/quiz-3.jpg");
}

.question-single-outer-question-number-4 {
    background-image: url("imgs/backgrounds/quiz-4.jpg");
}

.question-single-outer-question-number-5 {
    background-image: url("imgs/backgrounds/quiz-5.jpg");
}

.question-single-outer-question-number-6 {
    background-image: url("imgs/backgrounds/quiz-6.jpg");
}

.question-single-outer-question-number-7 {
    background-image: url("imgs/backgrounds/quiz-7.jpg");
}

/* -------------------------------------------- END*/

/* -------------------------------------------- Results Rows, Specificity Access
.results-row .calculation.{slugified name of result}
*/
.results-row .calculation.calc-alabaster-snowball {
    background-image: url("imgs/elves/elves_Alabaster Snowball.png");
}

.results-row .calculation.calc-pepper-minstix {
    background-image: url("imgs/elves/elves_pepper-ministix.png");
}

.results-row .calculation.calc-shinny-upatree {
    background-image: url("imgs/elves/elves_Shinny Upatree.png");
}

.results-row .calculation.calc-sugarplum-mary {
    background-image: url("imgs/elves/elves_Sugarplum mary.png");
}

/* -------------------------------------------- END*/