#root{margin:0 auto;text-align:center;height:100dvh;width:100%}#langButtonsContainer{display:flex;gap:2px;position:fixed;right:4px;top:4px}.langActive,.cityActive{color:var(--enfasis-text-color-dark)}#langButton{padding:3px 7px;background-color:var(--lang-button-background-dark)}#langButton:hover{border-color:var(--enfasis-text-color-dark)}#cities{list-style:none;margin:0 20px 5px;padding:0}#cities li{margin:10px;font-size:1.5em;text-align:start;cursor:pointer}#cities li:hover{color:var(--enfasis-text-color-dark)}#contactForm{margin:10px 30px}#contactForm summary{text-align:start;font-size:1.5em;list-style:none;cursor:pointer}#contactForm summary:hover{color:var(--enfasis-text-color-dark)}#contactForm form{margin:auto;display:flex;flex-direction:column;max-width:120px}#contactForm form input{margin-bottom:5px;padding:5px;border:2px solid gray;border-radius:4px}#contactForm form label{text-align:start;margin-top:5px}#contactForm button{margin-top:5px;background-color:var(--form-button-dark)}#contactForm button:hover{border-color:var(--enfasis-text-color-dark)}#contactForm button:disabled{background-color:var(--nav-background-color-dark)}#weatherMain{opacity:0;transform:translateY(-8px)}#weatherDetails{opacity:0;transform:translateY(-8px);margin:20px 20px 40px;padding:0;list-style:none;display:flex;flex-direction:row;align-items:stretch;justify-content:center;gap:40px;flex-wrap:wrap}#weatherDetails li{position:relative;border-radius:10%;padding:8px;display:flex;flex-direction:column;width:110px;text-wrap:wrap}#weatherDetails li div{display:flex;flex-direction:column;justify-content:center;flex-grow:1}#weatherDetails li span{color:var(--enfasis-text-color-dark);font-size:1.2em}.detailsSVG{position:absolute;left:50%;top:40px;max-width:40px;opacity:.2;filter:invert(1)}#weatherDescription{font-size:2em;margin-top:0;color:var(--enfasis-text-color-dark)}#forecastList{opacity:0;transform:translateY(-8px);margin:0 auto;padding:0;list-style:none;display:flex;gap:15px;overflow-x:scroll;max-width:90%}#forecastList li{padding:10px;min-width:100px;position:relative}#forecastList li img{margin:auto;max-width:50px}#forecastList li div{display:flex;flex-direction:column}#forecastList li div span{color:var(--enfasis-text-color-dark)}.forecastArrow{position:absolute;top:50%;left:100%;font-size:1.5em}#weatherMain.noOpacity,#weatherDetails.noOpacity,#forecastList.noOpacity{opacity:1;transform:translateY(0);transition:all .3s ease}#menuButton{padding:0;position:fixed;top:20px;left:20px;width:40px;height:25px;background:transparent;border:none;display:none;flex-direction:column;justify-content:space-around;align-items:center;cursor:pointer;z-index:1001}#menuButton span{display:block;width:42px;height:4px;background-color:var(--menu-button-dark);border-radius:2px;transition:all .3s ease}#menuButton.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}#menuButton.open span:nth-child(2){opacity:0}#menuButton.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}.openMenu{transform:translate(0)}@media (prefers-color-scheme: light){.langActive,.cityActive,#weatherDescription,#weatherDetails li span,#forecastList li div span,#cities li:hover,#contactForm summary:hover{color:var(--enfasis-text-color-light)}.detailsSVG{filter:none;opacity:.1}#langButton{background-color:var(--lang-button-background-light)}#langButton:hover{border-color:var(--enfasis-text-color-light)}#menuButton span{background-color:var(--menu-button-light)}#contactForm button{background-color:var(--form-button-light)}#contactForm button:hover{border-color:var(--enfasis-text-color-light)}#contactForm button:disabled{background-color:var(--nav-background-color-light)}}@media (max-width: 730px){#menuButton{display:flex}#weatherDetails{margin:5px 5px 40px}#weatherDetails li{width:90px}}:root{--enfasis-text-color-dark: orange;--shadow-title-dark: orangered;--background-color-dark: gray;--nav-background-color-dark: #161616;--lang-button-background-dark: #1a1a1a;--menu-button-dark: gray;--form-button-dark: rgb(63, 63, 63);--enfasis-text-color-light: orange;--shadow-title-light: orangered;--background-color-light: rgb(231, 230, 217);--nav-background-color-light: rgb(146, 143, 105);--lang-button-background-light: rgb(146, 143, 105);--menu-button-light: rgb(0, 0, 0);--form-button-light: rgb(204, 186, 115)}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#fff;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;place-items:center;width:100%;height:100%}main{width:100vw;height:100%;display:grid;grid-template-columns:200px 1fr}nav{background-color:var(--nav-background-color-dark);grid-column:1;display:flex;flex-direction:column;justify-content:center;height:100dvh;position:fixed;width:200px;z-index:100;transition:transform .3s ease}article{margin:auto;grid-column:2;display:flex;flex-direction:column;justify-content:center;align-items:center;max-width:calc(100dvw - 200px)}section{max-width:90%}h1{font-size:3.2em;line-height:1.1;margin:20px 5px;color:var(--enfasis-text-color-dark);text-shadow:2px 2px 1px var(--shadow-title-dark)}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:border-color .25s}img{transform:scale(1.5)}@media (prefers-color-scheme: light){:root{color:#000;background-color:var(--background-color-light)}nav{background-color:var(--nav-background-color-light)}h1{color:var(--enfasis-text-color-light);text-shadow:2px 2px 1px var(--shadow-title-light)}}@media (max-width: 730px){main{display:block}nav{transform:translate(-220px)}article{max-width:75dvw}}