@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;600&display=swap');

.weather-content{
    font-family: 'Oswald', sans-serif;
    color:#f5f5f5;
    font-weight: 300;

}
.weather-content .weather{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    box-shadow: rgba(99, 99, 99, 0.6) 0px 2px 8px 0px;
   
}

.weather-content .weather .w-sec-top{
    display: flex;
    justify-content: space-between;
    z-index: 99;
    padding: 6px 0;

    
}

.weather-content .weather-bg{
    width: 100%;
    height: 100%;
    position: absolute;
    display: inline;
    top:0;
    left: 0;
    border-radius: 10px;
    /* background-image: url(../media/gece2.jpg); */
    background-repeat: no-repeat;
    object-fit: cover;
    background-size: cover;
    background: #1f4037;
    /* #2193b0;  */
     /* fallback for old browsers */
    /* background:; */
     /* #2193b0  W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */



}

.w-top,.w-body,.footer-content{
    position:relative ;
    z-index: 99;
}
.w-top{
    display:flex;
    justify-content: space-between;
    margin-bottom: 9px;
}
 .weather-content  li{
    list-style: none;
    
}
.weather-content ul{
    padding: 0;
    margin: 0;
    list-style-type: none;

}
.w-top h3{
    font-size: 3.5rem;
    color:#f5f5f5;
    font-weight: 600;
}

.w-top ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.w-top ul li{
    font-weight: 200;
    color: #f5f5f5;
    font-size: 2rem;
    margin-left:4px
}

.w-body{
    display: flex;
    justify-content: space-between;

}
.w-body ul{
    display: flex;
    flex-direction: column;
    font-weight: 200;
    color: #f5f5f5;
    
}
.w-body ul li{
    font-size: 1.5rem;
}
.w-body ul li:first-child{
    font-size: 2.4rem;
}

.w-sec-top ul:last-child li{
    text-align: right;
}
.w-sec-top img{
    width:auto;
    height:19px;
    margin-right: 5px;

}

.w-body .w-state {

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: start;
    
}
.w-state h3{
    text-align: center;
    padding: 0 !important;
    padding: 0 !important;
    color: #f5f5f5;
    font-size: 24px;
    font-weight: 200;
}
.w-body .w-state span {

    
}

.weather .w-footer{
    z-index: 95;
    padding-top: 8px;
}
.weather .w-footer h3{
    text-align: center;
    padding: 0 !important;
    padding: 0 !important;
    color: #f5f5f5;
    font-size: 24px;
    font-weight: 300;

}
.times{
    display: block;
    padding: 0 12px ;
    background-color: #f5f5f5;
    border-radius: 10px;
    color: #1f4037 !important;
    font-weight: 600 !important;
}
.w-body .temp {
    display: flex;
    align-items:center ;
}
.w-body .temp h3{
    position: relative;
    color:#f5f5f5;
    font-weight: 500;
    font-size: 6rem;
    padding-right: 31px;
}

.w-body .temp h3 span{
    font-family: 'Courier New', Courier, monospace;
    position: absolute;
    top:9px;
    right:0;
    font-weight: 600;
    font-size: 3.6rem;
}


.w-svg-icon.w-svg-icon-10x svg {
    height: 9rem !important;
    width: 9rem !important;

  }

  .w-svg-icon.w-svg-icon-2x svg {
    height: 3rem !important;
    width: 2.7rem !important;

  }

  .w-svg-icon svg {

    height: 1.5rem;
    width: 1.5rem;
  }
  
  .w-svg-icon svg g [fill] {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
    
  }

  .weather-content .weather-footer{
      z-index: 40;
      margin-top:10px;
      position: relative;
      height: 100px;
      width: 100%;
      border-radius: 10px;
      box-shadow: rgba(99, 99, 99, 0.6) 0px 2px 8px 0px;

      
  }

  .weather-footer .footer-content{
      width: 100%;
      height: 100%;
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
  }

  .weather-footer .footer-content ul {
      font-weight: 300;
      display: flex;
      flex-direction: column;
      justify-content:flex-start ;
      align-items: flex-center;
      color:#f5f5f5;
      text-align: center;

}


.weather-footer .footer-content ul li:first-child {
    margin-bottom: 5px;
}