styles.css

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.1rem;
    margin: 0;
    padding: 0;
    height: 100dvh;
    width: 100dvw;
    box-sizing: border-box;
}

.page {
    padding-left: 8px;
    padding-top: 8px;
    padding-right: 8px;
}

.page.loading {
    position: fixed;
    inset: 0;
    background-color: white;
}

.page.loading.collapsed {
    display: none;
}

.page.main {
    font-size: 1.17rem;
    display: grid;
    position: absolute;
    inset: 0;
    overflow: hidden;
    row-gap: 12px;
    column-gap: 12px;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-auto-rows: auto;
    align-content: start;
}

.page.main.collapsed {
    display: none;
}

.page.main > .container {
    display: grid;
}

.page.main > .output.container {
    display: block;
}

.page.main > .output.time-to.limit.container.collapsed {
    display: none;
}

.page.main > .toolbar.container {
    grid-template-columns: auto 1fr auto;
}

.page.main > .toolbar.container > .add-drink {
    grid-row: 1;
    grid-column: 1;
    justify-self: start;
    height: 7dvmax;
    width: 10dvmax;
}

.page.main > .toolbar.container > .add-drink > * {
    margin: -1px;
    transform: scale(1.7);
}

.page.main > .toolbar.container > .version {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
    align-self: start;
    margin-right: 12px;
}

.page.main > .toolbar.container > .show-settings {
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
    width: 7dvmax;
    height: 7dvmax;
}

.page.main > .toolbar.container > .show-settings > * {
    margin: -1px;
    transform: scale(1.7);
}

.page.main > .output.container > .value {
    font-weight: bold;
    color: royalblue;
}

.page.main > .drinks.container {
    grid-auto-flow: row;
    grid-auto-rows: auto;
    overflow-y: auto;
    overflow-x: visible;
    width: 100%;
}

.page.main > .drinks.container > .drink-root.container {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-rows: repeat(4, min-content);
    grid-template-areas:
        "quantity-label                    quantity-value                    quantity-hint                     delete"
        "alcohol-percentage-label          alcohol-percentage-value          alcohol-percentage-hint           ."
        "started-at-label                  started-at-value                  started-at-value                  started-at-value"
        "blood-alcohol-concentration-label blood-alcohol-concentration-value blood-alcohol-concentration-hint  ."
        ;
    border: 1px solid gainsboro;
    border-radius: 4px;
    padding: 4px;
    background-color: #ddffe8;
    align-content: space-around;
    align-items: center;
    margin-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
}

.page.main label,
.page.main span {
    white-space: nowrap;
}

.page.main > .drinks.container > .drink-root.container.is-invalid {
    background-color: #eeddff;
}

.page.main > .drinks.container > .drink-root.container.is-effective {
    background-color: #ddf8ff;
}

.page.main > .drinks.container > .drink-root.container > * {
    margin: 4px;
    width: auto; /* Fixes a fucking weird thing on mobile devices. */
}

.page.main > .drinks.container > .drink-root.container > .quantity.label {
    grid-area: quantity-label;
}

.page.main > .drinks.container > .drink-root.container > .quantity.value {
    grid-area: quantity-value;
}

.page.main > .drinks.container > .drink-root.container > .quantity.hint {
    grid-area: quantity-hint;
}

.page.main > .drinks.container > .drink-root.container > .alcohol-percentage.label {
    grid-area: alcohol-percentage-label;
}

.page.main > .drinks.container > .drink-root.container > .alcohol-percentage.value {
    grid-area: alcohol-percentage-value;
}

.page.main > .drinks.container > .drink-root.container > .alcohol-percentage.hint {
    grid-area: alcohol-percentage-hint;
}

.page.main > .drinks.container > .drink-root.container > .started-at.label {
    grid-area: started-at-label;
}

.page.main > .drinks.container > .drink-root.container > .started-at.value {
    grid-area: started-at-value;
}

.page.main > .drinks.container > .drink-root.container > .started-at.hint {
    grid-area: started-at-hint;
}

.page.main > .drinks.container > .drink-root.container > .blood-alcohol-concentration {
    font-size: 0.8rem !important;
}

.page.main > .drinks.container > .drink-root.container > .blood-alcohol-concentration.label {
    grid-area: blood-alcohol-concentration-label;
}

.page.main > .drinks.container > .drink-root.container > .blood-alcohol-concentration.value {
    grid-area: blood-alcohol-concentration-value;
}

.page.main > .drinks.container > .drink-root.container > .blood-alcohol-concentration.hint {
    grid-area: blood-alcohol-concentration-hint;
}

.page.main > .drinks.container > .drink-root.container > .value {
    font-size: 1.3rem;
    min-width: 50px;
}

.page.main > .drinks.container > .drink-root.container > .delete {
    grid-area: delete;
    justify-self: end;
    align-self: stretch;
    aspect-ratio: 1 / 1;
}

.page.main > .drinks.container > .drink-root.container > .delete > * {
    margin: -1px;
    transform: scale(1.3);
}

.page.main > .timeline.container {
    overflow: auto;
    width: 100%;
    max-height: 200px;
    border: 1px gray solid;
}

.page.main > .timeline.container.collapsed {
    display: none;
}

.page.main > .timeline.container > .timeline {
    background-color: whitesmoke;
    position: relative;
}

.page.main > .timeline.container > .timeline > * {
    box-sizing: border-box;
    cursor: none;
    pointer-events: none;
    margin: 0;
    padding: 0;
    padding-left: 4px;
    background-color: #eeeeee;
    border: 1px black solid;
    position: absolute;
    font: 12px "Segoe UI";
    color: black;
    clip-path: stroke-box;
}

.page.main > .timeline.container > .timeline > .time-to-limit {
    background-color: red;
    border: 0;
    padding: 0;
}

.page.main > .timeline.container > .timeline > .now {
    background-color: royalblue;
    border: 0;
    padding: 0;
}

.page.main > .timeline.container > .timeline > .separator {
    background-color: #202020;
    border: 0;
}

.page.settings {
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: auto;
    row-gap: 8px;
    padding-top: 8px;
}

.page.settings.collapsed {
    display: none;
}

.page.settings > .header {
    display: grid;
}

.page.settings > .header > .close {
    font-size: x-large;
    grid-row: 1;
    width: 7dvmax;
    height: 7dvmax;
    justify-self: end;
}

.page.settings label,
.page.settings span {
    white-space: nowrap;
}

.page.settings > hr {
    width: 100%;
    box-sizing: border-box;
}

.page.settings > .variables {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-auto-flow: row;
    grid-auto-rows: auto;
    justify-content: start;
    align-items: center;
    row-gap: 12px;
}

.page.settings > .variables > * {
    margin: 4px;
}

.page.settings > .variables > .value {
    max-width: 80px;
    font-size: 1.5rem;
}

.page.settings > .info {
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: auto;
    row-gap: 20px;
}

.page.settings > .info > .rho-factor {
    display: grid;
    grid-template-columns: 32px auto;
    grid-auto-flow: row;
    grid-auto-rows: auto;
    grid-template-areas:
        "description description"
        ". for-male"
        ". for-female"
        ;
    row-gap: 4px;
}

.page.settings > .info > .rho-factor > .description {
    grid-area: description;
}

.page.settings > .info > .rho-factor > .for-male {
    grid-area: for-male;
}

.page.settings > .info > .rho-factor > .for-female {
    grid-area: for-female;
}

.page.settings > .info > .alcohol-elimination-rate {
    display: grid;
    grid-template-columns: 32px auto;
    grid-auto-flow: row;
    grid-auto-rows: auto;
    grid-template-areas:
        "description description"
        ". for-human"
        ;
    row-gap: 4px;
}

.page.settings > .info > .alcohol-elimination-rate > .description {
    grid-area: description;
}

.page.settings > .info > .alcohol-elimination-rate > .for-human {
    grid-area: for-human;
}

.page.settings .default-value {
    color: royalblue;
}