#header{background-color:#8999ce;background-image:linear-gradient(to top,hsl(229deg,92%,34%),hsl(212deg,88%,37%));text-align:left;width:100%;margin:0 auto;display:flex;justify-content:space-evenly;align-items:center;flex-wrap:wrap;padding:7px 0}#header h1{font-family:Lobster,sans-serif;font-size:28px;font-weight:500;margin:5px 10px 5px 15px;letter-spacing:.1em;color:#eef5fc}#header h1 img{width:35px;height:35px;vertical-align:bottom;padding-right:14px}#header form{display:flex;justify-content:center;align-items:center;width:300px;padding:8px 0;position:relative}#header form :focus{box-shadow:0 0 2px 1px #affdfd;background-color:#e3e3e8;outline:none}#header form input[type=search]{font-size:16px;margin:0 9px 0 5px;width:185px;height:28px;padding-left:12px;border-radius:15px;background-color:#dbdbe1;border:none;transition:.3s ease}#header form input[placeholder]{color:#18181b}#header form ::-webkit-input-placeholder{color:#4e4e50}#header form #search-button{font-size:15px;font-family:Roboto,sans-serif;text-align:center;border:none;border-radius:4px;width:67px;height:23px;margin:0;background-color:#3888f0;box-shadow:0 0 0 2px #bfdde8;color:#f0f0f5;transition:.3s ease}#header form #search-button:hover{cursor:pointer;background-color:#62a1f3;color:#1d1e20;box-shadow:0 0 0 1px #c8edfc}#header form div{position:absolute;top:90%;left:8%;background-color:#e3e3e8;width:182px;z-index:2}#header form div button{font-size:17px;display:block;text-align:left;padding:8px 7px;margin:0;color:#2a2b2d;border:none;width:100%}#header form div button:hover{background-color:#d2d2da;cursor:pointer}#header .back{width:300px;padding:8px 0;text-align:center;transition:.3s ease}#header .back .link{font-size:15px;font-family:Roboto,sans-serif;color:#e0ffe0;background-color:#315087;padding:.4em .7em;box-shadow:0 0 2px 1px #add1ffd9;border-radius:8px;transition:.3s ease}#header .back .link:hover{color:#ecffec;background-color:#375b9a}#header .hide{display:none}#header .hamburger-wrap{height:30px;width:30px;margin:0 .8em 0 0;display:none}#header .hamburger,#header .hamburger:after,#header .hamburger:before{width:26px;height:2px;background-color:#eef5fc;transition:.2s ease;border-radius:25px}#header .hamburger{position:relative;top:50%;left:0;display:flex;margin:0 auto;justify-content:center}#header .hamburger:after{content:"";top:8px;position:absolute}#header .hamburger:before{content:"";top:-8px;position:absolute}#header .hamb-open{width:0}#header .hamb-open:after{top:0;transform:rotate(225deg)}#header .hamb-open:before{top:0;transform:rotate(-225deg)}@media only screen and (max-width: 1250px){#header{padding:3px 0 8px;justify-content:space-between}#header h1{font-size:23px;margin:5px 10px}#header h1 img{width:28px;height:28px}#header form{padding:9px 25px 5px}#header form input[type=search]{font-size:15px;height:26px}#header form div{left:14%}#header form div button{font-size:15px}#header form #button{font-size:14px;width:62px}#header .back{order:2;flex:0 0 100%}#header .back .link{font-size:14px}#header .hamburger-wrap{display:block;margin:0 .8em 0 .5em}}@media only screen and (max-width: 656px){#header form{order:2;margin:0 auto}}.table-wrap::-webkit-scrollbar{height:4px;background-color:#262640}.table-wrap::-webkit-scrollbar-thumb{background-color:#66668a}.table-wrap::-webkit-button{background-color:bisque}#weather-forecast-home{padding-top:25px;padding-bottom:25px;width:75%}.current-weather{font-family:Roboto,sans-serif;padding:2px 0 35px}.current-weather .city-country{font-family:Open Sans,sans-serif;font-size:1.45rem;color:#ffffc2;background-color:#2a2a47;text-align:center;padding:.7em .5em;margin:0;border-radius:6px}.current-weather .date-and-year{font-size:1.1rem;text-align:center;line-height:1.5em;padding:.7em 0;margin:0 10px}.current-weather .date-and-year :last-child{color:#ffffc2}.current-weather .current-wrapper{display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center;padding-top:15px}.current-weather .current-wrapper .temp-summary-wrapper{width:300px;margin:0 30px 20px}.current-weather .current-wrapper .temp-summary-wrapper #temp-now{color:#fbfbad;font-size:6em;font-weight:500;text-align:center;margin:5px 0 10px}.current-weather .current-wrapper .temp-summary-wrapper #temp-now sup{font-size:.5em}.current-weather .current-wrapper .temp-summary-wrapper .current-summary{font-size:1.2em;text-align:center;color:#decdfe;background-color:#262640;padding:.7em;margin:0;border-radius:8px}.current-weather .current-wrapper .image-wrapper{width:230px;text-align:center;margin:0 10px}.current-weather .current-wrapper .image-wrapper img{width:160px;height:160px;align-self:center}.current-weather .current-wrapper .other-details-wrapper{display:flex;flex-direction:column;align-items:center}.current-weather .current-wrapper .other-details-wrapper .other-details{font-size:1.1em;box-sizing:border-box;width:230px;height:175px;overflow-y:hidden;margin:0 10px;padding-left:10px;border-bottom:2px solid hsl(240deg,18%,26%);transition:.4s ease}.current-weather .current-wrapper .other-details-wrapper .other-details p{margin:18px 0}.current-weather .current-wrapper .other-details-wrapper .other-details p span{color:#fcfcc5}.current-weather .current-wrapper .other-details-wrapper .show-details{height:295px}.current-weather .hourly-forecast{width:94%;margin:0 auto}.current-weather .hourly-forecast h3{font-family:Open Sans,sans-serif;font-size:1.2rem;font-weight:600;color:#ffe7c2;margin:25px 0 12px 3px}.current-weather .hourly-forecast .table-wrap{overflow-x:auto}.current-weather .hourly-forecast .table-wrap table{width:100%;margin:0;text-align:center;background:rgb(36,76,119);background-image:linear-gradient(to bottom,rgb(23,61,102),rgb(67,67,82));border-radius:5px;border-collapse:collapse}.current-weather .hourly-forecast .table-wrap table tbody td{font-size:16px;padding:5px 10px}.current-weather .hourly-forecast .table-wrap table tbody .td-hour{border-top:1px solid hsl(240deg,18%,38%);border-right:1px solid hsl(240deg,18%,38%);border-left:1px solid hsl(240deg,18%,38%)}.current-weather .hourly-forecast .table-wrap table tbody .td-icon{padding:3px 10px;border-right:1px solid hsl(240deg,18%,38%);border-left:1px solid hsl(240deg,18%,38%)}.current-weather .hourly-forecast .table-wrap table tbody .td-icon img{width:27px;height:27px;padding:0 1em}.current-weather .hourly-forecast .table-wrap table tbody .td-temperature{border-bottom:1px solid hsl(240deg,18%,38%);border-right:1px solid hsl(240deg,18%,38%);border-left:1px solid hsl(240deg,18%,38%)}#city-country-star-wrap{position:relative;z-index:0;user-select:none}#city-country-star-wrap .bookmark-star{font-size:23px;color:#b5dcf2;height:30px;width:23px;position:absolute;margin:0;padding:0;top:0;left:7px;cursor:pointer}.seven-day-forecast{padding:23px 0 5px;font-family:Roboto,sans-serif;border-top:2px solid hsl(240deg,18%,26%)}.seven-day-forecast h3{font-family:Open Sans,sans-serif;font-size:1.25em;font-weight:600;margin:0;color:#ffe7c2;text-align:center}.seven-day-forecast ul{display:flex;flex-wrap:wrap;justify-content:center;list-style-type:none;padding:0;margin:10px auto;max-width:calc(300px + 50%)}.seven-day-forecast ul li{margin:0 12px;display:inline-block;text-align:center}.seven-day-forecast ul li .link{text-decoration:none;outline:0}.seven-day-forecast ul li .link #day-date{font-family:Roboto,sans-serif;color:#f4f4be;padding:3px 7px;margin:5px 0;line-height:1.3em;height:60px;display:flex;flex-direction:column;justify-content:center;align-items:center}.seven-day-forecast ul li .link #day-date span{font-family:Open sans,sans-serif;font-size:15px;font-weight:500;display:block}.seven-day-forecast ul li .link #day-date span:last-child{font-family:Roboto,sans-serif;font-size:14px;font-weight:400;color:#f4f4bed9}.seven-day-forecast ul li .link img{width:56px;position:relative;bottom:0;transition:.3s ease}.seven-day-forecast ul li .link .temp-lowhigh p{display:inline-block;padding:0 6px;margin:15px 0 14px}.seven-day-forecast ul li .link .temp-lowhigh p span{font-size:1rem}.seven-day-forecast ul li .link .temp-lowhigh p span sup{font-size:.7rem}.one-day-card{background:hsl(211deg,54%,30%);background-image:linear-gradient(to bottom,hsl(211deg,68%,26%),hsl(240deg,20%,22%));width:132px;margin:10px 0;border-radius:8px;position:relative;bottom:0;right:0;transition:.2s ease-in-out}.one-day-card:hover{bottom:9px;right:3px}@media only screen and (max-width: 1250px){#weather-forecast-home{width:100%}.current-weather .city-country{font-size:1.35rem;padding:.7em 2em}.current-weather .date-and-year{font-size:1rem;padding:.8em 0 0}.current-weather .current-wrapper{margin-top:15px}.current-weather .current-wrapper .temp-summary-wrapper{margin:0 25px}.current-weather .current-wrapper .temp-summary-wrapper #temp-now{font-size:5em;margin:5px 0 10px}.current-weather .current-wrapper .temp-summary-wrapper #temp-now sup{font-size:.5em}.current-weather .current-wrapper .temp-summary-wrapper .current-summary{font-size:1.25em;text-align:center;padding:.6em .7em}.current-weather .hourly-forecast h3{font-size:1.1em}.seven-day-forecast h3{font-size:1.15em}}@media only screen and (max-width: 899px){.current-weather .city-country{border-radius:0}.current-weather .current-wrapper .other-details-wrapper{margin:1.7em 0 .5em}.current-weather .current-wrapper .other-details-wrapper .other-details{text-align:center}#city-country-star-wrap .bookmark-star{font-size:21px;cursor:auto}}#daily-forecast{font-family:Roboto,sans-serif;padding:25px 0 45px;width:75%}.city-country{font-family:Open Sans,sans-serif;font-size:25px;text-align:center;margin:0;color:#ffffc2}.date-and-year{font-family:Open Sans,sans-serif;font-size:18px;text-align:center;margin:15px 0 25px}#summary{font-size:21px;color:#decdfe;text-align:center;background-color:#2a2a47;padding:1em 0;margin:0 0 20px;border-radius:6px}.day-wrapper{display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center;padding-top:25px}.day-wrapper .image-wrapper{width:230px;text-align:center;margin:0 10px}.day-wrapper .image-wrapper img{width:160px;height:160px;align-self:center}.day-wrapper .temp-lowhigh{text-align:center;width:300px;color:#c5cace;background-color:#24243d;border-radius:10px;margin:0 2em}.day-wrapper .temp-lowhigh p{font-size:1.35rem;font-family:Roboto,sans-serif;padding:0 15px;margin:20px 0}.day-wrapper .temp-lowhigh p span{display:block;font-size:3.75rem;font-weight:500}.day-wrapper .temp-lowhigh p span sup{font-size:2rem}.day-wrapper .other-details-wrapper{display:flex;flex-direction:column;align-items:center}.day-wrapper .other-details-wrapper .other-details{font-size:1.25em;box-sizing:border-box;width:230px;height:175px;overflow-y:hidden;margin:0 10px;padding-left:10px;border-bottom:2px solid hsl(240deg,18%,26%);transition:.4s ease;height:190px}.day-wrapper .other-details-wrapper .other-details p{margin:18px 0}.day-wrapper .other-details-wrapper .other-details p span{color:#fcfcc5}.day-wrapper .other-details-wrapper .show-details{height:295px;height:320px}.hourly-forecast{width:94%;margin:0 auto}.hourly-forecast h3{font-family:Open Sans,sans-serif;font-size:1.2rem;font-weight:600;color:#ffe7c2;margin:25px 0 12px 3px}.hourly-forecast .table-wrap{overflow-x:auto}.hourly-forecast .table-wrap table{width:100%;margin:0;text-align:center;background:rgb(36,76,119);background-image:linear-gradient(to bottom,rgb(23,61,102),rgb(67,67,82));border-radius:5px;border-collapse:collapse}.hourly-forecast .table-wrap table tbody td{font-size:16px;padding:5px 10px}.hourly-forecast .table-wrap table tbody .td-hour{border-top:1px solid hsl(240deg,18%,38%);border-right:1px solid hsl(240deg,18%,38%);border-left:1px solid hsl(240deg,18%,38%)}.hourly-forecast .table-wrap table tbody .td-icon{padding:3px 10px;border-right:1px solid hsl(240deg,18%,38%);border-left:1px solid hsl(240deg,18%,38%)}.hourly-forecast .table-wrap table tbody .td-icon img{width:27px;height:27px;padding:0 1em}.hourly-forecast .table-wrap table tbody .td-temperature{border-bottom:1px solid hsl(240deg,18%,38%);border-right:1px solid hsl(240deg,18%,38%);border-left:1px solid hsl(240deg,18%,38%)}.hourly-forecast h3{margin:35px 0 12px 3px}.pagination{display:flex;justify-content:space-around;flex-wrap:wrap;margin-top:2.25em;padding-top:2.5em;border-top:2px solid hsl(240deg,18%,26%)}.pagination .prev-next-button{display:flex;align-items:center;text-align:center;color:#e0ffe0;border-radius:9px;user-select:none}.pagination .prev-next-button div{background-color:#2e4c7f;box-shadow:0 0 2px 1px #add1ffd9;border-radius:8px;padding:4px 0;transition:.3s ease}.pagination .prev-next-button div p{width:105px;font-family:Open Sans,sans-serif;font-size:14px;margin:0;padding:1px 5px}.pagination .prev-next-button .lr-arrow{font-size:23px;width:20px;margin:0;text-align:left}.pagination .prev-next-button .right-arrow{border-right:none;order:2;text-align:right}.prev-next-button:hover div{background-color:#32538b;color:#ebffeb;box-shadow:0 0 2px 1px #add1ffb3}.prev-next-button:hover .lr-arrow{color:#ebffeb}@media only screen and (max-width: 1250px){#daily-forecast{width:100%}.city-country{font-size:23px;margin:0 15px}.date-and-year{font-size:17px;margin:15px 15px 25px}#summary{font-size:19px;padding:1.2em 1em;margin:0 0 10px}.day-wrapper{padding-top:20px}.day-wrapper .temp-lowhigh{margin:2em 1em}.day-wrapper .temp-lowhigh p{font-size:1.2rem}.day-wrapper .temp-lowhigh p span{font-size:3.5rem}.day-wrapper .temp-lowhigh p span sup{font-size:1.75rem}.day-wrapper .other-details-wrapper .other-details{font-size:1.2em;height:185px}.day-wrapper .other-details-wrapper .other-details p{margin:18px 0}.day-wrapper .other-details-wrapper .show-details{height:310px}.hourly-forecast h3{font-size:1.2em;margin:25px 0 12px 3px}}@media only screen and (max-width: 899px){.city-country{font-size:24px}.date-and-year{font-size:16px}#summary{font-size:18px;border-radius:0}.day-wrapper{padding-top:20px}.day-wrapper .temp-lowhigh{width:320px;max-width:100%;display:flex;justify-content:center;margin:1.5em 1em 1.7em}.day-wrapper .temp-lowhigh p{font-size:1rem}.day-wrapper .temp-lowhigh p span{font-size:2.5rem}.day-wrapper .temp-lowhigh p span sup{font-size:1.45rem}.day-wrapper .other-details-wrapper .other-details{font-size:1.1em;text-align:center;height:175px}.day-wrapper .other-details-wrapper .other-details p{margin:18px 0}.day-wrapper .other-details-wrapper .show-details{height:300px}.hourly-forecast{margin-bottom:1.5em}.hourly-forecast h3{font-size:1.1em;margin:30px 0 12px 3px}}.aside{background-color:#202037;position:absolute;z-index:1;width:100%;height:100vh;overflow-y:auto;scrollbar-width:none;transform:translateZ(-1px);transition:.3s ease}.aside>div{width:90%;position:absolute;top:0;left:5%}.aside>div h2{font-family:Open Sans,sans-serif;font-size:18px;font-weight:500;color:#ffe7c2}.hide-aside{transform:translate3d(-100%,0,-1px)}.bookmarked-cities{margin:1.75em 0}.bookmarked-cities h2{margin:.5em 0}.bookmarked-cities .bm-cities-wrap{padding-bottom:.75em;border-bottom:2px solid hsl(240deg,18%,26%)}.bookmarked-cities p{font-family:Roboto,sans-serif;font-size:15px;font-style:italic;color:#777792;margin:.87em 1em .6em 0}.bookmarked-cities p span{font-size:18px}#bookmark{font-family:Roboto,sans-serif;display:flex;align-items:center;gap:1.6em}#bookmark h3,#bookmark p{padding:2px 0}#bookmark h3{font-size:15px;font-weight:500;margin:5px 0;flex:.6}#bookmark h3 .link{color:#c8dfc8}#bookmark button{font-size:14px;background-color:transparent;padding:1px 5px;margin:8px 0;border:none;border-radius:5px;outline:none}#bookmark div{display:flex;justify-content:space-around;flex:1}#bookmark div #remove{color:#ef7b7bbf;box-shadow:0 0 2px 1px #ef7b7bbf}.popular-cities .cities-ul{box-sizing:border-box;font-family:Roboto,sans-serif;overflow-y:hidden;display:grid;grid-template-columns:1fr 1fr;gap:.4em 2.5em;padding:0 0 2em;margin:0;height:295px;list-style-type:none;transition:.3s ease;border-bottom:2px solid hsl(240deg,18%,26%)}.popular-cities .cities-ul li{font-size:15px;margin:0;padding:.4em 0;transition:.3s ease}.popular-cities .cities-ul li .link{color:#c8dfc8;cursor:pointer}.popular-cities .cities-ul p:hover{background-color:#282843;color:#dfecdf}.popular-cities .all-cities-ul{height:733px}.settings{padding-bottom:.5em;margin-top:1.5em;margin-bottom:12em;border-bottom:2px solid hsl(240deg,18%,26%)}.settings h3{font-family:Open Sans,sans-serif;font-size:16px;font-weight:400;color:#ffe7c2e6}.settings div{display:grid;grid-template-columns:1fr 1fr;gap:.4em 2.5em;margin-bottom:1.3em}.settings div p{font-family:Roboto,sans-serif;font-size:14px;color:#c8dfc8;margin:0}.settings div p span{padding:4px 5px;border-radius:4px}.aside::-webkit-scrollbar{width:0}.default{color:#99c5ffb3;box-shadow:0 0 2px 1px #99c5ffb3}.checked{color:#add1ff;box-shadow:0 0 2px 2px #add1ffd9}@media only screen and (min-width: 899px){.aside{width:60%}}@media only screen and (min-width: 1250px){.aside{position:relative;width:24%;max-width:430px;height:auto;transform:none}#bookmark button{user-select:none;cursor:pointer}#bookmark div #remove:hover{color:#ef7b7b;box-shadow:0 0 2px 1px #ef7b7b}.settings{margin-bottom:3em}.settings p{cursor:pointer}.default:hover{color:#add1ff;box-shadow:0 0 2px 1px #add1ff}.checked{pointer-events:none}}.sad,.happy{background-repeat:no-repeat;background-position:bottom;background-size:185px}body{background:hsl(240deg,26%,13%);color:#f7f4f4;margin:0}.aside-menu-open{overflow-y:visible}#root{display:flex;flex-direction:column;min-height:100dvh}.weather-app{flex:1;display:flex;justify-content:space-between}.forecast-wrapper{max-width:calc(400px + 50%);margin:0 auto}.link{text-decoration:none;outline:0}#low{color:#a6d5fc}#high{color:#ef7b7b}footer{font-family:Open Sans,sans-serif;font-size:17px;font-weight:500;color:#d3dadf;background-color:#8999ce;background-image:linear-gradient(to bottom,hsl(229deg,92%,32%),hsl(212deg,88%,35%));padding:1.6em 0;margin:0 auto;display:flex;justify-content:space-around;width:100%}footer p{margin:0}footer :nth-child(2) span{font-size:20px;font-family:Lobster,sans-serif;letter-spacing:.02em}.message{font-size:24px;font-family:Roboto,sans-serif;width:700px;height:375px;max-width:100%;text-align:center;margin:0 auto 2.5em;padding:1.5em 0 .1em;line-height:1.5em;color:#e6e6e6}.message p{margin:0 12px;white-space:pre-line}.happy{background-image:url(/assets/smiling-sun.40f7076c.png)}.sad{background-image:url(/assets/sad-sun.bc165ddc.png)}.expand-triangle{width:0;height:0;border-left:19px solid transparent;border-right:19px solid transparent;border-top:11px solid hsl(217deg,43%,36%);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:.4s ease}.expand-triangle:hover{border-top:11px solid hsl(217deg,43%,40%)}.is-expanded{transform:rotate(180deg) translateY(115%)}@media only screen and (max-width: 899px){.aside-menu-open{overflow-y:hidden}footer{font-size:15px;flex-direction:column;justify-content:center;align-items:center}footer :nth-child(2){margin-top:1em}footer :nth-child(2) span{font-size:17px}}