@import url("weather-icons.css");

body{
   background-image: linear-gradient(45deg, rgba(240, 230, 227, 0.5) 10%, rgba(148, 170, 182, 0.8) 100%), linear-gradient(-45deg, #494d71 0%, rgba(217, 230, 185, 0.5) 80%);
   font-size: 16px;
   font-family: 'Roboto';
}
 button:focus {
    outline:0;
}
.heading{
   text-align: center;
   position: absolute;
   margin-top: 20px;
   height: 100vh;
   width: 100vw;
   background: none;
   font-size: 80%;
}
.widget-container{
   box-shadow: 9px 7px 40px -6px rgba(0,0,0,0.25);
   background: none;
   height: 250px;
   width: 400px;
   position: absolute;
   top: 50%;
   text-align: left;
   left: 50%;
   transform: translate(-50%, -50%);
}
.top-container{
   position: absolute;
   text-align: left;
   background-color: #404040;
   border-top-right-radius: 8px;
   border-top-left-radius: 8px;
   height: 40%;
   width: 100%;
}
.top-right-container{
   width: 55%;
   padding-left: 10px;
   overflow: visible;
   text-align: right;

}
.top-left-container{
   width: 40%;
   margin: 0px;
   padding: 0px;
}
.bottom-container{
   box-shadow: none;
   background-color: white;
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
   height: 60%;
   width: 100%;
   margin-top: 25%;
   vertical-align: middle;
}
.footer{
   position: absolute;
   bottom: 0px;
   text-align: right;
}
.loading-display{
   position: absolute;
   top: 50%;
   text-align: center;
   left: 50%;
   font-size: 70%;
   transform: translate(-50%, -20%);
   letter-spacing: 0.7px;
   font-weight: bold;
   text-decoration: inherit;
}
.badge{
   height: 35px;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   margin-top: 150px;
   margin-left: 0;
}
.light-hover:hover {
   opacity: 0.5;
   transition: opacity 0.1s ease-in;
}
.current-temp{
   font-size: 250%;
   color: white;
   font-family: 'Roboto';
   font-weight: lighter;
   text-align: left;
   margin-top: 14px;
   margin-left: 20px;
}

.inline{
   display: inline-block;
   vertical-align: top;
}
.temp-format {
   font-size: 70%;
   position: relative;
   vertical-align: top;
   transform: translate(348px, -140px);
   border: 0px;
   background: none;
   margin-left: -4px;
   font-weight: lighter;
   cursor: pointer;
   visibility: hidden;
}

.celsius{
   border-right: 0.5px solid grey;
   padding-right: 8px;
   color: grey;
   pointer-events: none;
}
.faren{
   color: #b3b3b3
}
.subtitle{
   text-decoration: none;
   color: inherit;
   margin-left: 20px;
   margin-right: 20px;
}
.subtitle:hover{
   text-decoration: underline;
}
.curr-description{
   font-size: 130%;
   color: black;
   margin-top: 25px;
   margin-bottom: -6px;
   text-align: right;
   font-weight: lighter;
   letter-spacing: 1.5px;
   margin-right: 17px;
}
.small-icon{
   height: 15px;
   margin-top: 15px;
   margin-right: -5px;
   visibility: hidden;
   opacity: 0.4;
}
.precip, .wind, .sunset, .clouds{
   color: white;
   margin-left: 7px;
   margin-top: 17px;

}
.small-desc{
   font-size: 75%;
   font-family: 'Roboto';
   color: white;
   font-weight: lighter;
   letter-spacing: 0.9px;
   padding-right: 15px;
   opacity: 0.6;
}
.loc-name{
   margin-left: 23px;
   transform: translate(0px, -42px);
   font-size: 90%;
}
.time{
   color: black;
   font-size: 100%;
   margin-left: 23px;
   padding-top: 18px;
}
.wi{
   font-size: 200%;
   visibility: hidden;
   color: white;
   margin-right: 13px;
   margin-top: 18px;
   margin-bottom: -5px;
   text-align: right;
   opacity: 0.7;
}
.label-off{
   opacity: 0.5;
   cursor: pointer;
}
.chart-hidden{
   visibility: hidden;
}
.legend-label{
   border: none;
   background: none;
   font-weight: lighter;
   margin-top: 10px;
}
.graph-legend{
   text-align: center;
   visibility: hidden;
}
.graph{
   position: absolute;
   margin: 0 auto;
   vertical-align: middle;
   width: 330px;
   height: 95px;
   transform: translate(20px, 10px);
}
.last-updated{
   height: 35px;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   margin-top: 190px;
   margin-left: 0;
   color: white;
   text-align: center;
   font-size: 70%;
   font-weight: bold;
}