@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap";body{flex-direction:column;justify-content:center;align-items:center;display:flex}.hello{color:var(--text);font-size:25px;font-family:var(--primary-font);background-color:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:10px;margin-top:10px;margin-bottom:10px;padding:0 10px;font-weight:900}.info{background-color:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border);color:var(--text);cursor:pointer;border-radius:18px;padding:10px;position:absolute;bottom:10px;left:20px}#background{z-index:-1;background-position:50%;background-size:cover;position:fixed;inset:0}:root{--text:#fff;--text-secondary:#d1d5db;--glass:#ffffff1a;--glass-border:#ffffff26;--glass-hover:#ffffff29;--primary-font:"Space Grotesk", sans-serif}.time-date{font-family:var(--primary-font);flex-direction:column;justify-content:center;align-items:center;margin:0%;padding:5px 10px;display:flex}.time{color:var(--text);margin-bottom:-10px;font-size:70px;font-weight:500}.date{color:var(--text);margin-top:0;margin-bottom:0;font-size:20px}.search-container{width:600px;margin-bottom:25px}#search{border:1px solid var(--glass-border);background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);width:100%;color:var(--text);border-radius:30px;outline:none;padding:16px 22px;font-size:1rem;transition:all .3s ease-in-out}#search::placeholder{color:var(--text-secondary)}#search:focus{border-color:var(--text)}#search:hover{border-color:var(--text);transform:scale(1.03)}.shortcuts{flex-wrap:wrap;gap:15px;display:flex}.shortcut{width:110px;height:100px;color:var(--text);background:var(--glass);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:10px;text-decoration:none;transition:all .2s ease-in-out;display:flex}.shortcut:hover{background:var(--glass-hover);border-color:var(--text);transform:translateY(-4px)}.shortcut img{width:32px;height:32px}.shortcut span{font-size:14px}.calendar{background:var(--glass);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid var(--glass-border);width:260px;color:var(--text);border-radius:18px;padding:18px;position:absolute;top:40px;right:40px}.calendar-header{font-family:var(--primary-font);justify-content:space-between;align-items:center;margin-bottom:15px;font-size:16px;font-weight:500;display:flex}.calendar-weekdays,.calendar-days{text-align:center;grid-template-columns:repeat(7,1fr);display:grid}.calendar-weekdays{opacity:.55;margin-bottom:8px;font-size:11px}.calendar-days{gap:5px}.calendar-days span{width:28px;height:28px;font-family:var(--primary-font);justify-content:center;align-items:center;font-size:12px;display:flex}.calendar-days .today{background:var(--glass-hover);border-radius:50%;font-weight:600}.settings-btn{background-color:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border);color:var(--text);cursor:pointer;border-radius:50px;padding:10px 15px;font-size:20px;transition:all .5s ease-in-out;position:absolute;top:10px;left:20px}.settings-btn:hover{background-color:var(--glass-hover);transform:rotate(50deg)}.settings-panel{background-color:var(--glass);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);width:300px;height:fit-content;font-family:var(--primary-font);color:var(--text);visibility:hidden;border-radius:15px;flex-direction:column;justify-content:center;align-items:center;padding:3px 10px;display:flex;position:absolute;top:70px;left:60px}#name{border:1px solid var(--glass-border);background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);width:80%;color:var(--text);border-radius:30px;outline:none;margin:0;padding:10px 15px;font-size:1rem;transition:transform .3s,border .2s}#name::placeholder{color:var(--text-secondary)}#name:focus{border-color:var(--text)}#name:hover{border-color:var(--text);transform:scale(1.03)}.ok-btn{background-color:var(--glass);border:1px solid var(--glass-border);color:var(--text);text-align:center;cursor:pointer;border-radius:15px;margin-top:10px;margin-bottom:10px;padding:5px 20px;font-size:20px;transition:border .2s,background .2s}.ok-btn:hover{background-color:var(--glass-hover);border:1px solid var(--text)}
