*{margin:0;padding:0}*,*:before,*:after{box-sizing:inherit}html{font-size:62.5%}@media only screen and (max-width: 768px){html{font-size:50%}}body{box-sizing:border-box;font-family:Open Sans,sans-serif;font-weight:400;line-height:1.6}ul{list-style-type:none}a{text-decoration:none}body{background-color:#181818;color:#f0f0f0}h1{text-align:center;margin-bottom:3.2rem;font-size:3.5rem}.app-container{padding:4rem;display:flex;flex-direction:column;align-items:center}.weather-cards-container{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;grid-gap:2rem;justify-items:center;padding:0 2rem;margin-bottom:2rem}@media (max-width: 1200px){.weather-cards-container{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.weather-cards-container{grid-template-columns:1fr}}.weather-cards-container .weather-card{position:relative;padding:4rem;border-radius:.8rem;min-width:35rem;min-height:35rem;background-size:cover;background-repeat:no-repeat;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.weather-cards-container .weather-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0000004d;border-radius:.8rem;z-index:1}.weather-cards-container .weather-card h2,.weather-cards-container .weather-card p{font-size:2.4rem;margin-bottom:0}.weather-cards-container .weather-card .weather-icon{width:8rem;margin-bottom:2rem}.weather-cards-container .weather-card-top,.weather-cards-container .weather-card-bottom{display:flex;flex-direction:column;justify-content:center;align-items:center;height:50%}.weather-cards-container .weather-card-top{margin-bottom:8rem}.weather-cards-container .weather-card h2,.weather-cards-container .weather-card .weather-icon,.weather-cards-container .weather-card p{z-index:2}