@import"https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;user-select:none;scroll-behavior:smooth}:root{--color-muted: rgba(255, 255, 255, .15);--color-banner: #7b68ee;--timer-grad: rgba(255, 255, 255, .5);--bg-url: url(../img/bg.svg);--bg-sidebar: var(--color-banner);--bg-modeToggle: rgba(0, 0, 0, .2);--bg-sidebar: #7b68ee;--bg-sidebarListHover: rgba(0, 0, 0, .1);--color-sidebar: white}.dark{--bg-color: #1b182c;--color-text: white;--bg-timer: #474650}.light{--bg-color: #dbdbdb;--color-muted: rgba(255, 255, 255, .3);--color-text: var(--color-banner);--bg-timer: whitesmoke;--timer-grad: rgba(255, 255, 255, .8);--timer-box: 0 0 5px 1px rgba(0, 0, 0, .1)}#customDisplay{display:none}body{background:var(--bg-url) var(--bg-color) center no-repeat fixed;background-size:cover;background-blend-mode:overlay;transition:background-color .2s ease,color .2s ease;color:var(--color-text);font-family:Nunito,sans-serif;width:100vw;height:100vh;overflow-x:hidden}main{width:100vw;height:100vh;padding-top:10vh}.container{height:90vh;width:100vw;display:flex;align-items:center;flex-direction:column;gap:2em;overflow-x:hidden;padding-bottom:3vmin}.mode-info{background:var(--bg-color);border-radius:.3rem;color:var(--color-text);padding:.2rem .8rem;-webkit-animation:slide-in .2s ease-in forwards,fade-out 2s ease .9s forwards;animation:slide-in .2s ease-in forwards,fade-out 2s ease .9s forwards;position:fixed;left:50%;top:-10rem;transform:translate(-50%);z-index:100}.light .mode-info{background:aliceblue}.link{color:var(--color-text);text-decoration:none}@-webkit-keyframes slide-in{to{top:2rem}}@keyframes slide-in{to{top:2rem}}@-webkit-keyframes fade-out{to{opacity:0}}@keyframes fade-out{to{opacity:0}}.toggleMode{font-size:1.4em;right:.8rem;top:.3rem;width:1.5em;height:1.5em;display:flex;justify-content:center;align-items:center;border-radius:50%;background:var(--bg-modeToggle);color:#f2e7ac;z-index:1;margin-right:5vmin}.banner-row{display:flex;justify-content:center;align-items:center;font-weight:700;font-size:1.7rem;text-align:center;width:100%}.banner{padding:.5em 1rem;border-radius:.1em;min-width:80vmin;color:var(--color-text);border-bottom:.5rem solid var(--color-banner)}.banner-h2{font-size:.85em;font-weight:lighter;letter-spacing:.15em}.day{font-size:1.77em}.clock-row{position:relative;display:flex;flex-direction:column;text-align:center;width:100vw;align-items:center;justify-content:center;border-radius:.2em;padding:10px;gap:1rem}.timer{font-size:1rem;position:relative;display:flex;justify-content:center;align-items:center;width:25vmin;height:25vmin;border:2px solid rgba(255,255,255,.2);border-radius:.7em;background:linear-gradient(90deg,var(--color-muted) 50%,var(--timer-grad) 50%);margin-bottom:1rem;backdrop-filter:blur(1px)}.light .timer{border:2px solid rgba(255,255,255,.7);box-shadow:var(--timer-box)}.timer-num{font-size:13vmin}.timer-text{content:"";position:absolute;bottom:-1em;background:var(--bg-timer);border-radius:.3em;padding:.5em;text-align:center;width:18vmin;overflow:clip;transition:background-color .2s ease}.light .timer-text{box-shadow:var(--timer-box)}.header{position:fixed;top:0;background:var(--color-banner);width:100vw;height:10vh;display:flex;align-items:center;justify-content:space-between;z-index:1}.logo{display:inline-flex;gap:1rem;height:7vh}.logo-name{text-align:center;font-size:5vh;color:var(--color-sidebar)}.app-name-display{cursor:pointer;border-radius:.3em;transition:background-color .2s ease;display:inline-block}.app-name-display:hover{background-color:#ffffff26}.app-name-input{font-family:Nunito,sans-serif;font-size:5vh;color:var(--color-sidebar);background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.4);border-radius:.3em;padding:.2em .5em;text-align:center;outline:none;min-width:200px;max-width:400px}.app-name-input:focus{background:rgba(255,255,255,.3);border-color:#fff9}.logo-ico img{width:7vh;height:7vh;border-radius:.9rem}.sidebar{position:fixed;top:0;left:-100%;z-index:3;width:65vmin;height:100vh;background:var(--bg-sidebar);color:var(--color-sidebar);box-shadow:var(--timer-box);overflow:hidden;transition:left .02s ease-in;backdrop-filter:blur(1px);box-shadow:0 1px 5px 1px #0003}.sidebar-content{display:flex;justify-content:start;align-items:flex-start;flex-direction:column;width:100%;height:100%;margin-left:5vmin}.sidebar-show{left:0%}.sidebar-hide{left:-100%}.nav,.sidebar-close{display:inline-flex;align-items:center;justify-content:center;padding:.3rem .4rem;border-radius:1vmin;border:.13rem solid white}.sidebar-close{right:0%;position:absolute}.nav{width:6vh;height:6vh;color:var(--color-sidebar);margin-left:5vmin}.brand{display:flex;width:100%;margin:3vmin 0 3vmin 4vmin}.brand-name{align-self:center;font-size:1.3em;margin-left:2vmin}.brand-logo img{width:13vmin;height:13vmin;border-radius:5vmin}.opt-group{color:#ffffff93;font-size:.7rem;align-self:center;width:90%;margin:5vmin 0 1vmin 0vmin}hr{color:#fff3;width:85%}.sidebar-list{width:90%}.sidebar-list-items{padding:2.5vmin 0vmin 2.5vmin 4vmin;border-radius:2.5vmin;margin:.5rem auto;display:grid;grid-template-areas:"icon text";justify-content:flex-start;align-items:center;gap:1.35rem}.sidebar-list-items:hover{background:var(--bg-sidebarListHover)}.pick-color{justify-content:center;align-items:flex-end;gap:.4rem;display:none;width:90%;margin:.7rem}.pick-color-ico{width:1.8rem;height:1.8rem;border-radius:50%;box-shadow:0 0 1px #00000026;border:white solid 2px}.pick-color-ico:nth-child(1){background:#fe2164;outline:#fe2164 solid 2px}.pick-color-ico:nth-child(6){background:#7b68ee;outline:#7b68ee solid 2px}.pick-color-ico:nth-child(4){background:#1cb65d;outline:#1cb65d solid 2px}.pick-color-ico:nth-child(5){background:#2f8bfc;outline:#2f8bfc solid 2px}.pick-color-ico:nth-child(3){background:#ffc000;outline:#ffc000 solid 2px}.pick-color-ico:nth-child(2){background:#e685b5;outline:#e685b5 solid 2px}.pick-color-ico:nth-child(7){background:#1f1f1f;outline:#1f1f1f solid 2px}.show-color{display:inline-flex}.new-item{position:fixed;display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border-radius:50%;right:10vmin;bottom:10vmin;background-color:var(--bg-newItem);box-shadow:0 0 5px 1px #0000001a;z-index:2;color:var(--color-text)}.countdown-list-date{box-shadow:var(--timer-box);border-radius:1vmin;width:3.8rem;height:2.8rem;display:grid;justify-content:space-between;align-items:center;grid-template-areas:"icon date";grid-template-columns:1fr 9fr;overflow:hidden;animation:expand-date 2.5s alternate 2 2s;margin-top:-.5em;transform:scale(.8)}.countdown-list-date:focus,.countdown-list-date:hover{width:13rem;transition:1s}.countdown-list-date:focus #dueDate,.countdown-list-date:hover #dueDate{padding:1vmin .5vmin 1vmin 1.5vmin;transition:1s}@keyframes expand-date{0%{visibility:visible;width:3.8rem}50%,to{width:13rem}}.date-icon{background:var(--color-muted);grid-area:icon;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:.1rem;width:3.8rem;height:2.8rem;background:var(--bg-timer);border-right:1px solid rgba(0,0,0,.05)}.due{font-size:.65rem}#dueDate{display:flex;justify-content:flex-start;align-items:center;grid-area:date;text-overflow:clip;white-space:nowrap;overflow:hidden;height:2.8rem;background:var(--bg-timer);filter:opacity(.8);animation:due-padding 2.5s alternate 2 2s}@keyframes due-padding{0%{padding:0}50%,to{padding:1vmin .5vmin 1vmin 1.5vmin}}@media screen and (min-width: 750px) and (orientation: landscape){body{overflow-y:hidden}.container{gap:4em}.banner{width:21em}.clock-row{font-size:25vmin;flex-direction:row;gap:2rem}.clock-row:after,.clock-row:before{width:1.8em;height:1.8em}}@media screen and (max-width: 550px){.logo-name{display:none}}@media screen and (max-width: 427px){.container{gap:1.6em}.banner-row{font-size:1.3rem}.timer-text{font-size:.75rem}.sidebar{width:75vmin}.new-item{bottom:10vh}.countdown-list-date{transform:scale(.65)}}
