.notification{display:flex;align-items:center;width:auto;height:auto;position:fixed;top:130px;left:-220px;background-color:#fff;padding:20px 40px 20px 15px;border-radius:15px;box-shadow:0 4px 6px #0000001a;transition:left .6s ease-in-out;z-index:20}.notification.visible{left:50px}.notification .text{color:var(--red);font-family:Inter,sans-serif;font-size:16px;margin:0}.notification .close-button{position:absolute;top:10px;right:10px;cursor:pointer;color:#000;background-color:transparent}.search-bar{display:flex;width:285px;height:41px;border-radius:30px;background:#fff;position:absolute;top:40px;left:80px;box-shadow:0 4px 30px #00000024}.search-bar input{width:207px;border:none;outline:none;padding:10px 0 10px 21px;border-radius:30px;font-size:14px;font-weight:600}.search-bar .vertical-line{align-self:center}.search-bar .search-icon{width:auto;margin:auto 0 auto 14px}.search-bar .search-icon:hover{cursor:pointer}.rain,.snow,.rain input,.snow input{color:var(--blue)}.rain input::placeholder,.snow input::placeholder{color:var(--light-blue)}.rain .vertical-line path,.rain .search-icon path,.snow .vertical-line path,.snow .search-icon path{stroke:var(--light-blue)}.sun,.clear,.sun input,.clear input{color:var(--orange)}.sun input::placeholder,.clear input::placeholder{color:var(--light-orange)}.sun .vertical-line path,.sun .search-icon path,.clear .vertical-line path,.clear .search-icon path{stroke:var(--light-orange)}.clouds,.fog,.dust,.mist,.clouds input,.fog input,.dust input,.mist input{color:var(--green)}.clouds input::placeholder,.fog input::placeholder,.dust input::placeholder,.mist input::placeholder{color:var(--light-green)}.clouds .vertical-line path,.clouds .search-icon path,.fog .vertical-line path,.fog .search-icon path,.dust .vertical-line path,.dust .search-icon path,.mist .vertical-line path,.mist .search-icon path{stroke:var(--light-green)}.logo{width:212px;height:55px}.nav-bar{display:flex;flex-direction:row;width:100%;margin-top:21px;justify-content:center;align-items:center;position:absolute;top:0;left:0}.nav-bar .logo-link,.nav-bar .search-bar{z-index:1}@font-face{font-family:Oddval;src:url(./src/shared/assets/fonts/oddval-semibold.ttf) format("truetype");font-family:Circe-thin;src:url(./src/shared/assets/fonts/circe25.otf);font-family:Circe-medium;src:url(./src/shared/assets/fonts/circe35.otf);font-family:Circe-bold;src:url(./src/shared/assets/fonts/circe55.otf)}.hourly-forecast{position:relative;font-family:Oddval}.hourly-forecast .slider-container{display:flex;flex-direction:row;overflow:hidden}.hourly-forecast .slider-container .slider{display:flex;transition:transform .3s ease}.hourly-forecast .slider-container .slider .day{display:flex;flex-direction:column;align-items:center;justify-content:space-around;width:55px;height:65px}.hourly-forecast .slider-container .slider .day .line{width:100%;height:1px;background-color:var(--white)}.hourly-forecast .right-arrow,.hourly-forecast .left-arrow{position:absolute;display:flex;height:auto;justify-content:center;align-items:center;cursor:pointer;background-color:transparent;border:none;padding:0}.hourly-forecast .left-arrow{left:-20px;top:22px}.hourly-forecast .right-arrow{top:21px;right:-20px}@font-face{font-family:Oddval;src:url(./src/shared/assets/fonts/oddval-semibold.ttf) format("truetype");font-family:Circe-thin;src:url(./src/shared/assets/fonts/circe25.otf);font-family:Circe-medium;src:url(./src/shared/assets/fonts/circe35.otf);font-family:Circe-bold;src:url(./src/shared/assets/fonts/circe55.otf)}@media screen and (min-width: 1240px) and (min-height: 700px){.additional-info{text-align:left;margin-bottom:20px}.additional-info .title{font-family:Circe-medium,sans-serif;font-size:16px}.additional-info .rain,.additional-info .snow{color:var(--blue)}.additional-info .sun,.additional-info .clear{color:var(--orange)}.additional-info .clouds,.additional-info .fog,.additional-info .dust,.additional-info .mist{color:var(--green)}.additional-info .rain-light,.additional-info .snow-light{color:var(--light-blue)}.additional-info .sun-light,.additional-info .clear-light{color:var(--light-orange)}.additional-info .clouds-light,.additional-info .fog-light,.additional-info .dust-light,.additional-info .mist-light{color:var(--light-green)}.additional-info .value{font-family:Oddval;font-size:16px;font-weight:600}}@media screen and (min-width: 1240px) and (min-height: 900px){.additional-info{margin-bottom:40px}}@font-face{font-family:Oddval;src:url(./src/shared/assets/fonts/oddval-semibold.ttf) format("truetype");font-family:Circe-thin;src:url(./src/shared/assets/fonts/circe25.otf);font-family:Circe-medium;src:url(./src/shared/assets/fonts/circe35.otf);font-family:Circe-bold;src:url(./src/shared/assets/fonts/circe55.otf)}@media screen and (min-width: 1240px) and (min-height: 700px){.weather-card{width:455px;height:180px;background-color:var(--blue);border-radius:40px;padding:21px 36px;color:var(--white);position:relative;box-shadow:0 4px 30px #00000024;box-sizing:border-box;margin-bottom:20px;z-index:1;transition:width .5s ease,height .5s ease;overflow:hidden}.weather-card .main-info{display:flex;flex-direction:row;font-family:Oddval}.weather-card .main-info .left{text-align:left;width:70%}.weather-card .main-info .left .temperature{font-size:48px;font-weight:600;line-height:100%}.weather-card .main-info .left h2{font-size:24px;font-weight:600;margin:0}.weather-card .main-info .left .rain,.weather-card .main-info .left .snow{color:var(--light-blue)}.weather-card .main-info .left .sun,.weather-card .main-info .left .clear{color:var(--light-orange)}.weather-card .main-info .left .clouds,.weather-card .main-info .left .fog,.weather-card .main-info .left .dust,.weather-card .main-info .left .mist{color:var(--light-green)}.weather-card .main-info .right{text-transform:lowercase;text-align:left}.weather-card .main-info .right .date{font-size:32px;font-weight:600;line-height:100%;margin-bottom:15px}.weather-card .main-info .right .time{font-size:32px;font-weight:600;line-height:80%}.weather-card .main-info .right .day{font-size:16px;font-weight:600}.weather-card .weather{position:absolute;text-transform:lowercase;writing-mode:horizontal-tb;bottom:-27px;left:36px;font-size:64px;font-weight:600;font-family:Oddval}.weather-card.rain,.weather-card.snow{background-color:var(--blue)}.weather-card.sun,.weather-card.clear{background-color:var(--orange)}.weather-card.clouds,.weather-card.fog,.weather-card.dust,.weather-card.mist{background-color:var(--green)}.weather-expanded{height:418px;z-index:1}.weather-expanded .weather{width:55px;height:90px;writing-mode:vertical-rl;top:135px;left:430px;font-size:50px}.hide{display:none}.weather-card{cursor:pointer}.weather-expanded{cursor:default}}@media screen and (min-height: 900px){.weather-card{height:224px}.weather-card .main-info{margin-bottom:25px}.weather-expanded{height:468px}}@font-face{font-family:Oddval;src:url(./src/shared/assets/fonts/oddval-semibold.ttf) format("truetype");font-family:Circe-thin;src:url(./src/shared/assets/fonts/circe25.otf);font-family:Circe-medium;src:url(./src/shared/assets/fonts/circe35.otf);font-family:Circe-bold;src:url(./src/shared/assets/fonts/circe55.otf)}@media screen and (min-width: 1240px) and (min-height: 700px){.daily-forecast{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr;align-items:center;width:455px;height:150px;border-radius:40px;background:#fff;box-shadow:0 4px 30px #00000024;padding:10px 59px;font-family:Oddval;box-sizing:border-box;z-index:1;transition:width .5s ease,height .5s ease;overflow:hidden}.daily-forecast .daily-weather{display:flex;flex-direction:column;align-items:center;width:60px;height:50px;border-radius:14px;padding:7px 12px;box-sizing:content-box;text-align:left}.daily-forecast .daily-weather .day{color:#000;font-size:24px;font-weight:600}.daily-forecast .daily-weather .day-temperature{color:#6e6e6e;font-size:20px;font-weight:600;line-height:.6rem}.daily-forecast .daily-weather .date,.daily-forecast .daily-weather .night-temperature,.daily-forecast .daily-weather .weather{display:none}.forecast-expanded{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr;align-items:center;width:455px;height:395px;border-radius:40px;background:#fff;box-shadow:0 4px 30px #00000024;padding:8px 50px;font-family:Oddval;box-sizing:border-box;z-index:1;transition:width .5s ease,height .5s ease;overflow:hidden}.forecast-expanded .daily-weather{display:flex;flex-direction:column;width:85px;height:165px;border-radius:14px;padding:0 12px;box-sizing:border-box;text-align:left}.forecast-expanded .daily-weather .day{color:#000;font-size:24px;font-weight:600}.forecast-expanded .daily-weather .date{font-size:16px;font-weight:600;text-transform:lowercase;margin-bottom:22px}.forecast-expanded .daily-weather .day-temperature{font-size:20px;font-weight:600}.forecast-expanded .daily-weather .night-temperature{color:#d9d9d9;font-size:20px;font-weight:600}.forecast-expanded .daily-weather .weather{color:#000;font-size:16px;font-weight:600}.forecast-expanded .rain,.forecast-expanded .snow{color:var(--blue)}.forecast-expanded .sun,.forecast-expanded .clear{color:var(--orange)}.forecast-expanded .clouds,.forecast-expanded .fog,.forecast-expanded .dust,.forecast-expanded .mist{color:var(--green)}.daily-forecast{cursor:pointer}.forecast-expanded:hover{cursor:default}}@media screen and (min-width: 1240px) and (min-height: 900px){.daily-forecast{height:224px;padding:47px 59px 52px}.forecast-expanded{padding:53px 50px;height:468px}.forecast-expanded .daily-weather{padding:7px 12px}}@font-face{font-family:Oddval;src:url(./src/shared/assets/fonts/oddval-semibold.ttf) format("truetype");font-family:Circe-thin;src:url(./src/shared/assets/fonts/circe25.otf);font-family:Circe-medium;src:url(./src/shared/assets/fonts/circe35.otf);font-family:Circe-bold;src:url(./src/shared/assets/fonts/circe55.otf)}.navigation-link{display:flex;flex-direction:row;align-items:center;position:absolute;bottom:65px;left:65px;z-index:1}.navigation-link .link{display:flex;height:24px;color:#000;font-size:16px;font-family:Poppins,sans-serif;outline:none;margin:0 15px;text-decoration:none;border-bottom:1px solid black}.navigation-link.left{flex-direction:row-reverse}.navigation-link.left .arrow{transform:rotate(180deg)}@media screen and (min-width: 1240px) and (min-height: 700px){.background-container{width:100vw;height:100vh;overflow:hidden;position:absolute}.background-container .background-image{opacity:0;transition:opacity .5s ease-in-out}.background-container .background-image.loaded{opacity:1}.background-container .rain-character{position:absolute;height:615px;left:7.5%;top:80px}.background-container .blob{width:231px;height:231px;position:absolute}.background-container .blob path{fill:var(--light-blue)}.background-container .rain-1{bottom:-80px;left:0}.background-container .rain-2{top:424px;left:437px}.background-container .rain-3{top:170px;left:437px}.background-container .rain-4{top:170px;left:698px}.background-container .rain-5{top:-84px;left:648px}.background-container .rain-6{top:170px;right:-76px}.background-container .clouds{width:826px;height:611px;position:absolute;top:85px;left:20vw}.background-container .clouds circle{fill:var(--light-green)}.background-container .clouds-character{height:800px;position:absolute;top:0;left:110px}.background-container .sun{width:590px;height:590px;position:absolute;top:100px;left:0;right:0;margin:auto;border-radius:50%;background-color:var(--light-orange)}.background-container .sun-character{width:719px;height:719px;position:absolute;top:40px;left:106px}.background-container .snow{position:absolute}.background-container .snow path{fill:var(--light-blue)}.background-container .snow-1{top:120.5px;left:100px;width:288px;height:293px}.background-container .snow-2{top:260px;left:528px;width:174px;height:177px}.background-container .snow-3{top:473px;left:347px;width:164px;height:162px}.background-container .snow-4{top:518px;left:605px;width:140px;height:142px}.background-container .snow-character{height:700px;position:absolute;top:40px;left:250px}.background-container.white .blob path,.background-container.white .snow path{fill:var(--white)}.background-container.white .clouds circle{fill:var(--white)}.background-container.white .sun{background-color:var(--white)}}@media screen and (min-width: 1240px) and (min-height: 900px){.background-container .sun-character{width:850px;height:850px;top:10vh}.background-container .clouds-character{height:950px}.background-container .rain-character{position:absolute;height:790px;left:7.5%}.background-container .snow-character{height:900px;position:absolute;top:70px;left:300px}.background-container .sun{width:750px;height:750px;top:133px}.background-container .clouds{width:950px;height:850px}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.loader-container{display:flex;align-items:center;justify-content:center;width:100vw;height:100vh}.loader-container .sun-loader{display:flex;align-self:center;justify-self:center;margin:auto;width:200px;height:200px;background-color:var(--orange);border-radius:50%;animation:pulse 2s infinite ease-in-out}body::-webkit-scrollbar{width:scrollbarwidthpx}.weather-page{display:flex;flex-direction:column;align-items:center;width:100vw;height:100vh}.weather-page .content-container{display:flex;position:fixed;flex-direction:column;align-items:flex-end;align-self:self-end;top:90px;right:80px;z-index:3}.weather-page.rain,.weather-page.snow{background-color:var(--light-blue)}.weather-page.sun,.weather-page.clear{background-color:var(--light-orange)}.weather-page.clouds,.weather-page.fog,.weather-page.dust,.weather-page.mist{background-color:var(--light-green)}.look-page{min-height:100vh;background-color:var(--white)}.look-page .left-part{display:flex;flex-direction:column;margin-left:80px;position:absolute;top:134px;z-index:10}.look-page .left-part .location{color:#000;font-size:24px;font-family:Oddval;font-weight:600;text-align:left}.look-page .right-part{position:absolute;top:70px;right:160px;text-align:left;z-index:10}.look-page .right-part h1{color:#000;font-family:Oddval;font-size:48px;margin:0}.look-page .right-part .temperature{font-family:Oddval;font-size:48px}.look-page .right-part .rain,.look-page .right-part .snow{color:var(--blue)}.look-page .right-part .sun,.look-page .right-part .clear{color:var(--orange)}.look-page .right-part .clouds,.look-page .right-part .fog,.look-page .right-part .dust,.look-page .right-part .mist{color:var(--green)}.look-page .right-part .clothes-list{list-style:none;color:#000;font-family:Circe-bold;font-size:16px;font-style:normal;font-weight:400;line-height:normal;margin-left:170px;padding:0}.look-page .right-part .clothes-list li{margin-bottom:17px}.look-page .clothes-description{position:absolute;width:353px;bottom:32px;right:87px;text-align:left;color:#000;font-family:Circe-bold;font-size:16px;font-style:normal;font-weight:400;line-height:140.9%;z-index:10}.look-page.rain,.look-page.snow{background-color:var(--light-blue)}.look-page.sun,.look-page.clear{background-color:var(--light-orange)}.look-page.clouds,.look-page.fog,.look-page.dust,.look-page.mist{background-color:var(--light-green)}.narrow-page{display:flex;flex-direction:column;align-items:center;min-height:100vh;font-family:Oddval,sans-serif}.narrow-page .title{text-align:center;font-size:30px;font-weight:700;margin:50px 15px}.narrow-page .text{font-size:18px;font-weight:400;margin:0 20px}.narrow-page .images-container{display:flex;position:relative;justify-content:center;width:350px;height:350px;margin:auto}.narrow-page .images-container .sun-character{position:absolute;inset:0;width:100%;margin:auto;z-index:2}.narrow-page .images-container .sun{width:100%;height:100%;border-radius:50%;z-index:1;background-color:var(--light-orange)}@media screen and (min-width: 768px){.narrow-page{max-height:100vh;overflow:hidden}.narrow-page .title{font-size:35px;margin-bottom:20px}.narrow-page .text{font-size:22px}.narrow-page .images-container,.narrow-page .images-container .sun-character{width:650px;height:650px}}#root{--light-blue: #cae7fd;--blue: #67a8f4;--light-orange: #fdcbca;--orange: #ff753e;--light-green: #caf0c0;--green: #29af77;--white: #ffffff;--red: #ff0000}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:3.2em;line-height:1.1}.loader{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}.loader img{width:100px;height:100px;-webkit-animation:rotating 2s linear infinite;-moz-animation:rotating 2s linear infinite;-ms-animation:rotating 2s linear infinite;-o-animation:rotating 2s linear infinite;animation:rotating 2s linear infinite}button{border:none;outline:none;background-color:transparent;padding:0;cursor:pointer}