@import"https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap";body{margin:0;padding:0;color:#fff;font-family:"Comfortaa",cursive;overflow:hidden}*{box-sizing:border-box;margin:0;padding:0}a{text-decoration:none;height:inherit;width:inherit;color:inherit}button{border:none;outline:none;background:transparent;cursor:pointer}li{list-style:none}#app_container{height:100vh;width:100vw;background:linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),url(./img/background.jpg) center center no-repeat;background-size:cover;opacity:1}#app_container .warper{position:relative;height:100%;width:100%}#app_container .warper .title{position:absolute;left:5%;top:10%;font-size:1.2rem;letter-spacing:1px}#app_container .warper .locations{display:flex;justify-content:space-between;align-items:center !important;position:absolute;bottom:10%;left:5%;width:50%;height:200px}#app_container .warper .locations #temperature{font-size:3rem;margin-right:30px}#app_container .warper .locations .location #location{font-size:2.4rem;margin-right:40px;margin-bottom:.5rem}#app_container .warper .locations .location .country_name{text-transform:capitalize;margin-left:.3rem}#app_container .warper .locations .location .time{margin-top:.5rem}#app_container .warper .locations .weather .weather_icon{display:flex;justify-content:center;align-items:center;flex-direction:column}#app_container .warper .locations .weather .weather_icon img{width:50px}#app_container .warper .locations .weather .weather_icon #weather_type{display:block;font-size:1.1rem;text-transform:capitalize}#app_container .warper .weather_details{padding-left:2rem;position:absolute;top:0;right:0;width:40%;height:100%;background:rgba(2,2,2,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}#app_container .warper .weather_details .weather_details_warper{width:100%;height:100%;position:relative}#app_container .warper .weather_details .weather_details_warper #form{display:flex;justify-content:space-between;align-items:center;width:100%;height:4rem;position:relative}#app_container .warper .weather_details .weather_details_warper #form #location_input{height:3rem;width:85%;border:none;background:transparent;outline:none;padding:.3rem 0;color:#fff;font-size:1.2rem}#app_container .warper .weather_details .weather_details_warper #form #location_input::-moz-placeholder{font-size:1.2rem;text-transform:capitalize}#app_container .warper .weather_details .weather_details_warper #form #location_input:-ms-input-placeholder{font-size:1.2rem;text-transform:capitalize}#app_container .warper .weather_details .weather_details_warper #form #location_input::placeholder{font-size:1.2rem;text-transform:capitalize}#app_container .warper .weather_details .weather_details_warper #form #search_btn{width:15%;height:100%;display:grid;place-items:center;color:#fff;background:#6e09f1;font-size:2rem}#app_container .warper .weather_details .weather_details_warper #form::before{position:absolute;content:"";bottom:0;left:0;width:75%;height:1px;background:#fff;z-index:2}#app_container .warper .weather_details .weather_details_warper .country_list{width:100%;height:auto;padding:1rem 0;position:relative}#app_container .warper .weather_details .weather_details_warper .country_list .country_list_warper{display:flex;flex-direction:column}#app_container .warper .weather_details .weather_details_warper .country_list .country_list_warper .country{margin:1rem 0;color:#f5f2f2;cursor:pointer}#app_container .warper .weather_details .weather_details_warper .country_list::before{position:absolute;content:" ";bottom:0;left:0;width:90%;height:1px;background:rgba(219,219,219,.801);z-index:2}#app_container .warper .weather_details .weather_details_warper .weather_info{width:80%;height:auto;padding:2rem 0;position:relative}#app_container .warper .weather_details .weather_details_warper .weather_info .weather_info_title{font-size:1.2rem}#app_container .warper .weather_details .weather_details_warper .weather_info .coludy{margin:2rem 0;display:flex;justify-content:space-between;align-items:center}#app_container .warper .weather_details .weather_details_warper .weather_info .humidity{margin:2rem 0;display:flex;justify-content:space-between;align-items:center}#app_container .warper .weather_details .weather_details_warper .weather_info .wind{margin:2rem 0;display:flex;justify-content:space-between;align-items:center}#app_container .warper .weather_details .weather_details_warper .weather_info::before{position:absolute;content:" ";bottom:0;left:0;width:100%;height:1px;background:rgba(219,219,219,.801);z-index:2}@media only screen and (max-width: 991px){#app_container .warper .locations{width:54%;flex-wrap:wrap !important}}@media only screen and (max-width: 920px){#app_container .warper .title{top:5%}#app_container .warper .locations{width:90%;top:10%}#app_container .warper .weather_details{padding:2rem 0;position:absolute;width:100%;left:0%;top:30%;height:70vh}#app_container .warper .weather_details .weather_details_warper{margin:0 auto;width:80%}}@media only screen and (max-width: 420px){#app_container .warper .locations{width:90%}#app_container .warper #temperature{font-size:2.5rem !important}#app_container .warper .location #location{font-size:1.5rem !important}#app_container .warper .weather_details{padding:1rem 0;top:45%;height:55vh}#app_container .warper .weather_details .weather_details_warper{margin:0 auto}#app_container .warper .weather_details .weather_details_warper .country_list .country_list_warper .country{margin:.5rem 0;cursor:pointer}#app_container .warper .weather_details .weather_details_warper .weather_info{padding:1rem 0}#app_container .warper .weather_details .weather_details_warper .weather_info .coludy{margin:.8rem 0}#app_container .warper .weather_details .weather_details_warper .weather_info .humidity{margin:.8rem 0}#app_container .warper .weather_details .weather_details_warper .weather_info .wind{margin:.8rem 0}}