:root {
    --color-bg: #fff;
    --color-text: #555;
    --color-heading-text: #610161;
    --color-link-text: LinkText;
    --color-visited-text: VisitedText;
    --color-top-container-bottom: rgba(0, 0, 0, 0.5);
    --color-button-background: #bdd6f7;
    --color-button-border: #471ba9;
    --color-button-text: #400351;
    --color-button-hover: #cbe0f3;
    --color-button-selected-background: #125B9B;
    --color-button-selected-text: white;
    --color-home-link: #3d4fe5;
    --color-status-bar: #444;
    --color-table-border: #854f86;
    --color-table-header: lightblue;
}

html {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
}

body {
    margin: 0;
    flex-grow: 1;
    font-family: sans-serif;
    font-size: 1.1rem;
    color: var(--color-text);
}

#appleMobileWebAppStatusBarId {
    position: sticky;
    top: 0;
    width: 100%;
    height: env(safe-area-inset-top);
    background-color: var(--color-status-bar);
}

#bottomContainerId {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#contentId {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 0.5rem;
}

#moreContentId {
    padding: 0 0.2rem;
}

#topContainerId {
    position: sticky;
    top: env(safe-area-inset-top);
    width: 100%;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-top-container-bottom);
}

h1, h2, h3 {
    margin: 1rem 0;
    color: var(--color-heading-text);
    text-align: center;
}

h2 {
    margin-top: 0.5rem;
    margin-bottom: 0.4rem;
}

h3 {
    margin-bottom: 0.5rem;
}

#homeId {
    font-size: 3rem;
    text-align: center;
    line-height: 2.5rem;
}

#homeId a {
    color: var(--color-home-link);
}

.centerText {
    text-align: center;
}

button {
    font-size: 1.1rem;
    margin: 0.5rem 0.5rem 0.5rem 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--color-button-background);
    color: var(--color-button-text);
    border: 2px solid var(--color-button-border);
    cursor: pointer;
}

.selected {
    background-color: var(--color-button-selected-background);
    color: var(--color-button-selected-text);
}

input {
    font-size: 1rem;
}

a {
    text-decoration: none;
    color: var(--color-link-text);
}

a:visited {
    color: var(--color-visited-text);
}

#bulletsId {
    letter-spacing: 0.15rem;
    color: var(--color-link-text);
}

#currentListContainerId {
    width: -moz-fit-content;
    width: fit-content;
}

#currentListContainerId > div {
    display: flex;
    flex-direction: column;
    row-gap: 0.6rem;
}

#buttonContainerId {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 0.2rem;
}

#searchContainerId {
    display: flex;
    justify-content: center;
    margin: 0.75rem;
}

#searchId {
    height: 2rem;
}

#facebookId {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 1rem;
    height: 1rem;
}

#facebookId a, #facebookId img {
    height: 2rem;
}

.divisionKey {
    text-align: center;
}

table {
    border-collapse: collapse;
}

.tableNoBorders {
    border: none;
}

.tableInnerBorders td, .tableInnerBorders th {
    border: 1px solid var(--color-table-border);
}

.tableStickyHeader th {
    position: sticky;
    top: env(safe-area-inset-top);
}

table.tableColoredHeader {
    border: hidden;
    border-bottom: 1px solid var(--color-table-border);
}

.tableColoredHeader thead, .tableColoredHeader th {
    background-color: var(--color-table-header);
    border-style: hidden !important;
}

/* Give extra space width-wise if used on a screen larger than an iPhone 7 Plus */
.dataframe td, .dataframe th {
    padding: 0.5rem 1rem 0.5rem 0.2rem;
}

/* Squish content width-wise if used on a screen the size of an iPhone 7 Plus or smaller */
@media only screen and (max-device-width: 414px) and (orientation: portrait) {
    .dataframe td, .dataframe th {
        padding: 0.4rem 0.1rem 0.4rem 0;
    }
}