body{background-color:#333;color:#ddd}h2.weather-title{color:#ddd;text-decoration:underline}i.weather-icon{margin:10px auto;font-size:4rem}.forecast-footer{font-size:1rem}.forecast-current{display:inline-block;position:relative;left:50%;transform:translateX(-50%)}.forecast-current>div{display:inline-block;margin:0 30px}.forecast-main{font-size:1.5rem;font-weight:bold}.forecast-main>a{text-decoration:none;color:#00008b}ul.forecast-container{list-style-type:none;display:flex;flex-wrap:wrap;padding:20px;border:5px inset #aaa;border-radius:20px;background-color:#ccc}ul.forecast-container>li{margin-bottom:20px}ul.forecast-container>li>div{animation:display-tiles .5s ease-in;animation-fill-mode:backwards}ul.forecast-container>li div.forecast-tile{position:relative;color:#333;border:solid 2px #87ceeb;border-radius:20px;box-shadow:-5px 5px 5px #333;background:linear-gradient(to bottom,#ebf1f6 0%,#89c3eb 100%)}ul.forecast-container>li div.forecast-tile::before{content:"";position:absolute;display:block;height:50%;width:90%;left:5%;border-radius:15px;background:linear-gradient(to bottom,rgba(255,255,255,1) 0%,rgba(255,255,255,.7) 10%,rgba(255,255,255,0) 100%)}ul.forecast-container>li div.forecast-tile .forecast-day{position:relative;z-index:1;font-size:2.5rem;font-weight:bold;text-decoration:underline}ul.forecast-container>li div.forecast-tile .forecast-date{position:relative;z-index:1;font-size:1.5rem}ul.forecast-container>li div.forecast-tile .forecast-main{position:relative;z-index:1}@keyframes display-tiles{0%{opacity:0}100%{opacity:1}}