.main{width:100%;height:100vh;background-position:center;background-size:cover}.overlay{width:100%;height:100vh;background-color:var(--background-overlay)}.container{max-width:800px;margin:auto;height:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:column;padding:1rem}.section{width:100%;padding:1rem;border-radius:var(--section-border);color:#fff}.inputs,.results{display:flex;align-items:center;justify-content:space-between;background-color:var(--section-overlay)}.inputs input{border:.8px solid #fff;border-radius:var(--section-border);background-color:transparent;color:#fff;padding:.5rem;font-size:20px;font-weight:200}.inputs input:focus{outline:none}.inputs button{padding:10px 50px;border:none;border-radius:var(--section-border);font-size:20px;font-weight:500;background-color:#fff}.inputs button:hover{cursor:pointer;background-color:#d3d3d3}.results__description{display:flex;flex-direction:column;align-items:center;justify-content:center}.results__description h3{font-size:15px;font-weight:200;text-transform:capitalize}.results__temperature h1{font-size:60px}*{font-family:Arial,Helvetica,sans-serif;margin:0;padding:0;box-sizing:border-box}:root{--section-overlay: rgba(0, 0, 0, .7);--background-overlay: rgba(0, 0, 0, .4);--section-border: .4rem}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.cards__container{display:flex;flex-direction:column;align-items:center;justify-content:space-between;background-color:var(--section-overlay);padding:1rem;border-radius:var(--section-border)}.cards__icon{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;margin-bottom:12px}.cards__icon small{text-transform:capitalize}@media screen and (max-width: 1024px){.cards{grid-template-columns:1fr 1fr}}