html, body {
    width: 100%;
    height: 100%;
}

.container {
    display: grid;

    height: 100%;
    width: 100%;

    grid-template-columns: 100%;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "intro"
        "table"
        "form";

    padding-top: 5%;
}

.intro {
    grid-area: intro;
}

.button-container {
    margin: 20% 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

form {
    grid-area: form;
    margin-top: 12.5%;
}

form .button-container {
    margin-top: 12.5%;
}

@media (min-width: 576px) {
    .button-container {
        margin: 5% 0;
    }

    form {
        margin-top: 5%;
    }

    form .button-container {
        margin-top: 5%;
    }
}

#table-container {
    grid-area: table;
    white-space: nowrap;
}

.status-message {
    display: none;
}

h3 {
    text-align: center;
}

.form-text {
    text-align: center;
}

.links * {
    padding-left: 10px;
    color: white;
    text-decoration: none;
}

.links *:hover {
    text-decoration: underline;
}

.variable-value {
    text-align: right;
}

.units * {
    font-weight: normal;
    text-align: right;
    font-style: italic;
}

.units * b {
    font-weight: bold;
}