body{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: sans-serif;
    font-weight: 100;
    color: white;
    min-height: 100vh;
    width: 100%;
    /* background: rgb(2,0,36); */
    background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 30%, rgb(0, 4, 255) 100%);
    padding: 0px;
    margin: 0px !important;
}
#header{
    display: flex;
    flex-direction: column;
    padding: none;
    margin: none;
    width: 100vw;
    height: 100px;
    justify-content: center;
    align-items: center;
    background: rgba(56, 77, 85, 0.6);;
}
#attribution{
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}
#attributionLink{
    color: cyan;
    
}
h1{
    width: fit-content;
    border: 4px solid white;
    padding: 1rem 3rem;
    border-radius: 15px;
}
form{
    display: flex;
    flex-direction: column;
}
form input{
    padding: 1rem;
    font-family: sans-serif;
    color: white;
    background: rgba(0, 0, 0, 0.171);
    border: 2px solid white;
    border-radius: 10px;
}
form button{
    margin-top: .25rem;
    padding: .5rem 0rem;
    font-family: sans-serif;
    color: white;
    background: rgba(69, 81, 175, 0.381);
    border: 2px solid white;
    border-radius: 10px;
}
@-webkit-keyframes submitAnimation {
    0% {
        background: rgba(69, 81, 175, 0.381);
    }
    50% {
        background: rgb(0, 239, 24);
    }
    100% {
        background: rgba(69, 81, 175, 0.381);
    }
  }
  
  @keyframes submitAnimation {
    0% {
        background: rgba(69, 81, 175, 0.381);
    }
    50% {
        background: rgb(0, 239, 24);
    }
    100% {
        background: rgba(69, 81, 175, 0.381);
    }
  }
#weatherInfo{
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#locationName{
    text-align: center;
    -webkit-animation: slide-up 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
              animation: slide-up 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#weatherData{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70vw;
    max-width: 1904px;
    margin: 1rem;
    /* height: 400px; */
    background-color: rgba(17, 0, 74, 0.527);
    /* border: 3px solid rgba(255, 255, 255, 0.014); */
    border-radius: 20px;
    -webkit-animation: slide-up 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
              animation: slide-up 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
      
      
}
@-webkit-keyframes slide-up {
    0% {
      -webkit-transform: translateZ(700px) translateY(400px);
              transform: translateZ(700px) translateY(400px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(0) translateY(0);
              transform: translateZ(0) translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes slide-up {
    0% {
      -webkit-transform: translateZ(700px) translateY(400px);
              transform: translateZ(700px) translateY(400px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(0) translateY(0);
              transform: translateZ(0) translateY(0);
      opacity: 1;
    }
  }
#currentLocation{
    font-size: 2.5rem;
    margin-bottom: 0rem;
    margin-top: 1rem;
}
#currentTemp{
    font-size: 5rem;
    margin-bottom: 0rem;
    margin-top: .5rem;
}
#hourlyTitle{
    display: flex;
    padding-left: 2.5rem;
    align-self: flex-start;
    margin-bottom: 0rem;
}
#hourlyTitleIcon{
    padding-right: 0.5rem;
}
#hourlyTemps{
    display: flex;
    flex-direction: row;
    justify-content: left;
    overflow-x: scroll;
    max-width: 95%;
    height: 100%;
    margin: 1rem;
    padding: 0rem 0rem;
    background-color: rgba(4, 4, 124, 0.395);
    border: 3px solid rgba(255, 255, 255, 0.025);
    border-radius: 10px;
}
#hourlyTemps div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1rem;
}
#hourlyTemps::-webkit-scrollbar-track
{
	/* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
	background-color: #1e64965c;
	border-radius: 10px;
    /* height: 5px; */
    scrollbar-width: thin;
}

#hourlyTemps::-webkit-scrollbar
{
	width: 10px;
	background-color: #f5f5f500;
}

#hourlyTemps::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background: linear-gradient(0deg, rgb(55, 48, 190) 0%, rgba(9,9,121,1) 30%, rgb(0, 4, 255) 100%);
}
.hourIcon{
    max-height: 40px;
    margin-bottom: 0rem;
    margin-top: .75rem;
}
.hourTime{
    margin-bottom: 0rem;
}
.hourTemp{
    margin-top: 0.5rem;
}
#daysContainer{
    display: flex;
    flex-direction: column;
    justify-content: left;
    /* overflow-y: scroll; */
    width: 95%;
    height: 100%;
    margin: 1rem;
    padding: 0rem 0rem;
    background-color: rgba(4, 4, 124, 0.395);
    border: 3px solid rgba(255, 255, 255, 0.025);
    border-radius: 10px;
}
#daysContainer div:first-child{
    border-top: none;
}
#dailyTitle{
    display: flex;
    padding-left: 2.5rem;
    align-self: flex-start;
    margin-bottom: 0rem;
}
#dailyTitleIcon{
    padding-right: 0.5rem;
}
.dayInfo{
    display: flex;
    flex-direction: row;
    padding: 0rem 0.75rem;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.086);
}
#daysContainer::-webkit-scrollbar-track
{
	/* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
	background-color: #1e64965c;
	border-radius: 10px;
    /* height: 5px; */
    scrollbar-width: thin;
}

#daysContainer::-webkit-scrollbar
{
	width: 10px;
	background-color: #f5f5f500;
}

#daysContainer::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background: linear-gradient(0deg, rgb(55, 48, 190) 0%, rgba(9,9,121,1) 30%, rgb(0, 4, 255) 100%);
}
.dayIcon{
    max-height: 40px;
    margin-bottom: 0rem;
    margin-top: .4rem;
}
.dayMinMaxContainer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.minMaxBar{
    height: 10px;
    width: 100px;
    margin: 0rem 1rem;
    border-radius: 10px;
    background: linear-gradient(90deg, rgb(255, 255, 0) 0%, rgb(255, 128, 0) 50%, rgb(255, 0, 0) 100%);
}
.dayMinTemp{
    color: rgba(255, 255, 255, 0.541);
}
#aqiTitle{
    display: flex;
    padding-left: 2.5rem;
    align-self: flex-start;
    margin-bottom: 0rem;
}
#aqiTitleIcon{
    padding-right: 0.5rem;
}
#aqiContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 95%;
    height: 100%;
    margin: 1rem;
    padding: 0rem 0rem;
    background-color: rgba(4, 4, 124, 0.395);
    border: 3px solid rgba(255, 255, 255, 0.025);
    border-radius: 10px;
}
#aqiInfo{
    display: flex;
    justify-self: center;
    align-items: center;
    flex-direction: column;
    padding: 1rem;
    width: 100%;
}
#aqiBar{
    height: 10px;
    width: 90%;
    margin: 1rem;
    z-index: 0;
    background: linear-gradient(90deg, rgb(0, 228, 0) 0%, rgb(255, 255, 0) 13%, rgb(255, 126, 0) 26%, rgb(255, 0, 0) 39%, rgb(153, 0, 76) 52%, rgb(128, 0, 36) 65%, rgb(128, 0, 36) 100%);
    border-radius: 10px;
}
#aqiBarMarker{
    height: 15px;
    width: 15px;
    margin-top: -5px;
    padding-top: -1rem;
    z-index: 1;
    margin-left: -2%;
    border-radius: 20px;
    background: transparent;
    border: 3px solid white;
}
.aqiValue{
    text-align: center;
    font-weight: 700;
}
.aqiDescription{
    text-align: center;
    padding: 0rem 0.75rem;
}
#uvTitle{
    display: flex;
    padding-left: 2.5rem;
    align-self: flex-start;
    margin-bottom: 0rem;
}
#uvTitleIcon{
    padding-right: 0.5rem;
}
#uvContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 95%;
    height: 100%;
    margin: 1rem;
    padding: 0rem 0rem;
    background-color: rgba(4, 4, 124, 0.395);
    border: 3px solid rgba(255, 255, 255, 0.025);
    border-radius: 10px;
}
#uvInfo{
    display: flex;
    justify-self: center;
    align-items: center;
    flex-direction: column;
    padding: 1rem;
    width: 100%;
}
#uvBar{
    height: 10px;
    width: 90%;
    margin: 1rem;
    z-index: 0;
    background: linear-gradient(90deg, rgb(41, 149, 1) 0%, rgb(247, 228, 1) 15%, rgb(249, 89, 1) 30%, rgb(217, 0, 17) 45%, rgb(108, 73, 201) 60%, rgb(108, 73, 201) 100%);
    border-radius: 10px;
}
#uvBarMarker{
    height: 15px;
    width: 15px;
    margin-top: -5px;
    padding-top: -1rem;
    z-index: 1;
    margin-left: -2%;
    border-radius: 20px;
    background: transparent;
    border: 3px solid white;
}
.uvValue{
    text-align: center;
    font-weight: 700;
}
.uvDescription{
    text-align: center;
    padding: 0rem 0.75rem;
}
#extraWeatherData{
    display: flex;
    width: 95%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding: 1rem;
    margin-right: 0.5rem;
}
#windWrapper{
    width: 50%;
    margin-bottom: 4rem;
}
#windTitle{
    display: flex;
    /* padding-left: 2.5rem; */
    justify-content: center;
    align-self: flex-start;
    margin-bottom: 1rem;
}
#windTitleIcon{
    padding-right: 0.5rem;
}
#windContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 95%;
    height: 15rem;
    /* margin: 1rem; */
    padding: 0rem 0rem;
    background-color: rgba(4, 4, 124, 0.395);
    border: 3px solid rgba(255, 255, 255, 0.025);
    border-radius: 10px;
}
#windInfo{
    display: flex;
    justify-self: center;
    align-items: center;
    flex-direction: column;
    padding: 1rem;
    width: 100%;
}
#windChart{
    height: 150px;
    width: 150px;
    margin: 1rem;
    z-index: 0;
    border: 1px solid white;
    border-radius: 150px;
}
#windChartMarker{
    position: absolute;
    margin-left: 75px;
    margin-top: 2px;
    height: 145px;
    width: 3px;
    /* padding-top: -1rem; */
    z-index: 1;
    border-radius: 100px;
    background: white;
    transform: rotateZ(0deg);
}
#windChartMarkerArrow{
    /* margin-top: -3px; */
    margin-left: -6px;
    padding-top: -15px;
    width: 0; 
    height: 0; 
    border-left: 7.5px solid transparent;
    border-right: 7.5px solid transparent;
    border-bottom: 7.5px solid white;
}
#windChartNorth{
    position: absolute;
    margin-top: 4px;
    margin-left: 71px;
    color: white;
}
#windChartSouth{
    position: absolute;
    margin-top: 130px;
    margin-left: 71px;
    color: white;
}
#windChartEast{
    position: absolute;
    margin-top: 66px;
    margin-left: 135px;
    color: white;
}
#windChartWest{
    position: absolute;
    margin-top: 66px;
    margin-left: 6px;
    color: white;
}
.windValue{
    text-align: center;
    font-weight: 700;
}
#rainWrapper{
    width: 50%;
    justify-self: flex-end;
    margin-bottom: 4rem;
}
#rainContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 15rem;
    /* margin: 1rem; */
    padding: 0rem 0rem;
    background-color: rgba(4, 4, 124, 0.395);
    border: 3px solid rgba(255, 255, 255, 0.025);
    border-radius: 10px;
}
#rainTitle{
    display: flex;
    /* padding-left: 2.5rem; */
    justify-content: center;
    align-self: flex-start;
    margin-bottom: 1rem;
}
#rainTitleIcon{
    padding-right: 0.5rem;
}
.rainValue{
    text-align: center;
    font-size: larger;
    font-weight: 700;
}
.rainDescription{
    text-align: center;
    padding: 0rem 0.75rem;
}
#feelsLikeWrapper{
    width: 33%;
    margin-bottom: 4rem;
}
#feelsLikeContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 95%;
    height: 5rem;
    /* margin: 1rem; */
    /* margin-right: auto; */
    /* padding: 0rem 1rem; */
    background-color: rgba(4, 4, 124, 0.395);
    border: 3px solid rgba(255, 255, 255, 0.025);
    border-radius: 10px;
}
#feelsLikeTitle{
    display: flex;
    padding-left: 0rem;
    justify-content: center;
    align-self: flex-start;
    margin-bottom: 1rem;
}
#feelsLikeTitleIcon{
    padding-right: 0.5rem;
}
.feelsLikeValue{
    text-align: center;
    font-size: larger;
    font-weight: 700;
}
#humidityWrapper{
    width: 33%;
    margin-bottom: 4rem;
}
#humidityContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 95%;
    height: 5rem;
    /* margin: 1rem; */
    /* margin-right: auto; */
    /* padding: 0rem 1rem; */
    background-color: rgba(4, 4, 124, 0.395);
    border: 3px solid rgba(255, 255, 255, 0.025);
    border-radius: 10px;
}
#humidityTitle{
    display: flex;
    /* padding-left: 3rem; */
    justify-content: center;
    align-self: flex-start;
    margin-bottom: 1rem;
}
#humidityTitleIcon{
    padding-right: 0.5rem;
}
.humidityValue{
    text-align: center;
    font-size: larger;
    font-weight: 700;
}
#visibilityWrapper{
    width: 33%;
    margin-bottom: 4rem;
}
#visibilityContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 95%;
    height: 5rem;
    /* margin: 1rem; */
    /* margin-right: auto; */
    /* padding: 0rem 1rem; */
    background-color: rgba(4, 4, 124, 0.395);
    border: 3px solid rgba(255, 255, 255, 0.025);
    border-radius: 10px;
}
#visibilityTitle{
    display: flex;
    /* padding-left: 3rem; */
    justify-content: center;
    align-self: flex-start;
    margin-bottom: 1rem;
}
#visibilityTitleIcon{
    padding-right: 0.5rem;
}
.visibilityValue{
    text-align: center;
    font-size: larger;
    font-weight: 700;
}
#pressureWrapper{
    width: 33%;
    margin-bottom: 4rem;
}
#pressureContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 95%;
    height: 5rem;
    /* margin: 1rem; */
    /* margin-right: auto; */
    /* padding: 0rem 1rem; */
    background-color: rgba(4, 4, 124, 0.395);
    border: 3px solid rgba(255, 255, 255, 0.025);
    border-radius: 10px;
}
#pressureTitle{
    display: flex;
    /* padding-left: 2.5rem; */
    justify-content: center;
    align-self: flex-start;
    margin-bottom: 1rem;
}
#pressureTitleIcon{
    padding-right: 0.5rem;
}
.pressureValue{
    text-align: center;
    font-size: larger;
    font-weight: 700;
}
@media (max-width: 1280px) {
    #weatherData{
        width: 85vw;
    }
}
@media (max-width: 800px) {
    #hourlyTitle{
        padding-left: 1.5rem;
    }
    #dailyTitle{
        padding-left: 1.5rem;
    }
    #aqiTitle{
        padding-left: 1.5rem;
    }
    #uvTitle{
        padding-left: 1.5rem;
    }
    /* #windTitle{
        padding-left: 1.5rem;
    }
    #rainTitle{
        padding-left: 1.5rem;
    } */
    /* #feelsLikeTitle{
        padding-left: 1.5rem;
    }
    #humidityTitle{
        padding-left: 1.5rem;
    }
    #visibilityTitle{
        padding-left: 1.5rem;
    }
    #pressureTitle{
        padding-left: 1.5rem;
    } */
}
@media (max-width: 505px) {
    #feelsLikeTitle{
        font-size: 1rem;
    }
    #humidityTitle{
        font-size: 1rem;
    }
    #visibilityTitle{
        font-size: 1rem;
    }
    #pressureTitle{
        font-size: 1rem;
    }
}
@media (max-width: 436px) {
    #feelsLikeTitle{
        font-size: .75rem;
    }
    #humidityTitle{
        font-size: .75rem;
    }
    #visibilityTitle{
        font-size: .75rem;
    }
    #pressureTitle{
        font-size: .75rem;
    }
}