:root {
    --currentColorScheme: orangered;

    --bodyBG: #f4d59c;
    --bodyFont: orangered;

    --flashcardBG: orangered;
    --flashcardBorder: black;
    --flashcardFont: white;

    --answerTopBorder: black;
                        
    --masterColumnBG: orangered;
    --masterColumnBorder: #c13604;
    
    --masterBtnsBG: lightyellow;
    --masterBtnsBorder: orangered;
    --masterBtnsFont: orangered;
    
    --collapsBG: lightyellow;
    --collapsBorder: orangered;
    
    --tabBG: lightyellow;
    --tabBorder: orangered;
    
    --tabBtnBG: orangered;
    --tabBtnBorder: white;
    --tabBtnFont: white;

    --numpadBorder: orangered;
    
    --settingsBG: lightyellow;
    --settingsBorder: darkorange;
    --settingsFont: white;
    
    --settingsBtnsBG: orangered;
    --settingsBtnsBorder: #c13604;
    --settingsBtnsFont: white;
    
    --statDivsBG: lightyellow;
    --statDivsBorder: orangered;
    
    --hdgFont: orangered;
    
    --lblBG: orangered;
    --lblFont: white;
    
    --statBG: white;
    --statFont: orangered;


}

* {
    padding: 0;
    margin: 0;
}


.header-container {
    margin-bottom: 25px;
    width: 100%;
}

body {
    padding: 15px;
    background-color: var(--bodyBG);
    color: var(--bodyFont);
    font-family: sans-serif;
}

.header-container {
    display: inline-block;
}

#site-header {
    display: inline-block;
}

#color-div {
    float: right;
}

.preset {
    height: 50px;
    width: 50px;
    border-radius: 25px;
}

#preset-current {
    background-color: var(--currentColorScheme);
}

#preset-1 {
    background-color: orangered;
}

#preset-2 {
    background-color: slateblue;
}

#preset-3 {
    background-color: deeppink;
}

#preset-custom {
    background-color: grey;
}

#scheme-selections-div {
    position: absolute;
    right: 15px;
    top: 15px;
    display: none;
}

.scheme-choice {
    display: inline-block;
}

#text-custom {
    top: 17px;
    font-size: small;
    display: inline-block;
    position: absolute;
    right: 2.5px;
}

button {
    padding: 5px;
    font-size: 1.1em;
    border-radius: 5px;
}

.column {
    float: left;
    width: 32%;
}

#flashcard-column{
    text-align: center;
}

#selections-column {
    position: relative;
}

#column-container {

    width: 100%;
}

#column-containter::after {
    content: " ";
    display: table;
    clear: both;
}

.btn-div-container {
    margin-bottom: 5px;
    display: block;
    height: 35px;
}

.all-option-btn {
    margin-bottom: 5px;
    display: block;
    color: var(--masterBtnsFont);
    background-color: var(--masterBtnsBG);
    border: 2px solid var(--masterBtnsBorder);
}

.factFamily-master-btn {
    width: 2em;
}

#master-btns-container {
    display: inline-block;
    background-color: var(--masterColumnBG);
    border: 1px solid var(--masterColumnBorder);
    border-radius: 8px;
    padding: 5px;
    margin-bottom: 5px;
}

.open-factOptions-btn {
   background-color: var(--tabBtnBG);
   color: var(--tabBtnFont);
   position: absolute;
   top: 265px;
   left: 50px;
}

#tab {
    background-color: var(--tabBG);
    height: 84%;
    width: 7%;
    position: absolute;
    top: 42.5px;
    border-radius: 15px;
    border: 2px solid var(--tabBorder);
    left: 20px;
    z-index: -2;
}

#collapsible-div {
    padding-right: 5px;
    display: none;
    position: absolute;
    top: 42px;
    left: 45px;
    background-color: var(--collapsBG);
    padding-left: 5px;
    border: 2px solid var(--collapsBorder);
    border-radius: 5px;
    padding-top: 5px;
}

.row {
    position: relative;
    height:40px;
    min-width: 322.5px;
}

.indvFactBtn {
    font-size: 90%;
    margin-right: 1px;
}

.active {
    background-color: seagreen;
}

.partial {
    background-color: greenyellow;
}

.inactive {
    background-color: buttonface;
}

.grid-container {
    min-width: fit-content;
    margin-top: 15px;
    color: var(--flashcardFont);
    margin-bottom: 15px;
    display: grid;
    border: 3px solid var(--flashcardBorder);
    border-radius: 35px;
    padding: 15px;
    background-color: var(--flashcardBG);
    grid-template-areas: 
        'blank-area num1-area'
        'operator-area num2-area'
        'answer-area answer-area';
}

.grid-item {
    padding: 20px;
    text-align: center;
    height: 75px;
}

#settings {
    margin: auto;
    border: 2px solid var(--settingsBorder);
    background-color: var(--settingsBG);
    padding: 10px;
    border-radius: 15px;
    width: fit-content;
}

.settings-btn {
    background-color: var(--settingsBtnsBG);
    color: var(--settingsBtnsFont);
    border: 2px solid var(--settingsBtnsBorder);
}

btn {
    border: 2px solid greenyellow;
}

#blank-area {
   grid-area: blank-area;
}

.num {
    font-size: 5em;
    text-align: right;
}

#num1-area {
    grid-area: num1-area;
}

#num2-area {
    grid-area: num2-area;
}

#operator-area {
    font-size: 5em;
    grid-area: operator-area;
    text-align: right;
}

#answer-area {
    grid-area: answer-area;
    text-align: right;
    height: fit-content;
    width: fit-content;
}

#answer-container {
  
}

#answer {
    width: 99%;
    border-top: 5px solid var(--answerTopBorder);
    font-size: 5em;
    text-align: right;
}

#numpad-div {
    margin-bottom: 5px;
    padding: 10px;
    border: 2px solid var(--numpadBorder);
    border-radius: 15px;
}

.numpad {
    width: 2em;
    margin: 1px;
}

#stats-column {
    text-align: right;
    float: right;
    overflow: hidden;
    min-width: min-content;
}

#stats {
    width: 30%;
    float: right;
    text-align: center;
}

#set-data {
    min-width: fit-content;
    display: grid;
    grid-template-areas:
    'set-hdg'
    'total-lbl'
    'total-num'
    'correct-lbl'
    'correct-num'
    'remaining-lbl'
    'remaining-num'
}

#set-hdg {
    grid-area: set-hdg;
}

#set-total-lbl {
    grid-area: total-lbl;
}

#set-total {
    grid-area: total-num;
}

#set-correct-lbl {
    grid-area: correct-lbl;
}

#set-correct {
    grid-area: correct-num;
}

#set-remaining-lbl {
    grid-area: remaining-lbl;
}

#set-remaining {
    grid-area: remaining-num;
}

#session-data {
    min-width: fit-content;
    display: grid;
    grid-template-areas:
    'ses-hdg'
    'ses-correct-lbl'
    'ses-correct'
}

#session-hdg {
    grid-area: ses-hdg;
}

#session-correct-lbl {
    grid-area: ses-correct-lbl;
}

#session-correct {
    grid-area: ses-correct;
}

.stat-grid {
    background-color: var(--statDivsBG);
    border: 3px solid var(--statDivsBorder);
    border-radius: 15px;
    padding: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.hdg {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--hdgFont);
}

.lbl {
    background-color: var(--lblBG);
    color: var(--lblFont);
    padding-top: 3px;
    padding-bottom: 3px;
}

.stat {
    background-color: var(--statBG);
    color: var(--statFont);
    font-weight: 500;
    font-size: large;
}

.set-grid-item, .session-grid-item {
    border-radius: 15px;
    margin: 5px;
}