*{margin:1px;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f4f6f8;color:#111827}.weather-containter{border:2px solid gray;height:600px}.app{width:100%;color:#fff;text-align:center;padding:25px;background-color:#4472c4}.app-container{display:flex;gap:20px}.vl{border-left:6px solid #000000;height:521px;left:50%}.search{display:flex;width:fit-content;border:1px solid #000000;border-radius:5px;margin:20px 0 20px 29rem}.search input{border:none;width:500px;padding:10px;outline:none}.search button{border:none;padding:10px 40px;color:#fff;background-color:#4472c4}.search button:hover{background-color:#6790d6;cursor:pointer}.description-input{width:100%;padding:4px;font-size:.9rem;border:1px solid #ccc;border-radius:4px}.citylist{margin:20px 70px}.citylist-btn{padding:10px 45px;font-size:15px;color:#fff;border-radius:5px;background-color:#4472c4}.citylist-btn:hover{background-color:#578ce6;cursor:pointer}.city-name{padding:5px;margin-top:5px;font-size:20px;color:#fff;background-color:#4472c4}.citylist-li{padding:5px;font-size:20px;list-style:none;border:1px solid #000000}.lightgreen{border:3px solid rgb(90,229,90),}.details-container{display:flex;justify-content:center;align-items:center;width:100%}table,th,td{border:1px solid black;border-collapse:collapse}.details-container .tablerow{background-color:#4472c4;color:#fff}.details-container tr th{padding:10px 32px}.yellow{background-color:#ff0}.white{background-color:#fff}.nodata{text-align:center;padding:10px;font-weight:700;font-size:25px}.item-row{font-size:18px}.item-row td{padding:10px 20px}.deletebtn{background-color:red;color:#fff;padding:5px;border:none;cursor:pointer}.deletebtn:hover{background-color:#d54343}@media (max-width: 768px){.app-container{flex-direction:column;align-items:center}.vl{display:none}.search input{width:200px}.search button{padding:5px 10px}.citylist{margin:10px auto}.citylist-btn{padding:8px 20px;font-size:14px}.details-container tr th,.item-row td{padding:4px 8px}.nodata{font-size:20px}}@media (max-width: 480px){.app-container{flex-direction:column;align-items:center}.search input{width:100px}.search button{padding:5px}.citylist-btn{padding:2px 5px;font-size:10px}.city-name,.citylist-li{font-size:10px}.details-container tr th,.item-row td{padding:1px 3px}.nodata{font-size:18px}}