html{box-sizing:border-box}body{font-family:Roboto,sans-serif;background-repeat:no-repeat;background-color:#000;background-size:cover;background-position-x:center;overflow-x:hidden;transition:width 3s,height 3s,padding 3s,margin 5s}.wrapper{width:90%;margin:0 auto;text-align:center;min-width:320px;max-width:2000px}.box_today,.box_weather{margin:70px auto;color:#fff;background:#121242;opacity:.7;border-radius:20px;width:40%;min-width:250px;max-width:400px;padding:25px 30px;height:200px;display:flex;align-items:center;justify-content:space-evenly;transition:width 3s,height 3s}.box_weather{flex-direction:column}.box_today{flex-wrap:wrap;text-align:left}.box_weather-soon{width:100%;font-size:medium}.box_weather-soon,.five-box{display:flex;justify-content:space-between}.five-box{width:18%;align-items:center;flex-direction:column}.box_today:hover,.box_weather:hover{opacity:.9;transition:opacity .5s}button,input{cursor:pointer;border-radius:40px;background:#fff;outline:none;box-shadow:0 0 5px hsla(0,0%,50.2%,.582);font-family:Montserrat,sans-serif}.box_weather-buttons{max-width:550px;width:60%;margin:0 auto;display:flex;outline:none;justify-content:space-evenly;transition:width 3s}input{margin-top:50px;width:60%;max-width:400px;padding:10px 20px}input::placeholder{font-style:oblique}input:focus{box-shadow:0 0 10px hsla(0,0%,50.2%,.582)}button{width:150px;padding:5px 10px;text-transform:uppercase;font-weight:700;border:3px solid #fff;transition:width 3s}button.enabled,button:hover{background-color:initial;color:#fff}button:hover{transition:background-color .5s;box-shadow:0 0 5px hsla(0,0%,50.2%,.582)}.five-box_weatherType{opacity:0;margin-top:-40px;transition:opacity 2s,margin-top 2s;text-align:center;height:1px}.five-box_weatherType:first-letter{text-transform:capitalize}.box_weather-values .field{width:40px;height:50px;justify-content:space-around}#city{color:grey;font-size:22px}.temp-max:before,.temp-min:before{width:50px;height:10px;color:grey}.temp-min:before{content:"min"}.temp-max:before{content:"max"}#temp-current{width:100px;font-size:34px}.box_weather-values{align-items:center;height:40px}.box_today .field,.box_weather-values{display:flex;flex-direction:row;justify-content:space-evenly;width:80%}.box_today .field{flex-wrap:wrap;margin-bottom:15px;text-align:center}.box_today .field:last-of-type{align-items:center}#date-today{font-size:36px}#time-current:before{content:"Time: ";color:#fff}#temp-current:after,.temp-max:after,.temp-min:after{content:"°";color:#fff}.city_list{max-width:400px;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-around;color:#fff;list-style-type:none;padding:20px 0 0;margin:auto}img.box_weather-icon{display:block;width:80px;height:80px}.box_today-icon,.five-box img{width:40px;height:40px}.five-box img{display:block}@media screen and (min-width:1000px){.five-box_weatherType{height:75px;opacity:1;margin-top:10px;word-break:break-word}.five-box{border:1px solid grey;border-radius:10px;transition:border 2s}.five-box:hover{background-color:hsla(0,0%,56.1%,.562)}}@media screen and (min-width:1200px){.box_weather,.box_weather-buttons{margin:30px 0 0 auto}.box_today,.box_weather,.box_weather-soon{height:150px}.box_weather img{width:auto;height:70px}.search{margin-top:-10px}.box_today{margin-bottom:10px;margin-left:0}.box_weather-buttons{width:460px}button{width:45%}#date-today{text-align:left;font-size:44px;width:100%}.box_weather-soon{font-size:small}.box_today .field:not(:first-of-type){width:50%;font-size:14px}}