/**
* Color palatte for both light mode and dark mode.
*
* This design sticks with the default `background-color` for backgrounds
* and `color` for text, so we don't need colors for those.
*
* Source of info: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme
*/
:root {
color-scheme: light dark;
}
@media (prefers-color-scheme: light) {
:root {
--choice: #e0e0ff;
}
}
@media (prefers-color-scheme: dark) {
:root {
--choice: #404060;
}
}
body {
/**
* Font is Roboto everywhere. Each page has s to load as needed.
*/
font-family: Roboto;
/**
* Every page on this site has a very simple layout: a vertical
* sequence of things. The element is a flexbox, and each
* of the things in the body is one of the things in the vertical
* layout.
*/
display: flex;
flex-direction: column;
gap: 1em;
align-items: center;
/**
* This site is primarily aimed at phones and tablets. The buttons
* and text boxes have a maximum width to match that expectation.
*/
max-width: 400px;
margin: 0 auto;
}
/**
* The "row" class is used for a div holding things to be laid out horizontally.
*/
.row {
display: flex;
flex-direction: row;
gap: 1em;
}
/**
* Speed control: hide the radio button and highlight the label when selected.
*/
input[type="radio"] {
appearance: none;
position: absolute;
}
label:has(input[type="radio"]) {
background-color: var(--choice);
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
/* center the text both horizontally and vertically */
display: flex;
align-items: center;
justify-content: center;
}
label:has(input[type="radio"]:checked) {
/* The selected one has an outline, not a border, so the layout does't
* change when it's selected.
*/
outline: solid;
}
/**
* The "choice" class is used for the elements that link to the next page.
*/
.choice {
background-color: var(--choice);
width: 100%;
text-align: center;
padding: 18px 24px;
border: none;
border-radius: 12px;
font-size: 1.3rem;
font-weight: 500;
box-sizing: border-box;
color: inherit;
text-decoration: none;
}
audio {
margin-bottom: 1em;
width: 100%;
}
fieldset {
margin-bottom: 2em;
}