/* Gregory Ecklund */
/* February 2023 */

/* Background Color */
body {
    background-color: gray;
}

/* Element 1 */
.element1 {
    display: flex;
    margin-left: 250px;
    float: left
}

/* Element 2 */
.element2 {
    display: flex;
    justify-content: right;
    margin-right: 250px;
    float: right;
}

/* Both Element Grids */
.comparisons {
    clear: left;
    margin-top: -75px;
}
.element1Labels > p, .element1Info > p, .element2Labels > p, .element2Info > p {
    font-size: 12px;
    border-width: 2px;
    padding: 5px;
    border-style: solid;
    margin: 0;
    text-align: center;
}
.element1Labels, .element2Labels {
    color: black;
    background-color: limegreen;
}
.element1Info, .element2Info {
    color: black;
    background-color: turquoise;
}

/* Settings */
.settings > label {
    display: inline-block;
    clear: left;
    width: 120px;
    text-align: left;
}
#inputElement1, #inputElement2, #pressureSelect, #temperatureSelect {
    width: 100px;
    text-align: center;
}

/* Navbar */
.navbar {
    overflow: hidden;
    margin-bottom: 2%;
}
/* Navbar Elements */
.navbar a {
    float: left;
    text-decoration: none;
}
/* Navbar Dropdown Containers */
.dropdown {
    float: left;
    overflow: hidden;
}
/* Change Background Color on Hover */
.navbar a:hover, .dropdown:hover .dropdownLabel {
    background-color: lightgreen;
}
/* Dropdown Div */
.dropdownLinks {
    display: none;
    position: absolute;
}
/* Dropdown Options */
.dropdownLinks a {
    float: none;
    display: block;
}
/* Display Dropdown Options on Hover */
.dropdown:hover .dropdownLinks {
    display: block;
}
/* Background Color and Border */
.navbar a, .dropdownLabel {
    border-style: solid;
    border-width: 1px;
    border-color: black;
    background-color: lightskyblue;
    padding: 15px;
    font-size: 16px;
    color: black;
    text-align: left;
}