*{box-sizing:border-box;padding:0;margin:0}.App{background-color:#13213a;min-height:100vh;color:#fff;padding:24px 24px 38px}.App h1{text-align:center;font-family:Inter,sans-serif;font-weight:400;letter-spacing:2px;font-size:38px;margin:10px 0}.App .city_container{display:flex;gap:18px;flex-wrap:wrap}.overlay{position:fixed;z-index:2;top:0;left:0;width:100vw;height:100vh;background-color:#3d3e3ec9}.info{position:absolute;width:100vw;height:100vh;top:0;left:0;display:flex;justify-content:center;align-items:center;transform:translateY(-100vh);transition:.35s}.show{z-index:3;transform:translateY(0)}@media screen and (max-width:550px){*{margin:0;box-sizing:border-box}.App h1{font-family:sans-serif;font-size:26px;text-align:center}.App .city_container{justify-content:center;gap:20px 15px}}.City{position:relative;color:#000;background-color:#fff;width:220px;height:310px;border-radius:18px;padding:32px;font-family:sans-serif;box-shadow:0 14px 2px -8px #848484ed}.City h4{font-weight:400;position:relative;display:flex;align-items:center;font-size:20px;margin:10px 0 12px}.City h4 span:nth-child(2){background-color:orange;padding:3px 8px;margin-left:5px;font-size:10px;text-align:center;border-radius:12px;color:#fff}.City h1{padding-left:4px;font-size:46px;font-family:serif;position:relative;margin:1px 0 12px;text-align:left}.City h1 span{padding-left:4px;font-weight:500;font-size:22px;position:absolute;top:5px}.City p{padding-left:5px;font-size:14px;color:#333232;color:#6f6e6e;text-transform:uppercase;font-weight:500}.City img{margin-left:-5px}.City .delete_button{border:none;background:red;border-radius:16px;box-shadow:0 .2px 2px #888787;color:#fff;width:25px;height:25px;position:absolute;top:6px;right:6px;font-size:11px;transition:.25s}.City .delete_button:hover{transform:scale(1.15)}@media screen and (max-width:550px){.City{width:162px;height:255px;padding:24px}.City h1{font-size:32px}.City h1 span{font-size:19px;top:3px}}.CityInfo{display:flex;flex-direction:column;justify-content:center;align-items:center;color:#000;background-color:#fff;width:295px;border-radius:16px;padding:42px;font-family:sans-serif;box-shadow:0 16px 1px -10px #848484ed}.CityInfo h4{align-self:center;font-weight:400;position:relative;font-size:22px;margin:10px 0 12px}.CityInfo h4 span{background-color:orange;padding:5px 8px 3px;margin-left:5px;font-size:12px;text-align:center;border-radius:12px;color:#fff;position:absolute}.CityInfo h1{align-self:center;font-size:46px;font-family:serif;position:relative;margin:1px 0 12px;text-align:left}.CityInfo h1 span{padding-left:4px;font-weight:500;font-size:22px;position:absolute;top:5px}.CityInfo p{padding-top:10px;padding-left:5px;font-size:14px;color:#333232;color:#6f6e6e;text-transform:uppercase;font-weight:500}.CityInfo img{width:80px;height:80px}._form_jrxn1_1{display:flex;justify-content:center;justify-self:center;align-self:center;height:35px;gap:10px;margin-top:15px;margin-bottom:24px}._form_jrxn1_1 input{font-family:Open sans,Helvetica,"sans-serif";letter-spacing:.4px;height:35px;padding:14px;width:196px;border-radius:18px;border:1px white solid;font-size:15px}._form_jrxn1_1 button{font-family:Open sans,Helvetica,"sans-serif";letter-spacing:.4px;height:35px;color:#fff;background-color:#179217;border:none;border-radius:18px;padding:0 21px;font-size:15px}@media screen and (max-width:550px){._form_jrxn1_1{grid-template-columns:120px 120px 70px}}