:root {

    --mainBG: #DE3F21;
    --mainBG: #F15A22;
    /* --selection: #e7d657; */
    --selection: #ffb81c;
    --innerBG: #008b33;
    ;
}


body {
    background-color: var(--mainBG);
    color: white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    max-width: 1000px;
    margin: auto;

    overflow-x: hidden;

    display: grid;
    grid-template-rows: auto 1fr;

    min-height: 100vh;
}

body.showResults {
    background-color: rgb(252, 246, 237);
    color: var(--mainBG);

    .inner {
        background-color: var(--mainBG);
        color: white;
    }

    .logo {
        border: 2px solid white;
    }
}

.wrapper{
    margin-top: 1rem;
}

h1 {
    font-size: clamp(2rem, 8vw, 3rem);
    padding: 0 2%;
}

main {
    padding: 0 2%;
}

.inner {
    background-color: white;
    color: black;
    /* padding: 1rem; */

    border-radius: 10px;
    border: 1px solid black;

    transition: all 0.5s;
}

.hidden {
    transform: scale(0);
}

.hideNow {
    animation: hideAnime 1s forwards;
}

.showNow {
    animation: showAnime 2s forwards;
}

@keyframes hideAnime {
    0% {
        transform: scale(1);
    }

    90% {
        transform: scale(0);
    }

    100% {
        transform: scale(0);
        display: none;
    }
}

@keyframes showAnime {
    0% {
        transform: scale(0);
        display: block;
    }

    50% {
        transform: scale(0);
    }

    100% {
        transform: scale(100) !important;
    }
}

.showResults #results{
    padding: 1rem;
}

#results.inner h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
}

#results.inner p {
    font-size: 1.5rem;
    text-align: center;
    max-width: 700px;
    margin: 2rem auto;
}

#question {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
}

.option {

    border: 1px solid gray;
    margin: 1rem 0;
    padding: 8px;
    border-radius: 4px;

    font-size: clamp(1.2rem, 3vw, 1.5rem);
    margin-top: 1.5rem;


    transition: background-color 0.3s;
}

.option:hover {
    cursor: pointer;
    background-color: black;
    color: white;
}

.option.selection {
    background-color: var(--selection);
    color: black;
    /* border: 2px solid black; */
}


.controls {
    display: flex;
    gap: 1rem;
    justify-content: space-between;

    margin-top: 4rem;
}

.controls div {
    background-color: black;
    border: 2px solid black;
    border-radius: 4px;
    color: white;
    padding: 0.5rem;
    font-size: 1.3rem;
    transition: all 0.2s;
    min-width: 80px;
    text-align: center;
    letter-spacing: 1px;
}

.controls div:hover {
    background-color: var(--selection);
    color: black;
    cursor: pointer;
}

.slideRight {
    animation: slideRightAnime 2s forwards;
}

.slideLeft {
    animation: slideLeftAnime 1.5s forwards;
}

.bordered {
    padding: 1rem;
    border: 2px solid transparent;
    border-radius: 10px;
    transition: all 0.7s;
}

.slideRight .bordered,
.slideLeft .bordered {
    border: 2px solid var(--innerBG);
}



.resetView {
    animation: resetViewAnime 1.5s forwards;
}

.disabled {
    background-color: gray !important;
    pointer-events: none !important;
}

.disabled:hover {
    color: white !important;
    cursor: none !important;
}

@keyframes slideRightAnime {

    20% {
        transform: translateX(0%);
    }

    30% {
        transform: translateX(-10%);
        transform: scale(90%);
    }

    50% {
        transform: scale(90%);
    }

    100% {
        transform: translateX(150%);
    }

    /* 100%{
        transform: translateX(0);
        transform: scale(0);
    } */

}

@keyframes slideLeftAnime {

    20% {
        transform: translateX(0%);
    }

    30% {
        transform: translateX(10%);
        transform: scale(90%);
    }

    50% {
        transform: scale(90%);
    }

    100% {
        transform: translateX(-150%);
    }

    /* 100%{
        transform: translateX(0);
        transform: scale(0);
    } */

}

@keyframes resetViewAnime {

    0% {
        transform: scale(0);
    }

    40% {
        transform: scale(90%);
    }

    100% {
        transform: scale(100%);
    }

}

#statusBar {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.dot {
    background-color: white;
    border: 1px solid black;
    height: 1rem;
    aspect-ratio: 1;
    border-radius: 50%;
}

.dot.filled {
    background-color: var(--selection);
}

footer {

    /* margin-top: 2rem; */
    text-align: center;
    align-self: center;
    padding: 3rem 0 1rem 0;
}

footer p {
    font-size: 1.3rem;
}

.copy {
    display: block;
    text-align: center;
}

.logo {
    margin: auto;
    border: 2px solid;
    border-radius: 50%;
    max-width: 80px;
    aspect-ratio: 1;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.currentQuestion{
    border: 2px solid black;
}

.CTA{
    padding: 8px;
    text-align: center;
}

#results a{
    color: black;
    font-size: 1.2rem;
    text-decoration: none;
    border: 1px solid black;
    background-color: var(--selection);
    border-radius: 10px;
    padding: 8px 10px;
    transition: all 0.5s;
}

#results a:hover{
    background-color: black;
    color: var(--selection);
}