/* CSS variables */

:root {
    --background: #3b4252;
    --text-on-background: #eceff4;
    --text-on-theme: #eceff4;
    --theme: #bf616a; /* Also in HTML as theme colour + favicon SVG */
    --theme-2: #ebcb8b;
    --theme-3: #b48ead;
}

html,
body {
    font-family: "JetBrains Mono", "Berkeley Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
    background: var(--background);
    color: var(--text-on-background);

    margin: 0;
    /* Remove default margin */
    height: 100%;
    /* Ensure full height */

    font-display: swap;
}


.index-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center align vertically */
    align-items: center;
    /* Center align horizontally */
    height: 100vh;
    /* Fill the entire height of the viewport */
}

.region-selector-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* Adjust the gap between cards as needed */
    justify-content: center;
    /* Center align the cards horizontally */
}

.region-selector {
    width: 300px;
    /* Adjust the width of the cards as needed */
    text-align: center;
    /* Center align the content within the cards */
    padding: 0px;
    border: 2px solid var(--theme);

    font-weight: bold;
}

.region-selector:hover {
    background: var(--theme);
    color: var(--text-on-theme);
}

.region-name {
    padding: 6px;
    font-size: 22px;
}

.flag-header {
    width: 100%;
    /* Adjust the width of the flag images as needed */
    height: auto;
    /* Maintain aspect ratio */
    display: block;
    margin: 0 auto;
    /* Center the flag image vertically and horizontally */
    border-bottom: 2px solid var(--theme);
}

/* Reset a so it can be used to make clickable divs */
a {
    text-decoration: none;
    color: inherit;
}

.filter-section-lists {
    width: 300px;
    display: flex;
    padding: 10px;
    justify-content: flex-start;
    flex-direction: column;
    gap: 10px;
}

.filter-section {
    border: 2px solid var(--theme);
    padding: 5px;
    text-align: center;
}

.filter-section p,
.filter-section h2 {
    margin: .5em;
}

.filter-section-inputs-container {
    display: flex;
    flex-direction: row;
    width: 250px;
    margin: auto;
    justify-content: space-between;
}

.filter-section-input {
    padding: 5px;
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
}

.filter-section-input input {
    width: 100px;
    margin: 0;
    margin-top: 5px;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;

    background-color: var(--background);
    color: var(--text-on-background);
    border: 2px solid var(--theme);
}

input[type="number"]:focus {
    outline: 1px solid var(--theme);
    border: 2px solid var(--theme);
    box-shadow: inset 0px 0px 3px 0px var(--theme);
}

button {
    background-color: var(--background);
    color: var(--text-on-background);
    border: 2px solid var(--theme);
    font-weight: bold;
    padding: 5px;
    margin: 5px;
}

button:hover {
    background-color: var(--theme);
    color: var(--text-on-theme);

    cursor: pointer;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    /* Example width */
    height: 20px;
    /* Example height */
    border: 2px solid var(--theme);
    /* Example border */
    border-radius: 0px;
    background-color: var(--background);
    /* Example background color */
    outline: none;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
}

input[type="checkbox"]:checked {
    background-color: var(--theme);
}

.filter-stagger-section {
    display: flex;
    flex-direction: row;
    margin-top: 5px;
    margin-bottom: 5px;
    justify-content: space-between;
    align-items: center;
}

.filter-section-stagger-container {
    width: 250px;
    margin: auto;
}

.link {
    color: var(--theme-2);
    text-decoration: underline;
}

.link:hover {
    color: var(--theme);
}

.link-remember {
    color: var(--theme-2);
    text-decoration: underline;
}

.link-remember:hover, .link-remember:visited:hover, .link-remember:active, .link-remember:visited:active {
    color: var(--theme);
}

.link-remember:visited {
    color: var(--theme-3);
}

.country-main {
    display: flex;
    min-width: 100%;
}

.items-display {
    border: 2px solid var(--theme);
    margin: 10px;
    margin-left: 0px;

    align-self: flex-start;
}

#loading-msg {
    text-align: center;
    padding: 10px;
    font-size: 16px;
}

#info-section div {
    margin-top: 5px;
    margin-bottom: 5px;
}

table {
    white-space: nowrap;
    font-size: 14px;

    text-align: left;

    table-layout: fixed;

    border-collapse: collapse;
}

th, td {
    padding-left: 5px;
    padding-right: 5px;
}

th {
    border-bottom: 2px solid var(--theme);
}

tr:hover {
    background-color: var(--theme);
    color: var(--text-on-theme);
    /* CANNOT do bold here or it redoes the layout */
}

tr:hover .link-remember:hover {
    color: var(--text-on-theme);
}

select {
    background-color: var(--background);
    color: var(--text-on-background);
    border: 2px solid var(--theme);

    min-height: 27px;

    cursor: pointer;
}

article {
    text-align: left;
}

hr {
    border: 1px solid var(--theme);
    margin: 10px;
}

h3 {
    margin: 0px;
    padding: 0px;
}

::selection {
    background-color: var(--theme-2);
    color: var(--background);
}

/* For Firefox */
::-moz-selection {
    background-color: var(--theme-2);
    color: var(--background);
}