* {
    box-sizing: border-box;
}

*:before,
*:after {
    box-sizing: border-box;
}

body {
    background-color: green;
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-size: 1em;
    font-family: arial, "arial thin", sans-serif;
}

#wrapper {
    background-color: lightblue;
    width: 100%;
}

#hi-lo {
    display: flex;
    align-content: space-between;
    font-size: 2em;
    color: deeppink;
}

#hi-lo>li {
    display: inline-block;
    width: %;
}

#conditions {
    display: flex;
    justify-content: center;
    align-items: center;
}

h1 {
    display: flex;
    justify-content: center;
    color: crimson;
}

h2 {
   display: flex;
    justify-content: center;
    color: darkkhaki;
}

#precip {
    color: blue;
}

#wind {
    color: white;
}

#direction {
    color: brown;
}

#local {
    color: red;
}
@media only screen and (max-width: 992px) {
    body{
        background-color: red;
    }
}

#header {
    color: aqua;
    text-align: center;
    font-size: 4em;
}

#sunny1 {
    display: flex;

}
#pictures {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 20;
    width: 25%;
}

#bum {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    color: darkgoldenrod;
    margin-right: 2em;
}