html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
}

body {
    background: linear-gradient(150deg, indigo, darkblue);
    font-family: 'Verdana', sans-serif;
}

#time-container {
    display: flex;
    flex-direction: column;
    height: 90vh;
    justify-content: center;
}
#time {
    display: flex;
    justify-content: center;
    align-items: baseline;
    color: white;
    font-size: 15vw;
    cursor: default;
}
#hours-and-description {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
#hours-description {
    margin-right: 2vw;
    color: lightgray;
    font-size: 15%;
}
#seconds {
    font-size: 90%;
}

#bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
}
#settings {
    padding: 3vh;
    font-size: 2.5vh;
    color: lightgray;
    opacity: 0.5;
    cursor: default;
}
#settings:hover {
    opacity: 1;
}

#github-link {
    flex-grow: 1;
    padding: 3vh;
    display: flex;
    align-items: center;
    font-size: 2.5vh;
    color: white;
    text-decoration: none;
    opacity: 0.5;
}
#github-link:hover {
    opacity: 1;
}
#github-logo {
    height: 4vh;
    margin-right: 1vh;
}

label {
    display: flex;
    align-items: center;
}
label > span {
    display: block;
}
input[type="checkbox"] {
    display: none;
}
.slider {
    cursor: pointer;
    background: #aaa;
    margin-left: 1vh;
    margin-right: 1vh;
    width: 10vh;
    height: 3.5vh;
    border-radius: 1.75vh;
}
.slider:before {
    display: block;
    content: "";
    height: 2.7vh;
    width: 2.7vh;
    border-radius: 1.4vh;
    background: white;
    transition: 0.4s;
    transform: translate(0.5vh, 0.38vh);
}
input[type="checkbox"]:checked + .slider:before {
    transform: translate(6.7vh, 0.38vh);
}

#week-start {
    appearance: none;
    background: transparent;
    cursor: pointer;
    border: none;
    font: inherit;
    color: white;
    text-decoration: underline;
}

#help-button {
    position: fixed;
    top: 0;
    right: 0;
    padding: calc(max(2vh, 1vw));
    font-size: calc(max(3vh, 2vw));
    color: lightgray;
    opacity: 0.5;
    cursor: pointer;
    display: flex;
    align-items: center;
}
#help-button-info-sign {
    position: relative;
    width: calc(max(3vh, 2vw));
    height: calc(max(3vh, 2vw));
    margin-right: calc(max(0.75vh, 0.5vw));
}
#help-button:hover {
    opacity: 1;
}
#help-screen-background {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 2vh;
}
#help-screen {
    position: relative;
    bottom: 3vh;
    border: 1px solid white;
    outline: 1px solid darkblue;
    padding: 0 2vw;
    background-color: midnightblue;
    opacity: 0.9;
    color: lightgray;
    max-height: 80vh;
    overflow-y: auto;
    font-size: calc(max(2.5vh, 2vw));
}
#help-screen a {
    color: inherit;
}
#help-screen-close-button {
    position: inherit;
    margin-top: 1vw;
    margin-right: -1vw;
    float: right;
    width: calc(max(5vh, 3vw));
    height: calc(max(5vh, 3vw));
}
#help-hour-calculation {
    white-space: nowrap;
}
.help-screen-highlight {
    color: white;
}

svg {
    position: absolute;
    transition: 0.4s;
}
.hidden {
    opacity: 0;
}

svg > path {
    stroke: lightgray;
    fill: none;
}
svg > text {
    text-anchor: middle;
    dominant-baseline: middle;
    fill: lightgray;
    transition: 0.2s;
}
svg > text.current {
    fill: white;
}

.dodecahedron-outer {
    display: inline-block;
    transform-style: preserve-3d;
    transform-origin: 13.93vw 6.76vw;
    padding-left: 6vw;
    width: 22vw;
}
.dodecahedron-inner {
    position: absolute;
    transform-style: preserve-3d;
    transform-origin: 7.93vw 6.76vw;
}
.pentagon {
    width: 15.86vw;
    height: 15.08vw;
    transform-origin: 7.93vw 6.76vw;
}
.pentagon-number-0 {transform: translateY(78px);}
.pentagon-number-1 {transform: rotate(0.2turn) translateY(78px);}
.pentagon-number-2 {transform: rotate(0.4turn) translateY(78px);}
.pentagon-number-3 {transform: rotate(0.6turn) translateY(78px);}
.pentagon-number-4 {transform: rotate(0.8turn) translateY(78px);}
.reversed > .pentagon-number-1 {transform: rotate(0.8turn) translateY(78px);}
.reversed > .pentagon-number-2 {transform: rotate(0.6turn) translateY(78px);}
.reversed > .pentagon-number-3 {transform: rotate(0.4turn) translateY(78px);}
.reversed > .pentagon-number-4 {transform: rotate(0.2turn) translateY(78px);}
svg.pentagon > text {
    font-size: 32px;
}
svg.pentagon > text.current {
    font-size: 44px;
}

.icosahedron-outer {
    display: inline-block;
    transform-style: preserve-3d;
    transform-origin: 12.49vw 4.2075vw;
    padding-left: 4.75vw;
    width: 20vw;
}
.icosahedron-inner {
    position: absolute;
    transform-style: preserve-3d;
    transform-origin: 7.99vw 4.2075vw;
}
.triangle {
    width: 15.98vw;
    height: 12.5375vw;
    transform-origin: 7.99vw 4.2075vw;
    stroke-width: 2px;
}
.triangle-number-0 {transform: translateY(92px);}
.triangle-number-1 {transform: rotate(120deg) translateY(92px);}
.triangle-number-2 {transform: rotate(240deg) translateY(92px);}
.reversed > .triangle-number-1 {transform: rotate(240deg) translateY(92px);}
.reversed > .triangle-number-2 {transform: rotate(120deg) translateY(92px);}
svg.triangle > text {
    font-size: 42px;
}
svg.triangle > text.current {
    font-size: 60px;
}

.kleinohedron {
    width: 30vw;
    margin-top: -15vw;
    transform: translateY(9.25vw);
}