:root{--color-blueBackground: #023F5A;--color-greenPattern: #00A055;--color-orangePattern: #93BF1D;--color-yellowPattern: #FFE900;--font-title: "Poppins", sans-serif;--font-body: "Inter", sans-serif}:root html,:root body,:root span,:root applet,:root object,:root iframe,:root h1,:root h2,:root h3,:root h4,:root h5,:root h6,:root blockquote,:root pre,:root a,:root abbr,:root acronym,:root address,:root big,:root cite,:root code,:root del,:root dfn,:root em,:root img,:root ins,:root kbd,:root p,:root q,:root s,:root samp,:root small,:root strike,:root strong,:root sub,:root sup,:root tt,:root var,:root b,:root u,:root i,:root center,:root dl,:root dt,:root dd,:root ol,:root ul,:root li,:root fieldset,:root form,:root label,:root legend,:root table,:root caption,:root tbody,:root tfoot,:root thead,:root tr,:root th,:root td,:root article,:root aside,:root canvas,:root details,:root embed,:root figure,:root figcaption,:root footer,:root header,:root hgroup,:root menu,:root nav,:root output,:root ruby,:root summary,:root time,:root mark,:root audio,:root video{margin:0;padding:0;border:0;font-family:var(--font-body);vertical-align:baseline}:root article,:root aside,:root details,:root figcaption,:root figure,:root footer,:root header,:root hgroup,:root menu,:root nav{display:block}:root body{line-height:1}:root ol,:root ul{list-style:none}:root blockquote,:root q{quotes:none}:root blockquote:before,:root blockquote:after,:root q:before,:root q:after{content:"";content:none}:root table{border-collapse:collapse;border-spacing:0}body{background-image:url(/assets/background-Dm296WH7.png);background-repeat:no-repeat;background-size:cover;background-attachment:fixed;position:relative;font-family:var(--font-body)}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100vh;background-color:#000c;z-index:-1}.mainCard{background-color:var(--color-blueBackground);z-index:1;border-radius:10px 0 0 10px;right:15px;width:50%;display:flex;flex-direction:column;justify-content:center;text-align:center;gap:10px}@media screen and (max-width:430px){.mainCard{width:80%;height:100%;gap:0px}}.mainCard>p{text-align:center;font-family:var(--font-title);font-size:28px;font-weight:700;color:#fff}@media screen and (max-width:430px){.mainCard>p{font-size:19px;padding-top:10px}}@media screen and (max-width:430px){.mainCard>span{width:100%;height:100%}}.mainCard>img{width:10%}.temperature{display:flex;justify-content:space-around;font-family:var(--font-title);font-size:28px;font-weight:700;color:#fff}@media screen and (max-width:430px){.temperature{font-size:19px;gap:20px}}.card{background-color:var(--color-blueBackground);box-shadow:4px 4px 5px #0003;padding:30px 0;width:160px;height:auto;border-radius:20px;display:block;align-items:center;text-align:center;gap:20px}@media screen and (max-width:430px){.card{width:130px;height:150px;padding:10px 0}}.card>p{text-align:center;font-family:var(--font-body);font-size:24px;font-weight:700;color:#fff}@media screen and (max-width:430px){.card>p{font-size:16px}}.card>img{width:60%;margin-top:20px;margin-bottom:20px}@media screen and (max-width:430px){.card>img{width:100%;margin-top:0;margin-bottom:0}}.temp{display:flex;justify-content:space-around;font-family:serif;font-size:22px;color:#fff}@media screen and (max-width:430px){.temp{font-size:16px}}.main{display:flex;width:700px;height:240px;background:linear-gradient(to right,#FFFFFF 60%,var(--color-blueBackground) 60%);border-radius:20px;overflow:hidden;margin:50px auto}@media screen and (max-width:430px){.main{width:350px;height:160px}}.loading{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:9999;font-family:var(--font-title);font-size:2em;font-weight:700;color:#fff}.selectedCity{padding:20px;width:55%;height:auto}@media screen and (max-width:430px){.selectedCity{width:34%}}.selectedCity>h1{font-family:var(--font-title);font-size:30px;font-weight:700;color:var(--color-blueBackground);margin-bottom:20px}@media screen and (max-width:430px){.selectedCity>h1{font-size:18px;margin-bottom:5px;width:100vh}}.selectedCity>p{font-size:22px;line-height:30px}@media screen and (max-width:430px){.selectedCity>p{font-size:12px;line-height:15px}}.pattern{display:flex;position:relative;left:15px;width:10%;height:100%}@media screen and (max-width:430px){.pattern{width:30%}}.pattern1{background-color:var(--color-yellowPattern);width:100%;height:100%;border-top-left-radius:10px;border-bottom-left-radius:10px;position:relative;right:-18px}.pattern2{background-color:var(--color-orangePattern);width:100%;height:100%;border-top-left-radius:10px;border-bottom-left-radius:10px;position:relative;right:-7px}.pattern3{background-color:var(--color-greenPattern);width:100%;height:100%;border-top-left-radius:10px;border-bottom-left-radius:10px;position:relative;right:4px}.container{width:700px;height:auto;background-color:#fff;border-radius:20px;padding:20px 0;margin:0 auto 40px}@media screen and (max-width:430px){.container{width:350px}}.box{display:flex;flex-wrap:wrap;justify-content:space-between;gap:60px;justify-content:center;padding:10px}