@import"https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700&display=swap";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}.App{display:flex;flex:1;width:100%;height:100%}body{background-color:#100e1d}@media screen and (max-width: 768px){.App{flex-direction:column;height:100%}}.forecast-container{background-color:#1e213a;height:100vh;min-width:450px;position:relative}.forecast-container .forecast-background-img{position:relative;overflow:hidden}.forecast-container .forecast-background-img .weather-bg-container{display:flex;overflow:hidden;position:absolute;justify-content:space-around;align-items:center}.forecast-container .forecast-background-img .weather-bg-container .forecast-img{height:350px}.forecast-container .forecast-background-img .weather-bg-container img{width:200%;height:100%;object-fit:contain;opacity:.3}.forecast-container .animate{width:1000%;animation:marquee 20s linear infinite;top:50%;transform:translateY(-100%)}@keyframes marquee{0%{left:-10%}to{left:-275%}}.forecast-container .animate{width:450%;animation:marquee 20s linear infinite;top:20%;transform:translateY(-40%)}.forecast-container .forecast-items{margin-top:50px;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;width:100%}.forecast-container .forecast-items .forecast-temp-wrapper{width:250px;height:250px;display:flex;justify-content:center;align-items:center}.forecast-container .forecast-items .forecast-temp-wrapper .forecast-temp-img{z-index:10;width:100%;height:100%;object-fit:cover;display:block;margin-bottom:20px;background-repeat:no-repeat;margin-top:20px}.forecast-container .forecast-items .forecast-temp{font-family:Raleway,sans-serif;display:flex;justify-content:center;align-items:center;margin-bottom:20px}.forecast-container .forecast-items .forecast-temp span:nth-child(1){font-size:55px;font-weight:500}.forecast-container .forecast-items .forecast-temp span:nth-child(2){display:inline-block;font-size:70px;font-weight:500;transform:translateY(8px)}.forecast-container .forecast-items .forecast-temp span:nth-child(3){display:inline-block;font-size:25px;font-weight:500;transform:translateY(26px)}.forecast-container .forecast-items .forecast-details{width:100%;height:100px;display:flex;justify-content:center;align-items:center}.forecast-container .forecast-items .forecast-details h1{font-family:Raleway,sans-serif;font-weight:500;font-style:normal;font-size:36px;line-height:42px;text-align:center;color:#a09fb1;text-transform:capitalize}.forecast-container .forecast-items .forecast-date-wrapper{width:100%;height:100px;display:flex;justify-content:center;align-items:center;gap:1rem}.forecast-container .forecast-items .forecast-date-wrapper .day{display:flex;justify-content:center;align-items:center;gap:1rem}.forecast-container .forecast-items .forecast-date-wrapper .day span{color:#a09fb1}.forecast-container .forecast-items .forecast-date-wrapper .day h1{font-family:Raleway,sans-serif;font-weight:500;font-style:normal;font-size:16px;line-height:42px;text-align:center;color:#a09fb1}.forecast-container .forecast-items .forecast-date-wrapper .forecast-date{color:#a09fb1}.forecast-container .forecast-items .forecast-location{width:100%;height:100px;display:flex;justify-content:center;align-items:center;gap:1rem}.forecast-container .forecast-items .forecast-location span{color:#a09fb1}.forecast-container .forecast-items .forecast-location h1{color:#a09fb1;font-size:18px;font-family:Raleway,sans-serif}@media screen and (max-width: 768px){.forecast-container{min-width:unset}}.search-component-container{display:flex;justify-content:flex-start;margin-left:30px;width:50%}.search-component-container input{background-color:red;border:none;width:161px;height:40px;background-color:#6e707a;margin-top:30px;color:#ededf4;font-family:Raleway,sans-serif}.search-component-container input::placeholder{color:#ededf4;font-family:Raleway,sans-serif;font-size:13.5px}.search-component-container input:focus{outline:none}.search-component-container input[type=text]{padding-left:20px}.forecast-layout-component{background-color:#100e1d;width:100%;color:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2rem;height:100%}.forecast-layout-component .forecast-layout-wrapper{display:flex;flex-direction:column;width:80%;height:95%}@media screen and (max-width: 768px){.forecast-layout-component{height:auto}}.highlights-component-container{width:100%;display:flex;height:50vh;justify-content:center;margin-top:50px;flex-wrap:wrap}.highlights-component-container .highlights-card-wrapper{width:100%;display:flex;flex-direction:column;height:200px;margin-top:40px}.highlights-component-container .highlights-card-wrapper .header-title{width:100%;height:100%;display:flex}.highlights-component-container .highlights-card-wrapper .header-title h1{font-family:Raleway,sans-serif;font-weight:600;font-style:normal;font-size:36px;line-height:24px;text-align:center;color:#e7e7eb;margin-bottom:20px}.highlights-component-container .highlights-card-wrapper .cards-wrapper{display:flex;width:100%;justify-content:center;align-items:center;gap:3rem;margin-top:20px}.highlights-component-container .highlights-card-wrapper .cards-wrapper .wind-status-card{width:328px;height:204px;background:#1e213a;display:flex;flex-direction:column;align-items:center}.highlights-component-container .highlights-card-wrapper .cards-wrapper .wind-status-card .card-header{width:100%;height:auto;display:flex;margin-top:20px;justify-content:center;align-items:center;margin-bottom:3px}.highlights-component-container .highlights-card-wrapper .cards-wrapper .wind-status-card .card-header h1{font-size:18px;font-family:Raleway,sans-serif}.highlights-component-container .highlights-card-wrapper .cards-wrapper .wind-status-card .wind-details{width:100%;height:auto;display:flex;justify-content:center;align-items:flex-end;margin-bottom:23px}.highlights-component-container .highlights-card-wrapper .cards-wrapper .wind-status-card .wind-details h1{font-family:Raleway,sans-serif;font-size:80px;font-weight:600;margin-top:10px}.highlights-component-container .highlights-card-wrapper .cards-wrapper .wind-status-card .wind-details span{font-family:Raleway,sans-serif;font-size:35px;display:inline-block;margin-bottom:10px;transform:translate(5px)}.highlights-component-container .highlights-card-wrapper .cards-wrapper .wind-status-card .wind-position-details{width:100%;height:auto;display:flex;justify-content:center;align-content:center;gap:.5rem;margin-top:3px}.highlights-component-container .highlights-card-wrapper .cards-wrapper .wind-status-card .wind-position-details p{font-family:Raleway,sans-serif;font-size:18px;font-weight:400;color:#e7e7eb}.highlights-component-container .highlights-card-wrapper .cards-wrapper .wind-status-card .wind-position-details span{font-size:16px;display:inline-block;transform:translateY(2px)}.highlights-component-container .highlights-card-wrapper .cards-wrapper .humidity-status-card{width:328px;height:204px;background:#1e213a;display:flex;flex-direction:column;align-items:center}.highlights-component-container .highlights-card-wrapper .cards-wrapper .humidity-status-card .card-header{width:100%;height:auto;display:flex;margin-top:20px;justify-content:center;align-items:center;margin-bottom:3px}.highlights-component-container .highlights-card-wrapper .cards-wrapper .humidity-status-card .card-header h1{font-size:18px;font-family:Raleway,sans-serif}.highlights-component-container .highlights-card-wrapper .cards-wrapper .humidity-status-card .humidity-details{width:100%;height:auto;display:flex;justify-content:center;align-items:flex-end;margin-bottom:23px}.highlights-component-container .highlights-card-wrapper .cards-wrapper .humidity-status-card .humidity-details h1{font-family:Raleway,sans-serif;font-size:80px;font-weight:600;margin-top:13px}.highlights-component-container .highlights-card-wrapper .cards-wrapper .humidity-progress-bar-wrapper{width:100%;height:80px;transform:translateY(-20px);justify-content:center;display:flex;flex-direction:column;align-items:center}.highlights-component-container .highlights-card-wrapper .cards-wrapper .humidity-progress-bar-wrapper .percent{display:flex;width:100%;gap:4.6em;margin-bottom:4px;justify-content:center;align-content:space-between}.highlights-component-container .highlights-card-wrapper .cards-wrapper .humidity-progress-bar-wrapper .percent p{font-family:Raleway;font-style:normal;font-weight:700;font-size:12px;line-height:14px}.highlights-component-container .highlights-card-wrapper .cards-wrapper .humidity-progress-bar-wrapper .humidity-progress-bar{width:60%;border-radius:12px;height:8px;background-color:#e7e7eb}.highlights-component-container .highlights-card-wrapper .cards-wrapper .humidity-progress-bar-wrapper .humidity-progress-bar .progress-bar-fill{height:100%;background:#ffec65;border-radius:12px}.highlights-component-container .highlights-card-wrapper .cards-wrapper .humidity-progress-bar-wrapper .humidity-progress-bar p{margin-left:95%;margin-top:5px;font-family:Raleway;font-style:normal;font-weight:700;font-size:12px;line-height:14px}.highlights-component-container .highlights-card-wrapper .cards-wrapper .visibility-status-card{width:328px;height:159px;background:#1e213a;display:flex;flex-direction:column;align-items:center}.highlights-component-container .highlights-card-wrapper .cards-wrapper .visibility-status-card .card-header{width:100%;height:auto;display:flex;margin-top:20px;justify-content:center;align-items:center;margin-bottom:3px}.highlights-component-container .highlights-card-wrapper .cards-wrapper .visibility-status-card .card-header h1{font-size:18px;font-family:Raleway,sans-serif}.highlights-component-container .highlights-card-wrapper .cards-wrapper .visibility-status-card .visibility-details{width:100%;height:auto;display:flex;justify-content:center;align-items:flex-end;margin-bottom:23px}.highlights-component-container .highlights-card-wrapper .cards-wrapper .visibility-status-card .visibility-details h1{font-family:Raleway,sans-serif;font-size:60px;font-weight:600;margin-top:13px}.highlights-component-container .highlights-card-wrapper .cards-wrapper .visibility-status-card .visibility-details span{font-family:Raleway,sans-serif;font-size:35px;display:inline-block;margin-bottom:10px;transform:translate(5px)}.highlights-component-container .highlights-card-wrapper .cards-wrapper .air-status-card{width:328px;height:159px;background:#1e213a;display:flex;flex-direction:column;align-items:center}.highlights-component-container .highlights-card-wrapper .cards-wrapper .air-status-card .card-header{width:100%;height:auto;display:flex;margin-top:20px;justify-content:center;align-items:center;margin-bottom:3px}.highlights-component-container .highlights-card-wrapper .cards-wrapper .air-status-card .card-header h1{font-size:18px;font-family:Raleway,sans-serif}.highlights-component-container .highlights-card-wrapper .cards-wrapper .air-status-card .air-details{width:100%;height:auto;display:flex;justify-content:center;align-items:flex-end;margin-bottom:23px}.highlights-component-container .highlights-card-wrapper .cards-wrapper .air-status-card .air-details h1{font-family:Raleway,sans-serif;font-size:60px;font-weight:600;margin-top:13px}.highlights-component-container .highlights-card-wrapper .cards-wrapper .air-status-card .air-details span{font-family:Raleway,sans-serif;font-size:35px;display:inline-block;margin-bottom:10px;transform:translate(5px)}.highlights-component-container .footer-container{width:100%;display:flex;justify-content:center;align-items:center;margin-top:60px}.highlights-component-container .footer-container p{color:#e7e7eb;font-family:Raleway,sans-serif}.highlights-component-container .footer-container p a{text-decoration:none;color:inherit;font-weight:600}@media screen and (max-width: 768px){.cards-wrapper{display:flex;width:100%;justify-content:center;align-items:center;flex-direction:column}}@media screen and (max-width: 1440px) and (min-width: 769px){.highlights-card-wrapper{transform:translateY(-50px)}}@media screen and (max-width: 400px){.header-title{display:flex;justify-content:center}.header-title h1{font-size:30px!important}.wind-status-card,.humidity-status-card,.visibility-status-card,.air-status-card{width:265px!important}.visibility-details,.air-details{transform:translateY(10px)}.visibility-details h1,.air-details h1{font-size:50px!important}.visibility-details span,.air-details span{font-size:25px!important}.footer-container{width:100%}.footer-container p{font-size:13px;transform:translateY(-10px)}}.fd-card-layout{display:flex;gap:1rem;width:100%;justify-content:center;height:40%;align-items:center;flex-wrap:wrap;margin-top:50px}.fd-card-layout .fd-wrapper{background-color:#1e213a;width:200px;height:257px}.fd-card-layout .fd-wrapper .fd-day{width:100%;min-height:30px;display:flex;justify-content:center;align-items:center}.fd-card-layout .fd-wrapper .fd-day h1{color:#e7e7eb;font-size:16px;font-family:Raleway,sans-serif;transform:translateY(20px);font-weight:500;line-height:19px}.fd-card-layout .fd-wrapper .fd-icon{height:200px;width:100%;display:flex;justify-content:center;align-items:center}.fd-card-layout .fd-wrapper .fd-icon .forecast-icon{width:100px;height:100px;display:flex;justify-content:center;align-items:center}.fd-card-layout .fd-wrapper .fd-icon .forecast-icon img{width:120px;height:120px}.fd-card-layout .fd-wrapper .fd-temps{display:flex;width:100%;justify-content:center;gap:1rem;font-family:Raleway,sans-serif;transform:translateY(-20px)}.fd-card-layout .fd-wrapper .fd-temps p{font-weight:500;font-size:20px;line-height:19px}.fd-card-layout .fd-wrapper .fd-temps p:last-child{color:#a09fb1}@media screen and (max-width: 768px){.fd-forecast-container{width:100%}.fd-forecast-container .fd-card-layout{margin-top:50px}}@media screen and (max-width: 1440px) and (min-width: 769px){.fd-card-layout{flex-wrap:unset;width:800px;margin-top:30px}}@media screen and (max-width: 500px){.fd-card-layout{width:330px;margin-top:30px;transform:translate(-10px)}.fd-card-layout .fd-wrapper{width:140px!important;height:257px}.fd-card-layout .fd-wrapper:last-child{transform:translate(-77px)}}.unit-buttons{display:flex;justify-content:flex-end;width:95%;gap:1rem}.unit-buttons button{color:#110e3c;width:35px;height:35px;border-radius:100%;text-align:center;background-color:#e7e7eb;border:none;cursor:pointer;font-family:Raleway,sans-serif;font-size:15px;font-weight:600;transform:translateY(20px)}.unit-buttons button:last-child{background-color:#585676;color:#e7e7eb}.unit-buttons .selected{background-color:#e7e7eb!important;color:#110e3c!important}.unit-buttons .not-selected{background-color:#585676;color:#e7e7eb}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}