@charset "utf-8";
/* CSS Document */

*		{	box-sizing: border-box;}

.display         {  background-color: #222222;
                    padding: 2em;
                    border-radius: 30px;
                    width: 100%;
                    max-width: 420px;
                    margin: 1em;
                    opacity: .9;
                    color: #ffffff;
}
.search_area      {  display: flex;
                    align-items: center;
                    justify-content: center;
}

#search_button     {    margin: .5em;
                        border-radius: 50%;
                        height: 2.5em;
                        width: 2.5em;
                        border: none;
                        background-color: #ffe4c4;
                        cursor: pointer;
                        outline: none;
                        
}
#search_box         {   border: none;
                        outline: none;
                        padding: .35em;
                        border-radius: 18px;
                        font-family: inherit;
                        font-size: 120%;
                        background-color: #ffe4c4;
                        cursor: pointer; 
                        width: 75%;                   
}
#weatherGraphic     {   float: right;
                        position: relative;
                        margin-top: -15%;
                        margin-bottom: 0;
                        padding-bottom: 0;
                        transform: scale(1.7);
                        margin-right: 31px;
                        width: 30%;
                        text-align: center;
}
#description        {   clear: both;
                        float: right;
                        margin-top: 0;
                        margin-right: 10%;
                        width: 30%;
                        text-align: center;
}
#humidity           {   clear: both;
}
#theSite            {   margin-bottom: 0;
}
#theTime            {   margin-top: 0;
                        margin-bottom: 0;
}
#degrees            {   font-size: 4em;
                        margin-top: 0;
                        padding-top: 10px;
                        margin-bottom: 0;
                        padding-bottom: 0;
}
#feelsLike          {   margin-top: -10px;
                        padding-top: 0;
                        position: relative;
                        margin-bottom: 0;
}
#key                {   font-size: 70%;
                        margin-top: 0;
}
#wind               {   margin-top: 2.0%;}
#windDeg            {   margin-top: 2.0%;}


button  img         {   width: 1.5em;
}
button:hover        {   transform: scale(1.1);}
#search_box:hover        {   background-color: #ffffff;}
body                {   display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 100vh;
                        margin: 0;
                        background-color: #eaeaea;
                        background-image: url("https://source.unsplash.com/1600x900/?annapolis");
                        font-family: Calibri, sans-serif;
}