body{
    margin: 0;
    padding: 0;
    font-family: 'Roboto Mono', monospace;
    font-size: 2rem;
}
b{
    font-weight: 700;
}

#container{
    /* align-items: center;
    justify-content: center; */
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* flex settings */
.flexRow{
    display: flex;
    flex-direction: row;
}
.flexCol{
    display: flex;
    flex-direction: column;
}

/* text input */
input{
    flex: 2;
    font-size: 2rem;
    padding: 10px;
    margin: 10px;
    border: 2px solid var(--purple);
    border-radius: 5px;
    color: black;
    font-family: 'Roboto Mono', monospace;
    background-color: white;
}
::placeholder{
    color: #bdbdbd;
}

/* override link color */
a{
    color: inherit;
}

/* font colors */
:root {  
    --pink: #f51d70;  
    --yellow: #ebbd05;  
    --green: #01c722;  
    --blue: #115dff;
    --purple: rgb(102, 0, 219);

    --willow: #00eeff;

    --bgcode: #081f42;
    --bgtown: #fdfae7;
    --bgmetro: #d9dffe;

    --ftown: #a1532a;
    --fmetro: #4531df;

    --halftown: #dfaa7c;
    --halfmetro: #93a4fa;
}

/* titles */
.bigTitle{
    font-size: 3rem;
    padding: 10px 10px;
    /* text-align: center; */
}
.title{
    font-size: 2rem;
    padding: 10px 10px;
    /* text-align: center; */
}

/* buttons */
.submitButton{
    width: auto;
    font-size: 2rem;
    padding: 10px 20px;
    margin: 10px;
    border: none;
    border-radius: 5px;
    color: white;
    font-family: 'Roboto Mono', monospace;
    background-color: var(--purple);
}
.townButton{
    background-color: var(--ftown);
    color: var(--bgtown);
}
.metroButton{
    background-color: var(--fmetro);
    color: var(--bgmetro);
}

/* hidden stuff */
.hidden{
    visibility: hidden;
    width: 0px;
    height: 0px;
}

/************** INDEX.HTML **************/

.indexBg{
    background-color: var(--bgcode);
    color: white;
}

/************** QUIZP*.HTML **************/
.town{
    background-color: var(--bgtown);
    color: var(--ftown);
}
.metro{
    background-color: var(--bgmetro);
    color: var(--fmetro)
}

/* quiz components - multichoice, bubbles, sliders, etc. */
.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 5px;
    border: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    border-radius: 50%; 
    background: var(--ftown);
    cursor: pointer;
}
.slider::-moz-range-thumb {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ftown);
    cursor: pointer;
}
input[type=radio] {
    width: 25px;
    height: 25px;
    position: relative;
    visibility: hidden;
}
input[type='radio']:after {
    width: 20px;
    height: 20px;
    border-radius: 15px;
    top: -2px;
    left: -2px;
    position: relative;
    background-color: white;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 5px solid white;
}
input[type='radio']:checked:after {
    width: 20px;
    height: 20px;
    border-radius: 15px;
    top: -2px;
    left: -2px;
    position: relative;
    background-color: var(--purple);
    content: '';
    display: inline-block;
    visibility: visible;
    border: 5px solid white;
}
input[type='radio'].townRadio:after{
    background-color: var(--halftown);
    border: 5px solid var(--halftown);
}
input[type='radio'].townRadio:checked:after{
    background-color: var(--ftown);
    border: 5px solid var(--halftown);
}
input[type='radio'].metroRadio:after{
    background-color: var(--halfmetro);
    border: 5px solid var(--halfmetro);
}
input[type='radio'].metroRadio:checked:after{
    background-color: var(--fmetro);
    border: 5px solid var(--halfmetro);
}
input[type='radio'].hidden:after{
    visibility: hidden;
}