body {
    --color-Black: #191617;
    --color-White: #ffffff;
    --color-Platinum: #e8e8e8;
    --color-endeavor: #ff9966;
    --color-rest: #4286f4;
    --font-size: 20px;
    background: var(--color-Black);
    color: var(--color-Platinum);
    font-family: 'Roboto Mono', monospace;
    font-size: var(--font-size);
}

video {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

body.endeavor {
    background: #ff9966;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #ff5e62, #ff9966);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #ff5e62, #ff9966);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

body.rest {
    background: #373B44;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #4286f4, #373B44);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #4286f4, #373B44);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.container {
    align-items: center;
    display: flex;
    flex-flow: column nowrap;
    font-weight: lighter;
    gap: 1rem;
    height: 100vh;
    text-transform: uppercase;
    justify-content: space-evenly;
}

button {
    cursor: pointer;
    font-size: var(--font-size);
    font-weight: lighter;
    text-transform: uppercase;
}

.main-container {
    align-items: center;
    display: flex;
    flex-flow: column nowrap;
    gap: 2rem;
}

.main-button {
    background-color: var(--color-Platinum);
    border: 10px solid var(--color-White);
    border-radius: 50%;
    color: var(--color-Black);
    font-size: 2rem;
    height: 185px;
    width: 185px;
}
.main-button:hover {
    background-color: var(--color-White);
    border: 10px solid var(--color-endeavor);
    color: var(--color-endeavor);
}

body.endeavor .main-button,
body.rest .main-button {
    background-color: transparent;
    color: var(--color-White);
}

body.endeavor .main-button:hover,
body.rest .main-button:hover {
    border: 10px solid var(--color-Black);
}

.main-button:active {
    background-color: var(--color-Black);
    border: 10px solid var(--color-Platinum);
    color: var(--color-White);
}

.main-time {
    font-size: 3rem;
    text-align: center;
}

.main-time strong {
    font-size: 5rem;
    font-weight: normal;
}

.endeavor-options {
    --color: var(--color-endeavor);
}
.rest-options {
    --color: var(--color-rest);
}

.endeavor-options i, 
.endeavor-options svg {
    color: var(--color);
}
.rest-options i,
.rest-options svg {
    color: var(--color);
}

.button-options {
    display: flex;
    flex-flow: row nowrap;
    gap: 2rem;
    justify-content: center;
    padding-top: 1rem;
}

.button-options button {
    background-color: transparent;
    border: 1px solid var(--color-White);
    border-radius: 50%;
    color: var(--color-Platinum);
    height: 70px;
    width: 70px;
}
.button-options button:hover {
    border: 2px solid var(--color);
    color: var(--color);
    font-weight: bold;
}


.button-options button:active {
    background-color: rgba(255, 255, 255, 0.2);
}