@import url(https://fonts.googleapis.com/css?family=Anton);
@import url(https://fonts.googleapis.com/css?family=Yantramanav);
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Vollkorn:ital,wght@0,700;0,800;0,900;1,600;1,700;1,800;1,900&display=swap');

:root {
    /* colors */
    --primary:      #6200EE;
    --p-light:      #9d46ff;
    --p-dark:       #4B00D1;
    --text-on-p:    #FFFFFF;

    /* --secondary:    #F82959 #F34971;
    --s-light:      #F34971 #ff7998; */
    --secondary:    #F82959;
    --s-light:      #F34971;
    --s-dark:       #dd0067;
    --text-on-s:    #1B1222;
    
    --tertiary:     #03DAC5;
    --t-light:      #65fff0;
    --t-dark:       #00c9b5;
    --text-on-t:    #1B1222;

    --bg-light:     #FFFFFF;
    --bg:           #F5F5F5; 
    --bg-dark:      #c2c2c2;

    /* fonts */
    --poppins:      'Poppins', sans-serif;
    --roboto:       'Roboto', sans-serif;
    --anton:        'Anton', sans-serif;
    --vollk:        'Vollkorn', sans-serif;
    --yantramanav:  'Yantramanav', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100vh;
}

body {
    font-family: var(--poppins);
    position: relative;
    min-height: 100vh;
}

.header-wrapper,
.footer-wrapper {

    /* shape */
    margin: 0 auto;
    padding-top: .5rem;
    padding-bottom: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 1600px;
    
    /* flow */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header,
footer {
    /* colors */
    background: var(--primary);
    color: var(--text-on-p);
    font-family: var(--roboto);
    font-weight: 200;
    /* size */
}
header h1 {
    color: var(--text-on-p);
    font-family: var(--vollk);
    font-weight: 900;
    letter-spacing: -2px;
    border-bottom: 4px solid var(--secondary);
    /* font-style: italic; */
}
header p,
footer p {
    color: var(--tertiary);
    display: inline;
}
header .countdown {
    color: var(--t-light);
    font-weight: 600;
}
header span {
    color: var(--text-on-p);
    font-family: var(--anton);
    font-size: x-large;
    border-bottom: 4px solid var(--secondary);
    margin-right: 1px;
}



main {
    margin: 0 auto;
    padding-top: 2rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    /* footer height */
    padding-bottom: 2.5rem;
}

footer {
    color: var(--text-on-p);
    font-family: var(--poppins);
    font-weight: 800;

    width: 100%;
    height: 2.5rem;

    position: absolute;
    bottom: 0;
}
footer span {
    color: var(--secondary);
}


/* ANIMATIONS */
.fadeTimer {
    animation: flash ease 1s;
    animation-iteration-count: infinite;
    -webkit-animation: flash ease 1s;
    -moz-animation: flash ease 1s;
    -o-animation: flash ease 1s;
    -ms-animation: flash ease 1s;
}

@keyframes flash {
    0% {
        color: var(--s-light);
    }
    75% {
        color: var(--text-on-p);
    }
    100% {
        color: var(--text-on-p);
    }
}


.card {
    /* colors */
    background: #fff;
    color: var(--primary);
    font-size: 1rem;
    /* size */
    min-width: 250px;
    max-width: 600px;
    min-height: 250px;
    max-height: 450px;
    /* shape */
    border-radius: .5em;
    box-shadow: 0 1px .25em rgba(0, 0, 0,.25);
    /* flow */
    margin: auto auto;
    overflow: hidden;
}

.card-header,
.card-footer {
    min-height: 2rem;
    padding: .3em .5em;
}

.card-body {

    background: var(--primary);
    color: var(--text-on-p);

    width: 95%;
    /* [*]: figure out how to make bg color expand to fill parent */
    /* the reason was bc the card-footer was taking up the remaining space */
    border-radius: .5em;

    padding: .2em .5em;
    margin: 0 auto;
}

.selected {
    background: var(--primary);
    color: var(--text-on-p);
}

.answer,
.initials {
    /* background: var(--secondary); */
    color: var(--text-on-p);
    list-style-type: none;
}

.initials {
    color: var(--primary);
}

.answer,
.btn,
.initials {
    
    border-radius: .3em;
    
    width: 100%;
    max-width: 600px;
    margin-top: .5em;
    margin-bottom: .5em;
    margin-left: auto;
    margin-right: auto;
    padding: .3em .5em;
}
.answer:hover {
    /* background: var(--s-dark);
    color: var(--text-on-p); */
    background: var(--bg);
    color: var(--p-dark);
}
/* answer > * {
    pointer-events: none;
} */

.answer:hover,
.chosen-answer {
    font-weight: 600;
    font-size: 1.1em;
}
.chosen-answer {
    background: var(--secondary);
    color: var(--text-on-p);
    font-style: italic;
}

#start-btn {
    margin: 100px auto 50px;
}

/* Submit btn */
.btn { 
    background: var(--tertiary);
    border: none;
    color: var(--p-dark);
    font-size: 1.2em;
    font-weight: 900;
}
.btn:hover {
    background: var(--t-dark);
}

.card-footer {
    opacity: 0;
    min-height: 92px;
}

.response {
    border-bottom: 1px solid var(--secondary);
    text-align: center;
    width: max-content;
    display: inline-block;
}
.response-info {
    padding-left: 1em;
}

.stats-wrapper {
    color: var(--primary);
    font-family: var(--anton);
    font-size: 1.25em;

    margin-left: auto;
    margin-right: auto;
    padding: .3em .5em;
    max-width:600px;

    display:flex; 
    justify-content:space-between;
}