@import"https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap";:root{--fg-primary: 12vh;--fg-secondary: 3vh;--fg-date: 8vh;--fg-list: 2vh;--icon: 3vh;--fg: #3a3a3a;--sfg: #494949;--accent: #57a0d9;--background: #f5f5f5;--cards: #e4e6e6;--imgbg: url(assets/background.jpg);--imgcol: linear-gradient( rgba(255, 255, 255, .7), rgba(255, 255, 255, .7) )}.darktheme{--accent: #57a0d9;--background: #19171a;--cards: #201e21;--fg: #d8dee9;--sfg: #888;--imgcol: linear-gradient( rgba(0, 0, 0, .85), rgba(0, 0, 0, .85) )}*{margin:0;padding:0;box-sizing:border-box;font-family:Open Sans,sans-serif;transition:.2s ease-in-out}#app{width:100vw;height:100vh;background-color:var(--background);display:flex;align-items:center;justify-content:center}.notransition{-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.withImageBackground{background-image:var(--imgcol),var(--imgbg);background-size:cover}#themeButton{position:absolute;margin:2em 2em 0 0;right:0;top:0;color:var(--fg);border:none;cursor:pointer;background-color:#0000}#themeIcon{width:25px;height:25px}.container{width:145vh;height:85vh;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,1fr);grid-gap:30px;padding:20px}.card{background-color:var(--cards);box-shadow:0 5px 7px #00000059;border-radius:5px}.card:hover{transform:translateY(-.2rem);box-shadow:0 10px 10px #00000059}.timeBlock{grid-row:1 / span 2;grid-column:1 / span 2;display:flex;flex-direction:column;align-items:center;justify-content:center}.weatherBlock{grid-column:3 / span 2;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:center;justify-content:center}.searchBlock{grid-column:1 / span 4;grid-row:3;display:flex;align-items:center;justify-content:center;padding:20px}.searchForm{display:flex;align-items:center;width:100%;max-width:600px;position:relative;background-color:var(--cards);border-radius:12px;padding:8px;box-shadow:0 3px 6px #00000026;transition:all .2s ease-in-out}.searchForm:hover{transform:translateY(-.1rem);box-shadow:0 5px 10px #0003}#searchInput{flex:1;padding:15px 20px;font-size:18px;border:none;border-radius:8px;background-color:transparent;color:var(--fg);outline:none;transition:all .2s ease-in-out;font-weight:500}#searchInput::placeholder{color:var(--sfg);opacity:1;font-weight:400}#searchInput:focus{background-color:var(--background);color:var(--fg)}#searchButton{padding:15px;margin-left:8px;background-color:var(--accent);border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease-in-out;min-width:50px}#searchButton:hover{transform:scale(1.05);background-color:var(--accent);opacity:.9}#searchButton i{width:20px;height:20px;color:#fff}.date{display:flex;align-items:center;justify-content:center;margin-top:30px}.weather,.clock{display:flex;align-items:center;justify-content:center}#hour,#separator,#minutes{font-size:var(--fg-primary);font-weight:bolder;color:var(--fg)}#month,#day{font-size:var(--fg-date);font-weight:700;color:var(--fg)}#day{margin-left:1.5rem}#greetings{font-size:var(--fg-secondary);color:var(--fg)}.weatherIcon img{width:70px;height:70px}.weatherValue p{font-size:var(--fg-secondary);font-weight:bolder;margin-left:15px;color:var(--fg)}.weatherDescription p{font-size:var(--fg-secondary);margin-left:15px;color:var(--fg)}.reduceGap{grid-gap:2rem!important}.removeGap{grid-gap:0!important}.linksBlock{grid-row:4 / span 2;grid-column:1 / span 4;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);grid-gap:1.5rem}.linksBlockLeft{grid-row:1 / span 2;grid-column:1 / span 2}.linksBlockRight{grid-row:1 / span 2;grid-column:3 / span 2}.buttonsContainer{width:100%;height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);grid-gap:30px;padding:20px}.button{display:flex;justify-content:center;align-items:center;width:100%}.buttonIcon{width:var(--icon);height:var(--icon);color:var(--fg)}.button__1{grid-row:1;grid-column:1}.button__2{grid-row:1;grid-column:2}.button__3{grid-row:2;grid-column:1}.button__4{grid-row:2;grid-column:2}.button__5{grid-row:1;grid-column:3}.button__6{grid-row:2;grid-column:3}.button:hover{background-color:var(--accent)}.button:hover svg{stroke:var(--sfg)}.listsContainer{width:100%;height:100%;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);grid-gap:3rem;padding:1rem}.list{display:flex;align-items:center;justify-content:center;flex-direction:column}.list__1{grid-column:1;grid-row:1 / span 2}.list__2{grid-column:2;grid-row:1 / span 2}.listIcon{margin-bottom:2vh;color:var(--fg);width:var(--icon);height:var(--icon)}.listItem{text-decoration:none;font-size:var(--fg-list);color:var(--fg);margin-top:1vh;padding:8px 12px;border-radius:5px;font-weight:700;text-align:center;width:80%}.listItem:hover{background-color:var(--accent);color:var(--sfg)}@media only screen and (max-width: 120em){.container{width:130vw;height:90vh}}@media only screen and (max-width: 100em){.container{width:95vw;height:90vh}}@media only screen and (max-width: 75em){:root{--fg-primary: 10vh;--fg-secondary: 2.5vh;--fg-date: 6vh;--fg-list: 1.8vh;--icon: 2.5vh}.container{width:95vw;height:95vh;grid-template-rows:repeat(4,1fr);grid-gap:15px;padding:20px}.timeBlock{grid-row:1;grid-column:1 / span 4}.weatherBlock{grid-row:2;grid-column:1 / span 4;flex-direction:row;justify-content:space-around}.searchBlock{grid-row:3;grid-column:1 / span 4;padding:10px}.searchForm{max-width:100%;padding:6px}#searchInput{font-size:16px;padding:12px 16px;font-weight:500}#searchButton{padding:12px;min-width:44px}.linksBlock{grid-row:4;grid-column:1 / span 4;grid-template-columns:1fr;grid-template-rows:1fr}.linksBlockLeft{grid-column:1;grid-row:1}.linksBlockRight{display:none}.listsContainer{grid-gap:2rem;padding:.5rem}.buttonsContainer{grid-gap:15px;padding:10px}.button{padding:10px}}@media only screen and (max-width: 68.75em){.container{width:95vw;height:90vh;grid-gap:20px;padding:30px}.timeBlock{grid-row:1 / span 2;grid-column:1 / span 4}.weatherBlock{display:none}.searchBlock{grid-row:3;grid-column:1 / span 4;padding:15px}.searchForm{max-width:100%}#searchInput{font-size:16px;padding:12px 16px}#searchButton{padding:12px;min-width:44px}.linksBlockRight{display:none}.linksBlockLeft{grid-column:1 / span 4;grid-row:4 / span 2}.button{padding:10px}.listsContainer{padding:.8rem}}@media only screen and (max-width: 48em){:root{--fg-primary: 8vh;--fg-secondary: 2.5vh;--fg-date: 5vh;--fg-list: 1.8vh;--icon: 2.5vh}.container{width:100vw;height:100vh;grid-template-columns:1fr;grid-template-rows:auto auto auto 1fr;grid-gap:15px;padding:20px}.timeBlock{grid-row:1;grid-column:1}.weatherBlock{grid-row:2;grid-column:1;display:flex;flex-direction:row;justify-content:space-around;align-items:center;padding:15px}.date{margin-top:0}.searchBlock{grid-row:3;grid-column:1;padding:10px}.linksBlock{grid-row:4;grid-column:1;grid-template-columns:1fr;grid-template-rows:1fr}.linksBlockLeft{grid-column:1;grid-row:1}.listsContainer{grid-template-columns:1fr;grid-template-rows:repeat(2,auto);grid-gap:2rem;padding:1rem}.list__1,.list__2{grid-column:1;grid-row:auto}.buttonsContainer{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);grid-gap:15px;padding:15px}.button{padding:12px 8px}.button__1{grid-row:1;grid-column:1}.button__2{grid-row:1;grid-column:2}.button__3{grid-row:2;grid-column:1}.button__4{grid-row:2;grid-column:2}.button__5{grid-row:3;grid-column:1}.button__6{grid-row:3;grid-column:2}}@media only screen and (max-width: 30em){:root{--fg-primary: 6vh;--fg-secondary: 2vh;--fg-date: 4vh;--fg-list: 1.6vh;--icon: 2vh}.container{grid-gap:10px;padding:10px}.searchForm{padding:3px}#searchInput{font-size:14px;padding:8px 12px}.listsContainer{grid-gap:1.5rem;padding:.5rem}.buttonsContainer{grid-gap:10px;padding:10px}}#settingsButton{position:absolute;margin:2em 5em 0 0;right:0;top:0;color:var(--fg);border:none;cursor:pointer;background-color:#0000}.settings-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.settings-content{background-color:var(--cards);border-radius:12px;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 10px 30px #00000080}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--background)}.settings-header h2{color:var(--fg);margin:0;font-size:24px;font-weight:600}.close-btn{background:none;border:none;color:var(--fg);cursor:pointer;padding:8px;border-radius:6px;transition:all .2s ease}.close-btn:hover{background-color:var(--background)}.close-btn i{width:20px;height:20px}.settings-tabs{display:flex;background-color:var(--background);border-radius:8px 8px 0 0;margin:0;padding:0}.tab-btn{flex:1;padding:12px 16px;background:none;border:none;color:var(--sfg);cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease;border-radius:8px 8px 0 0}.tab-btn:hover{color:var(--fg);background-color:var(--cards)}.tab-btn.active{color:var(--fg);background-color:var(--cards);border-bottom:2px solid var(--accent)}.tab-content{display:none;animation:fadeIn .2s ease-in-out}.tab-content.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.settings-body{padding:0}.settings-section{margin-bottom:32px;padding:20px 24px}.settings-section:last-child{margin-bottom:0}.settings-section h3{color:var(--fg);margin:0 0 16px;font-size:18px;font-weight:600}.setting-item{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:16px}.setting-item label{color:var(--fg);font-size:14px;font-weight:500;min-width:120px;text-align:left}.setting-item input[type=text],.setting-item input[type=password],.setting-item input[type=url],.setting-item select{flex:1;padding:8px 12px;border:1px solid var(--background);border-radius:6px;background-color:var(--background);color:var(--fg);font-size:14px}.setting-item input[type=text]:focus,.setting-item input[type=password]:focus,.setting-item input[type=url]:focus,.setting-item select:focus{outline:none;border-color:var(--accent)}.setting-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}.buttons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:16px}.button-item{background-color:var(--background);border-radius:8px;padding:16px;border:1px solid var(--cards)}.button-header{margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--cards)}.button-header span{color:var(--fg);font-weight:600;font-size:14px}.button-item .setting-item{margin-bottom:8px}.button-item .setting-item label{min-width:60px;font-size:12px}.button-item input{font-size:12px;padding:6px 8px}.lists-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:16px}.list-item{background-color:var(--background);border-radius:8px;padding:16px;border:1px solid var(--cards)}.list-header{margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--cards)}.list-header span{color:var(--fg);font-weight:600;font-size:14px}.link-group{margin-top:16px;padding:12px;background-color:var(--cards);border-radius:6px;border:1px solid var(--background)}.link-group h4{color:var(--fg);margin:0 0 8px;font-size:12px;font-weight:600;opacity:.8}.link-group .setting-item{margin-bottom:6px}.link-group .setting-item label{min-width:50px;font-size:11px}.link-group input{font-size:11px;padding:4px 6px}.settings-footer{padding:20px 24px;border-top:1px solid var(--background);display:flex;gap:12px;justify-content:flex-end}.save-btn,.reset-btn{padding:10px 20px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.save-btn{background-color:var(--accent);color:#fff}.save-btn:hover{opacity:.9;transform:translateY(-1px)}.reset-btn{background-color:transparent;color:var(--sfg);border:1px solid var(--background)}.reset-btn:hover{background-color:var(--background);color:var(--fg)}@media only screen and (max-width: 48em){.settings-content{width:95%;max-height:90vh}.settings-header,.settings-section,.settings-footer{padding:16px 20px}.setting-item{flex-direction:column;align-items:flex-start;gap:8px}.setting-item label{min-width:auto}.setting-item input[type=text],.setting-item input[type=password],.setting-item input[type=url],.setting-item select{width:100%}.buttons-grid,.lists-grid{grid-template-columns:1fr}.tab-btn{padding:10px 12px;font-size:12px}}
