@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;500;600&display=swap";:root{margin:0;padding:0;--color-dark-mode-white: #E9E9E9;--color-dark-mode-light-blue: #9292DB;--color-dark-mode-blue-secondary: #1E1D46;--color-dark-blue: #100f3b;--color-mostard: #eec300;--color-gray-light: #f2fbff;--border-radius-primary: 1.63rem;--border-radius-b1: .5rem;--padding-wrapper: 3rem;--letter-spacing: -.025em;--letter-spacing-2: -.05em;--font-size-p17: 1.066rem;--font-size-p12: .75rem;--font-size-p10: .65rem;--transition-default: all .2s linear}body{margin:0;padding:0;min-height:100vh;background:radial-gradient(50% 50% at 50% 50%,#a7cffd 0%,#7fb5f3 100%);display:flex;align-items:center;justify-content:center;justify-items:center;font-family:Montserrat,sans-serif;letter-spacing:var(--letter-spacing);font-weight:400}.bold{font-weight:600}article{width:100%;min-width:1100px;background:radial-gradient(29.63% 90.27% at 32.01% 49.35%,#f9fdff 0%,#c9edfd 100%);border-radius:var(--border-radius-primary);width:80vw;max-width:1070px;box-shadow:3px 5px 16px #0000002e;display:flex;justify-content:space-between}.hero{padding:var(--padding-wrapper);width:100%}.hero .hero-title{font-weight:400;font-size:1.93rem;letter-spacing:var(--letter-spacing-2);margin-top:1.3rem;margin-bottom:0}.hero .filters button,.hero .filters input{font-family:Montserrat,sans-serif}.hero .filters input{border-radius:var(--border-radius-b1);border:0;width:39%;font-size:.75rem;background:#fff url(/images/filter.svg) no-repeat 1rem center;padding:1.3rem 1rem 1.3rem 3rem}.hero .filters button{background:none;border:0;padding:1rem;padding-left:0;margin-left:1.4rem;font-weight:500;cursor:pointer;color:var(--color-dark-blue)}footer{text-align:center;font-size:.65rem}footer p{opacity:.5;margin-top:1.2rem}footer a,footer p{transition:var(--transition-default)}footer p:hover{opacity:1}footer a{color:#000;text-decoration:none}footer a:hover{text-decoration:underline}.toggle{opacity:.5;transition:var(--transition-default)}.toggle:hover{opacity:1}.toggle input{width:0;height:0;position:absolute;opacity:0;visibility:hidden}.toggle .toggle-selector{width:45px;border:2px solid var(--color-dark-mode-light-blue);height:23px;border-radius:2rem;position:relative;cursor:pointer}.toggle .toggle-selector *{box-sizing:border-box}.toggle .toggle-selector .wrapper-icons{width:17.5px;height:17.5px;background:#EEC300;display:inline-block;border-radius:50%;transition:var(--transition-default);margin-top:2.5px;position:relative;margin-left:3px}.toggle .toggle-selector svg{display:none;width:70%;position:absolute;top:-3px;display:inline-block;left:50%;transform:translate(-50%)}.toggle.enabled .wrapper-icons{background-color:var(--color-dark-mode-light-blue);transform:translate(120%)}.hidden{display:none}.darkmode body{background:radial-gradient(50% 50% at 50% 50%,#5A6AA5 0%,#232B5F 100%)}.darkmode body,.darkmode .hero-title{color:var(--color-dark-mode-white)}.darkmode article{background:radial-gradient(29.63% 90.27% at 32.01% 49.35%,#1E1D45 0%,#100F3B 100%)}.darkmode aside{background-color:var(--color-dark-mode-blue-secondary)}.darkmode aside,.darkmode aside header a{color:var(--color-dark-mode-white)}.darkmode .hero .filters button{color:var(--color-dark-mode-light-blue);transition:var(--transition-default)}.darkmode .hero .filters button:hover{color:var(--color-dark-mode-white)}.darkmode .hero .filters input:focus,.darkmode .hero .filters input:hover{opacity:1}.darkmode .hero .filters input{opacity:.5;transition:var(--transition-default);color:var(--color-dark-mode-white);background:transparent url(/images/filter-white.svg) no-repeat 1rem center;border:1px solid var(--color-dark-mode-light-blue)}.darkmode ::placeholder{color:var(--color-dark-mode-light-blue);opacity:1}.darkmode :-ms-input-placeholder{color:var(--color-dark-mode-light-blue)}.darkmode ::-ms-input-placeholder{color:var(--color-dark-mode-light-blue)}.darkmode footer a{color:#fff}.hero .cards .row{display:flex;flex-flow:row wrap;align-items:self-end}.hero .cards .row:nth-of-type(2){margin-top:2rem}.hero .cards .card:hover{transform:translateY(-5px)}.hero .cards .card{text-align:center;width:21%;cursor:pointer;margin-left:5%;margin-top:3.4em;transition:var(--transition-default)}.hero .cards .card:nth-child(4n+1){margin-left:0}.hero .cards .card .wrapper-image-card{width:100%;border-radius:var(--border-radius-primary);overflow:hidden;transition:var(--transition-default);max-height:190px;aspect-ratio:1/1.1}.hero .cards .card .wrapper-image-card img{transition:var(--transition-default);aspect-ratio:1/1.1;object-fit:cover;width:100%}.hero .cards .card.active{filter:drop-shadow(2px 4px 4px rgba(0,0,0,.2))}.hero .cards .card.active .wrapper-image-card,.hero .cards .card.active .wrapper-image-card img{aspect-ratio:1/1.3}.hero .cards .card .card-title{margin:.45rem 0 0;font-size:var(--font-size-p10)}.toggle-unit-temp{display:inline-block;padding-top:.8rem;transition:var(--transition-default)}.toggle-unit-temp .toggle-selector{width:55px;height:16px}.toggle-unit-temp .toggle-selector svg{height:50px}.toggle-unit-temp .toggle-selector .wrapper-icons{width:45%;height:11.5px;border-radius:.6rem;z-index:5;position:absolute;left:0;background-color:var(--color-dark-mode-light-blue)}.toggle-unit-temp .toggle-selector:before,.toggle-unit-temp .toggle-selector:after{font-size:.8rem;position:absolute}.toggle-unit-temp .toggle-selector:after{content:"C\b0";right:6px}.toggle-unit-temp .toggle-selector:before{content:"F\b0";left:6px}.toggle-unit-temp .toggle.enabled .wrapper-icons{transform:translate(100%)}aside{display:flex;flex-flow:column;justify-content:space-between;min-width:29%;padding:var(--padding-wrapper);background-color:var(--color-dark-blue);color:#fff;border-top-right-radius:var(--border-radius-primary);border-bottom-right-radius:var(--border-radius-primary)}aside header{display:flex;flex-flow:nowrap;align-items:center;justify-content:space-between;font-weight:400}aside header ul{align-items:center}aside header ul,aside header li{margin:0;padding:0}aside header ul{list-style-type:none;display:flex;color:#fff}aside header li{margin-right:1rem}aside header .alerts{display:inline-block;background-color:red;padding:.18rem .35rem;margin-left:.1em;font-size:.8rem;vertical-align:middle;border-radius:6px;text-align:center}aside header a{color:#fff;font-size:.7rem;text-decoration:none}aside header .user-avatar{width:42px;height:42px;background:#fff url(/images/av-fig.jpg) no-repeat center center/cover;border-radius:50%;position:relative}aside .user-avatar:before{content:"";position:absolute;top:0;width:10px;height:10px;background-color:red;right:0;border-radius:50%}aside .daily-conditions{margin:4.4rem 0;text-align:center;display:flex;flex-flow:column}aside .daily-conditions .date-conditions{display:flex;align-items:center;justify-content:center}aside .daily-conditions .date-conditions picture{width:45px;margin-right:.5rem}aside .daily-conditions .date-conditions picture img{width:100%}aside .daily-conditions .date-conditions .date-info{display:flex;text-align:left;flex-flow:column}aside .daily-conditions .date-conditions .date-info .day{font-size:var(--font-size-p17);margin-bottom:.2rem}aside .daily-conditions .date-conditions .date-info .week-day{font-size:var(--font-size-p10);color:var(--color-gray-light)}aside .daily-conditions .temperature-value{font-size:6rem;font-weight:200;vertical-align:top;line-height:1;position:relative}aside .daily-conditions .temperature-value .unit-temp{font-size:2rem;position:absolute;top:.5rem;color:var(--color-gray-light)}aside .daily-conditions .city-name{font-size:var(--font-size-p12);color:var(--color-gray-light)}aside .weekly-forecast{font-size:var(--font-size-p12);font-weight:400;display:flex;flex-flow:column}aside .weekly-forecast .title{font-size:.8rem}aside .weekly-forecast .row{display:flex;margin-top:1.5rem;justify-content:space-between;padding:0 1.8em;align-content:center;text-align:center;font-size:.8rem}aside .weekly-forecast .col div{margin-top:.5rem}aside .weekly-forecast .col .min-temp,aside .weekly-forecast .col .max-temp{font-size:1rem}aside .weekly-forecast picture{width:40px;height:40px;display:inline-block}aside .weekly-forecast picture img{max-width:100%}