body {
    margin: 0;
    /* ensures that no white border around complete page */
}

table {
    border-collapse: collapse;
    border: 1px solid transparent;
    text-align: left;
}

th, td {
    padding: 6px;
    /* spacing between table rows */
}

th:nth-child(1), td:nth-child(1) {
    width: 225px;
    /* defines the size of the table 1st column */
}

th:nth-child(2), td:nth-child(2) {
    width: 475px;
    /* defines the size of the table 2nd column */
}

input[type="number"], input[type="text"] {
    background-color: rgb(243, 242, 242);
    color: #000000;
    width: 100%;
    /* ensure <input> fields fill the entire column width of table in which they are embedded */
    box-sizing: border-box;
    /* ensures that padding and border are included in the width */
}

input[type="range"] {
    width: 90%;
    /* ensure slider fields fill only part of the column width of table in which they are embedded, to make sure still space for the span element showing the selected year */
}

select {
    width: 100%;
    /* ensure <select> dropdown input fields fill the entire column width of table in which they are embedded */
    box-sizing: border-box;
    /* ensures that padding and border are included in the width */
}

#header_bar {
    /* work with id (#) instead of class since the header_bar is a rather unique element without repetition (compare to eg css for a button which would be more suitable to make a class when multiple buttons) */
    /* settings here apply to ALL sub divs of the header_bar as long as in html file, the sub_div is under the 'header_bar' div hierarchy! */
    display: flex;
    /* ensures all sub divs of the header_bar are in line */
    min-height: 5.0vh;
    align-items: flex-end;
    /* aligns text to the bottom of each section */
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    /* text colour */
    font-family: "Lucida Console", "Arial", "Courier New", monospace;
    /* should feature several fonts as a backup, to ensure max compatibility between browsers/OS. Start with pref font, end with GENERIC FAMILY (hence no parenthesis) to let the browser pick a similar font in the generic family, if no other fonts are available */
}

#header_bar_section_left {
    flex: 6;
    /* 'flex: x' ensures all sub elements of the header_bar remain in line horizontally and divide the space within the header_bar by the ratio of the flex values */
    font-size: 2.5vw;
    font-weight: bold;
}

#header_bar_section_left img {
    /* applies to the image of the div 'header_bar_section_left' */
    width: 2.5vw;
    height: auto;
    /* scale height proportionally to image width */
    /* margin-right: 10px; Add some spacing between the image and the text */
}

#header_bar_section_right {
    flex: 0.75;
    /* 'flex: x' ensures all sub elements of the header_bar remain in line horizontally and divide the space within the header_bar by the ratio of the flex values */
    font-size: 0.65vw;
    font-weight: bold;
}

#header_bar_section_right img {
    height: 1em;
    /* image same 'size' as text (defined with font-size above) */
    width: auto;
    vertical-align: middle;
    /* align with text */
    /* margin-right: 10px; Add some spacing between the image and the text */
}

#main_section {
    /* background-color: rgb(38, 38, 38); */
    background-color: rgb(28, 50, 97);
    /* background-color: rgb(21, 28, 46); */
    /* background-color: rgb(34, 122, 193); */
    /* background-color: rgb(30, 49, 96); */
    color: rgb(206, 198, 198);
    font-family: "Helvetica", "Arial", "Lucida Console", "Courier New", monospace;
    font-size: medium;
}

#footer img {
    /* this styles the page-closing airport image */
    width: 100%;
    height: auto;
}

a:link {
    /* this is for styling of hyperlinks */
    /* unvisited link */
    text-decoration: none;
    /* links do not feature underline */
    color: white;
}

a:visited {
    /* visited link */
    text-decoration: none;
    color: white;
}

a:hover {
    /* mouse over link */
    /* MUST come after a:link and a:visited in the CSS definition in order to be effective */
    text-decoration: none;
    /* text-decoration: underline; */
    /* text-decoration-color: grey; */
    color: gray;
    /* change the colour of the link when moving mouse over it */
}

a:active {
    /* selected link */
    /* MUST come after a:hover in the CSS definition in order to be effective */
    text-decoration: none;
    color: white;
}

.tooltip {
    /* this is for mouseover hints */
    /* this is a class element (. instead of #), since repetitive (so id would be too unique) */
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 250px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}