body{
    background-image: url("Photos/cloudsDay.jpg");
    background: linear-gradient(
                     rgba(54, 53, 53, 0.5), 
                     rgba(49, 48, 48, 0.5)),
                     url("Photos/cloudsDay.jpg");
    background-size: 1920px 1080px; 
    overflow-y: hidden;
}
#city{
  font-size: 65px;  
}
#temp{
    font-size: 50px;
}
#weather{
    font-size: 40px;
}
#main{
  width: 100%;
  height: 100%; 
  text-align: center;
  position: absolute;
  top: 22%;
  left: 0%;
  line-height: 90px;
  font-family: 'Yellowtail', cursive;
  color: white;
}
#myName{
    position: absolute;
    left: 1;
    bottom: 0;
    color: white;
    font-family: 'Yellowtail', cursive;
}
#creator{
    position: absolute;
    right: 10px;
    bottom: 0;
    color: white;
    font-family: 'Yellowtail', cursive;
}
#weatherAPI{
    position: absolute;
    right: 10px;
    bottom: 20px;
    color: white;
    font-family: 'Yellowtail', cursive;
}
#tempTypes{
    position: absolute;
    right: 20px;
    top: 0px;
    color: white;
    font-family: 'Yellowtail', cursive;
    font-size: 40px;
    display: inline-block;
}
#cButton{
    background-color: transparent;
    border: none;
    font-size: 40px;
    padding: 5px 10px;
    font-family: 'Yellowtail', cursive;
    color: white;
    outline: none;
}
#fButton{
    background-color: transparent;
    border: none;
    font-size: 40px;
    padding: 5px 10px;
    font-family: 'Yellowtail', cursive;
    color: white;
    outline: none;
} 
#leftP{
    color: Transparent;
    position:relative;
    bottom: 40px;
    left: 8px;
    text-decoration: none;
    cursor: context-menu;
    display: block;
    height: 1px;
    width: 1px;
}

#rightP{
    color: Transparent;
    position:relative;
    bottom: 40px;
    left: 8px;
    cursor: context-menu;
    display: block;
    height: 1px;
    width: 1px;
}
#forLP{
    display: inline-block;
    height: 50px;
    width: 30px;
}
#forLP:hover #leftP{
    color: #ffffff;
}
#forLP:focus #leftP{
    color: #ffffff;
}
#forRP{
    display: inline-block;
    height: 50px;
}
#forRP:hover #rightP{
    color: #ffffff;
}
#forRP:focus #rightP{
    color: #ffffff;
}
/*Dynamic font size: 7vw*/
#Logo{
    position: absolute;
    top: -40px;
    font-family: 'Yellowtail', cursive;
    font-size: 42px;
    color: #ffffff;
}

#search-bar{
   position: absolute;
   top: 1px;
   width: 225px; 
   height: 25px;
   left: 10px;
   font-size: 25px;
   text-align: none;
   background: transparent;
   border: none;
   color: #ffffff;
}
#search-bar:focus{
    outline: none;
}
#search-btn{
    position: relative;
    bottom: 0px;
    left: 225px;
    height: 30px;
    width: 50px;
    border: none;
    background: transparent;
    cursor: pointer;
}
#search-btn:focus{
    outline: none;
}    
#search-bar-btn{
    position: fixed;
    margin: auto;
    left: 310px;
    top: 13px;;
    /*
    top: 15px;
    right: 790px;
    */
    height: 30px;
    width: 270px;
    border: 3px solid white;
    border-radius: 50px;
}
.fas fa-search fa-2x {
    font-size: 10px;
}
.fa-cog{
    color: #ffffff;
}
::-webkit-input-placeholder { 
    font-family: 'Yellowtail', cursive;
    color: #ffffff;
}
@media screen and (min-width: 420px) {
    p br{
        display: none;
    }
}
@media screen and (max-width: 360px) {
    #myName{
    position: absolute;    
    right: 6px;
    bottom: 40px;
    }
}

@media screen and (max-width: 685px) {
   #search-bar-btn{
       position: relative;
       top: 140px;
       left: 10px;
       z-index: 1;
   }
}