:root {
    --blue-60: #62c7d0;
    --grey-35: #575b5b;
    --grey-25: #3e4141;
    --grey-60: #969c9c;
    --grey-85: #d8dada;
    --grey-blue-30: #006699;
    --teal-25: #008080;
    --teal-20: #006666;
    --body-text-color: var(--grey-85);
    --body-background-rest: var(--grey-blue-30);
    --body-background-break: var(--teal-25);
    --font-montserrat: 'Montserrat', sans-serif;
    /* weights: 100, 300, 400 */
    --font-raleway: 'Raleway', sans-serif;
    /* weights: 300 */
    --font-robot-condensed: 'Roboto Condensed', sans-serif;
    /* weights: 300, 400 */
    --body-font: var(--font-robot-condensed);
    --body-font-weight: 300;
    --header-font: var(--font-raleway);
    --header-font-weight: 300;
    --button-font: var(--font-raleway);
    --button-font-weight: 300;
    --timer-buttons-color: var(--grey-85);
    --modal-header-background: var(--grey-blue-30);
    --load-modal-background: var(--teal-25);
}

body {
    background-color: var(--body-background-rest);
    font-family: var(--body-font);
    font-weight: var(--body-font-weight);
    color: var(--body-text-color);
}

header {
    padding-right: 0px !important;
    padding-left: 0px !important;
    font-family: var(--header-font);
    font-weight: var(--header-font-weight);
}

header h1 {
    font-size: 8vh;
    margin-bottom: 20px;
}

.screen-size-button {
    background-color: transparent;
    border-color: transparent;
    color: var(--timer-buttons-color);
    border: 0px;
    padding: 0px 6px 0 0;
}

.inputs {
    text-align: center;
}

.input-form {
    font-size: 1.5em;
    text-align: center;
    padding-right: 20px;
}

.input-labels {
    width: 100px;
}

.input-inputs {
    width: 50px;
    text-align: center;
    background-color: transparent;
    border: none;
    color: var(--body-text-color);
}

#timerSection {
    text-align: center;
    line-height: 1.2;
}

#repsDisplay {
    font-size: 32px;
}

#repsDisplayLabel {
    width: 100%;
    margin: 0px;
    font-size: 24px;
}

#repsDisplaySpan {
    font-size: 40px;
}

#setsDisplay {
    font-size: 24px
}

#setsDisplayLabel {
    width: 100%;
    margin: 0px;
}

#setsDisplaySpan {
    font-size: 40px;
}

#timeDisplay {
    font-size: 132px;
}

button {
    font-family: var(--button-font);
    font-weight: var(--button-font-weight);
    font-size: 1.25em;
    padding: 0.5em 1em;
    border: 1px solid black;
}

.modal-body {
    background-color: var(--load-modal-background);
}

.load-radio-label {
    padding-left: 0.5em;
}

.save-load-button {}

.timer-buttons {
    background-color: transparent;
    border: none;
    color: var(--timer-buttons-color);
    font-size: 32px;
    padding: 16px !important;
}

#stopTimer {
    position: fixed;
    bottom: 0px;
    right: 0px;
}

.modal-header,
.modal-footer {
    background-color: var(--modal-header-background);
}

#toby-image {
    width: 100%;
}

#toby-sleeping {
    width: 100%;
}

.toast-body {
    color: black;
}