@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&display=swap');

/* CSS HEX */
:root {
    --font-main: "Open Sans", sans-serif;
    --font-condensed: : "Oswald", sans-serif;

    --prussian-blue: hsla(201, 100%, 14%, 1);
    --fire-engine-red: hsla(0, 69%, 50%, 1);
    --orange-wheel: hsla(31, 100%, 48%, 1);
    --xanthous: hsla(40, 97%, 64%, 1);
    --vanilla: hsla(51, 55%, 82%, 1);
}


* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

body {
    font-family: "Open Sans", sans-serif;
    font-weight: 400 !important;
}

#map {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}

#selectContainer {
    position: fixed;
    top: 0;
    left: 28%;
    z-index: 1000;
    width: 44%;
    padding: 11px 0;
    text-align: center;
}

.popup-icon {
    font-size: 1.2em;
}

.popup-data {
    font-size: 1.25em;
    font-weight: 600;
}

.modal-body img {
    max-width: 100%;
}

.modal-data-lrg {
    font-size: 1.3em;
    font-weight: 600;
}

.hr-modal {
    border: 1px solid #0DCAF0;
    margin: 0 0 .5rem 0;
}

.modal-data-label {
    font-size: 1em;
    font-weight: 300;
    font-family: "Oswald", sans-serif;
}

.modal-data {
    font-size: 1.16em;
    font-weight: 600;
}

.modal-data .dataYear {
    font-size: .9em;
    font-weight: 400;
    font-style: italic;
}

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

.weatherIcon img {
    width: 44%;
    background-color: var(--vanilla);
}

.weatherDescription1 {
    font-size: 1.2em;
    font-weight: 600;
}

.weatherDescription2 {
    font-size: 1.1em;
    font-weight: 500;
    font-style: oblique;
}

.weatherMeasurement {
    font-weight: 400;
    font-style: italic;
    padding-left: .25em;
}

.modal .dataDateTitle {
    text-align: right;
    font-size: .9em;
    margin-bottom: 0
}

.modal .dataDate {
    text-align: right;
    font-size: .8em
}