:root{--bg_main: #000;--text_light: rgb(58, 58, 58);--text_med: #ffffff;--text_dark: #1e2432;--red: dodgerblue;--darkred: skyblue;--orange: dodgerblue}*{margin:0;padding:0;box-sizing:border-box;font-weight:400}a{color:inherit;text-decoration:none}button{cursor:pointer}input{-webkit-appearance:none}button,input{border:none;background:none;outline:none;color:inherit}img{display:block;max-width:100%;height:auto}ul{list-style:none}body{font:1rem/1.3 Roboto,sans-serif;background:var(--bg_main);color:var(--text_med);padding:0 100px}.container{width:100%;x-width:1200px;margin:0 auto;padding:0 15px}.top-banner{color:var(--text_med)}.heading{font-weight:700;font-size:4rem;letter-spacing:.02em;padding:0 0 30px}.top-banner form{position:relative;display:flex;align-items:center}.top-banner form input{font-size:2rem;height:40px;padding:5px 5px 10px;border-bottom:1px solid}.top-banner form input::placeholder{color:currentColor}.top-banner form button{font-size:1rem;font-weight:700;letter-spacing:.1em;padding:15px 20px;margin-left:15px;border-radius:5px;background:var(--red);transition:background .3s ease-in-out}.top-banner form button:hover{background:var(--darkred)}.top-banner form .msg{position:absolute;bottom:-40px;left:0;max-width:450px;min-height:40px}.tarjeta-section{margin:30px 0 20px}.tarjeta-section .cities{display:grid;grid-gap:32px 20px;grid-template-columns:repeat(4,1fr)}.tarjeta-section .city{position:relative;padding:40px 10%;border-radius:20px;background:var(--text_light);color:var(--text_med)}.tarjeta-section .city:after{content:"";width:90%;height:50px;position:absolute;bottom:-12px;left:5%;z-index:-1;opacity:.3;border-radius:20px;background:var(--text_light)}.tarjeta-section figcaption{margin-top:10px;text-transform:uppercase;letter-spacing:.05em}.tarjeta-section .city-temp{font-size:5rem;font-weight:700;margin-top:10px;color:var(--text_med)}.tarjeta-section .city sup{font-size:.5em}.tarjeta-section .city-name sup{padding:.2em .6em;border-radius:30px;color:var(--text_light);background:var(--orange)}.tarjeta-section .city-icon{margin-top:10px;width:100px;height:100px}.page-footer{text-align:right;font-size:1rem;color:var(--text_med);margin-top:40px}.page-footer span{color:var(--red)}@media screen and (max-width: 1000px){body{padding:0 100px;height:90vh}.tarjeta-section .cities{grid-template-columns:repeat(3,1fr)}}@media screen and (max-width: 700px){.heading,.tarjeta-section .city-temp{font-size:3rem}.tarjeta-section{margin-top:20px}.top-banner form{flex-direction:column;align-items:flex-start}.top-banner form input,.top-banner form button{width:100%}.top-banner form button{margin:20px 0 0}.top-banner form .msg{position:static;max-width:none;min-height:0;margin-top:10px}.tarjeta-section.cities{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width: 500px){body{padding:15px}.tarjeta-section .cities{grid-template-columns:repeat(1,1fr)}}