.container{max-width:76.8rem;margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative}.header{-ms-flex-item-align:stretch;align-self:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:1rem 4rem;color:var(--color3);padding-bottom:1rem;border-bottom:1px solid #939899}.header-buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around}.header h1{line-height:4.5rem;font-size:4rem}.header img{width:4rem;color:var(--color4);-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.header img:hover{-webkit-box-shadow:0px 20px 205px -46px rgba(0,0,0,0.85);box-shadow:0px 20px 205px -46px rgba(0,0,0,0.85);-webkit-transform:scale(1.2);transform:scale(1.2);color:var(--color3);cursor:pointer}.reverse-column{-webkit-box-orient:vertical !important;-webkit-box-direction:reverse !important;-ms-flex-direction:column-reverse !important;flex-direction:column-reverse !important}.tasks{margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.tasks-cards{width:50rem;height:10.5rem;background-color:var(--color2);border-radius:1.5rem;margin:1rem;-webkit-box-shadow:0px 20px 205px -46px rgba(0,0,0,0.85);box-shadow:0px 20px 205px -46px rgba(0,0,0,0.85);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.tasks-cards:hover{-webkit-transform:scale(1.01);transform:scale(1.01)}.tasks-cards-number{opacity:0}.tasks-cards-title{font-size:1rem;color:var(--color3);-webkit-box-flex:2;-ms-flex:2;flex:2;margin-left:1rem}.tasks-cards-title p{font-size:1.5rem}.tasks-cards-title h2{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:15rem;font-size:2rem}.tasks-cards-date{-webkit-box-flex:1;-ms-flex:1;flex:1;color:var(--color3);margin-right:1rem}.tasks-cards-date p{font-size:1.5rem}.tasks-cards-date h2{font-size:2rem}.tasks-cards-edit{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;display:-webkit-box;display:-ms-flexbox;display:flex;margin:1rem 0}.tasks-cards i{font-size:3rem;color:var(--color3);-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out;margin:.5rem 2rem}.tasks-cards i:hover{cursor:pointer}.fa-check:hover{color:green;-webkit-transform:scale(1.2);transform:scale(1.2)}.fa-times:hover{color:#ee8d8d;-webkit-transform:scale(1.2);transform:scale(1.2)}.clear{background-color:var(--color2);padding:.2rem 5rem;border-radius:5rem;margin:4rem;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.clear-button{display:inline-block;text-align:center}.clear-button img{width:3rem;height:3rem;padding:.5rem 0}.clear:hover{-webkit-box-shadow:0px 20px 205px -46px rgba(0,0,0,0.85);box-shadow:0px 20px 205px -46px rgba(0,0,0,0.85);-webkit-transform:scale(1.2);transform:scale(1.2);color:var(--color3);cursor:pointer}.overlay{opacity:.1;background-color:#000;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;-webkit-animation:pop .2s;animation:pop .2s}.pop-out{display:none;-webkit-transform:scale(0.5);transform:scale(0.5)}.taskList{font-size:5rem;color:#c28c8c;display:none}:root{--color1: #1D3535;--color2: #3D6771;--color3: #9BEBF0;--color4: white;--color5: #0f0f0f;--lightmodeBG: #132931 !important;--lightmodeCards: #0C3846 !important;--lightColor1: #01D1FF !important}body::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);box-shadow:inset 0 0 6px rgba(0,0,0,0.3);background-color:var(--lightmodeCards)}body::-webkit-scrollbar{width:5px;background-color:var(--color3)}body::-webkit-scrollbar-thumb{background-color:var(--color2)}@media (max-width: 35rem){.date-now{margin:1rem}.date-now h1{color:var(--color3);font-size:1.5rem}.switch-button{margin-right:2rem !important}.header{width:90vw;margin:2rem auto}.header h1{font-size:2.5rem;line-height:1rem !important}.tasks-cards{width:90vw;height:11rem}.tasks-cards-title h2{margin-right:3rem}.form{top:50% !important;left:50% !important;height:100%;width:100%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}}@media (max-width: 22rem){.switch-button{margin-right:1rem !important}.header{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.header-buttons{margin:2rem 0}.header-buttons-reverse{margin-left:1rem}.header h1{line-height:5.5rem}.tasks-cards{width:90vw;height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.tasks-cards-number{margin:0;font-size:2rem}.tasks-cards-title{margin:-1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;justify-items:center}.tasks-cards-title p{margin-left:1rem;margin-right:0.5rem;font-size:2rem}.tasks-cards-title h2{font-size:2.5rem}.tasks-cards-date{margin:-1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;justify-items:center}.tasks-cards-date p{margin-right:1rem;font-size:2rem}.tasks-cards-date h2{font-size:2.5rem}.tasks-cards-edit{-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-orient:horizontal !important;-webkit-box-direction:normal !important;-ms-flex-direction:row !important;flex-direction:row !important;margin:1rem 0;width:70%}}@media (max-width: 235px){.tasks-cards-title{width:90%;margin-left:1rem}.tasks-cards-title p{font-size:1.5rem}.tasks-cards-title h2{font-size:2rem}.tasks-cards-date{width:90%;margin-left:1rem}.tasks-cards-date p{font-size:1.5rem}.tasks-cards-date h2{font-size:2rem}}html{font-size:62.5%;font-family:'Ruluko', sans-serif}h1{color:var(-color3)}body{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--color1);margin:0;padding:0}.date-switch{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 1rem}.date-now{margin:1rem}.date-now h1{color:var(--color3)}.button-svg{margin:0 1rem;background-color:var(--color3);border-radius:50%;padding:.4rem}.form{position:absolute;z-index:5000;display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;opacity:1 !important;background-color:#01091d;border-radius:1.5rem;position:fixed;-webkit-box-shadow:0px 20px 205px -46px rgba(0,0,0,0.85);box-shadow:0px 20px 205px -46px rgba(0,0,0,0.85);height:30rem;width:20rem;padding:2rem;-webkit-animation:flipInX .5s;animation:flipInX .5s}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.custom-select>select{width:95%;outline:none;padding-left:rem;margin:3rem auto;background-color:transparent;font-size:2rem;border:none;color:var(--color3);justify-self:flex-start;border-bottom:2px solid var(--color1);padding-bottom:0.5rem}.custom-select>select option{background-color:cadetblue}.custom-select>select:focus{border-bottom:2px solid var(--color3)}.custom-select>select:hover{cursor:pointer}.custom-select-h3{color:#ffffff;font-size:1;margin-bottom:-2rem;margin-left:0.5rem}.custom-select-title{color:#ffffff;font-size:1;margin-bottom:-.3rem;margin-left:4rem;-ms-flex-item-align:start;align-self:flex-start}.form-input{width:65%;background-color:transparent;outline:none;margin:1rem;border-top:none;border-right:none;border-left:none;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;color:var(--color3);border-bottom:2px solid var(--color1);font-size:2rem;padding-left:1rem;padding-bottom:0.5rem}.form-input:focus{border-bottom:3px solid var(--color3)}::-webkit-input-placeholder{color:var(--color3)}.button{padding:.5rem 1.5rem;border-radius:1.5rem;outline:none;border:none;font-size:1.5rem;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.button:hover{-webkit-transform:scale(1.1);transform:scale(1.1);cursor:pointer}.button-cancel{background-color:transparent;color:#e29090}.button-save{background-color:var(--color3)}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}30%{-webkit-transform:scale3d(1.25, 0.75, 1);transform:scale3d(1.25, 0.75, 1)}40%{-webkit-transform:scale3d(0.75, 1.25, 1);transform:scale3d(0.75, 1.25, 1)}50%{-webkit-transform:scale3d(1.15, 0.85, 1);transform:scale3d(1.15, 0.85, 1)}65%{-webkit-transform:scale3d(0.95, 1.05, 1);transform:scale3d(0.95, 1.05, 1)}75%{-webkit-transform:scale3d(1.05, 0.95, 1);transform:scale3d(1.05, 0.95, 1)}100%{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}@keyframes rubberBand{0%{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}30%{-webkit-transform:scale3d(1.25, 0.75, 1);transform:scale3d(1.25, 0.75, 1)}40%{-webkit-transform:scale3d(0.75, 1.25, 1);transform:scale3d(0.75, 1.25, 1)}50%{-webkit-transform:scale3d(1.15, 0.85, 1);transform:scale3d(1.15, 0.85, 1)}65%{-webkit-transform:scale3d(0.95, 1.05, 1);transform:scale3d(0.95, 1.05, 1)}75%{-webkit-transform:scale3d(1.05, 0.95, 1);transform:scale3d(1.05, 0.95, 1)}100%{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}}@keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);transform:perspective(400px) rotate3d(1, 0, 0, 90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg);transform:perspective(400px) rotate3d(1, 0, 0, -20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 10deg);transform:perspective(400px) rotate3d(1, 0, 0, 10deg)}80%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -5deg);transform:perspective(400px) rotate3d(1, 0, 0, -5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px);opacity:1}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);transform:perspective(400px) rotate3d(1, 0, 0, 90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg);transform:perspective(400px) rotate3d(1, 0, 0, -20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 10deg);transform:perspective(400px) rotate3d(1, 0, 0, 10deg)}80%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -5deg);transform:perspective(400px) rotate3d(1, 0, 0, -5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px);opacity:1}}.bounceIn{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;-webkit-animation-name:bounceIn;animation-name:bounceIn;-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,100%{-webkit-transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;-webkit-transform:scale3d(0.3, 0.3, 0.3);transform:scale3d(0.3, 0.3, 0.3)}20%{-webkit-transform:scale3d(1.1, 1.1, 1.1);transform:scale3d(1.1, 1.1, 1.1)}40%{-webkit-transform:scale3d(0.9, 0.9, 0.9);transform:scale3d(0.9, 0.9, 0.9)}60%{opacity:1;-webkit-transform:scale3d(1.03, 1.03, 1.03);transform:scale3d(1.03, 1.03, 1.03)}80%{-webkit-transform:scale3d(0.97, 0.97, 0.97);transform:scale3d(0.97, 0.97, 0.97)}100%{opacity:1;-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,100%{-webkit-transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;-webkit-transform:scale3d(0.3, 0.3, 0.3);transform:scale3d(0.3, 0.3, 0.3)}20%{-webkit-transform:scale3d(1.1, 1.1, 1.1);transform:scale3d(1.1, 1.1, 1.1)}40%{-webkit-transform:scale3d(0.9, 0.9, 0.9);transform:scale3d(0.9, 0.9, 0.9)}60%{opacity:1;-webkit-transform:scale3d(1.03, 1.03, 1.03);transform:scale3d(1.03, 1.03, 1.03)}80%{-webkit-transform:scale3d(0.97, 0.97, 0.97);transform:scale3d(0.97, 0.97, 0.97)}100%{opacity:1;-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--color3);-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:26px;width:26px;left:5px;bottom:4px;background-color:white;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}input:checked+.slider{background-color:var(--color2)}input:focus+.slider{-webkit-box-shadow:0 0 1px #2196F3;box-shadow:0 0 1px #2196F3}input:checked+.slider:before{-webkit-transform:translateX(25px);transform:translateX(25px)}.lightmode{background-color:var(--lightmodeBG)}.lightmode-cards{background-color:var(--lightmodeCards)}.lightmode-cards h2{color:var(--lightColor1)}.lightmode-cards p{color:var(--lightColor1)}.lightmode-colors{color:var(--lightmodeCards)}.lightmode h1{color:var(--lightColor1)}.lightmode i{color:var(--lightColor1)}