body {
    font-family: sans-serif;
    font-weight: lighter;
    background-color: white;
    -webkit-transition: color .5s; /* Safari */
    transition: color .5s;
    -webkit-transition: background-color .5s; /* Safari */
    transition: background-color .5s;
}

h1 {
    text-align: center;
    font-weight: lighter;
}

.container {
    display: block;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.button-container {
    display: flex;
    justify-content: flex-end;
    max-width: 640px;
    margin: 0 auto;
}

.button-container button {
    background-color: white;
    padding: 5px;
    margin: 10px 0px;
    font-family: sans-serif;
    min-width: 80px;
    position: relative;
    min-height: 26px;
}

.button-container button span {
    position: absolute;
    top: 16%;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    -webkit-transition: opacity .5s; /* Safari */
    transition: opacity .5s;
}

.button-container button span.dark-mode-text {
    opacity: 0;
}

.button-container button span.light-mode-text {
    opacity: 1;
}


.button-container.dark-mode button span.dark-mode-text {
    opacity: 1;
}

.button-container.dark-mode button span.light-mode-text {
    opacity: 0;
}


body.dark-mode {
    background-color: darkslategray;
}

.dark-mode p, .dark-mode a, .dark-mode h1 {
    color: white;
}
.dark-mode a:hover {
    color: gray;
}
p, a {
    color: darkslategray;
    line-height: 1.7em;
    font-size: 13pt;
}

p {
    opacity: 0.0;
    transition: opacity 1.0s;
}

p.show {
    opacity: 1.0;
}

p.choice {
    text-align: center;
}

a:hover {
    color: black;
}