*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{width:100%;height:100%;display:grid;background:#202023;color:white;font-family:'Archivo', sans-serif}#videocontainer{position:fixed;top:0;width:100%;height:100%;z-index:1;overflow:hidden;text-align:center;display:flex;align-items:center;justify-content:center}#videocontainer video{object-fit:cover;position:absolute;top:0;left:0;height:100%;width:100%;transform:scale(1.1)}#backgroundOverlayer{position:fixed;top:0;width:100%;height:100%;z-index:2;opacity:0.5;background-image:linear-gradient(45deg, #012760, #075AC6 30%, #012760)}.content{position:fixed;z-index:3;width:100%;height:100%;padding:0 20px}.content .datatable{display:grid;grid-template-columns:70px 1fr 1fr 1fr;grid-template-rows:40px 1fr 1fr;grid-template-areas:"space dayAvgTitle sumTitle costsTitle" "weekTitle dayAvgWeek sumWeek costsWeek" "monthTitle dayAvgMonth sumMonth costsMonth";gap:0 10px;width:100%;height:150px;justify-content:center;padding:5px 10px 10px;box-shadow:rgba(50,50,93,0.25) 0px 2px 5px -1px,rgba(0,0,0,0.3) 0px 1px 3px -1px;background:#99999925;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-radius:10px}.content .datatable .background{width:100%;height:100%;background:rgba(0,0,0,0.2);border-radius:10px}.content .datatable div{display:flex;justify-content:center;align-items:center;min-width:100%;font-size:20px}.content .datatable .titleFont{font-weight:500;font-size:18px;opacity:0.7}.content .datatable #weekTitle{grid-area:weekTitle}.content .datatable #monthTitle{grid-area:monthTitle}.content .datatable #dayAvgTitle{grid-area:dayAvgTitle}.content .datatable #dayAvgBackground{grid-column-start:dayAvgWeek;grid-column-end:dayAvgWeek;grid-row-start:dayAvgWeek;grid-row-end:dayAvgMonth}.content .datatable #dayAvgWeek{grid-area:dayAvgWeek}.content .datatable #dayAvgMonth{grid-area:dayAvgMonth}.content .datatable #sumTitle{grid-area:sumTitle}.content .datatable #sumBackground{grid-column-start:sumWeek;grid-column-end:sumWeek;grid-row-start:sumWeek;grid-row-end:sumMonth}.content .datatable #sumWeek{grid-area:sumWeek}.content .datatable #sumMonth{grid-area:sumMonth}.content .datatable #costsTitle{grid-area:costsTitle}.content .datatable #costsBackground{grid-column-start:costsWeek;grid-column-end:costsWeek;grid-row-start:costsWeek;grid-row-end:costsMonth}.content .datatable #costsWeek{grid-area:costsWeek}.content .datatable #costsMonth{grid-area:costsMonth}.content #weekChart{display:flex;justify-content:space-between;width:100%;height:190px;margin-top:25px;padding:15px;box-shadow:rgba(50,50,93,0.25) 0px 2px 5px -1px,rgba(0,0,0,0.3) 0px 1px 3px -1px;background:#99999925;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-radius:10px;box-sizing:border-box}.content #weekChart .day{display:flex;flex-direction:column;justify-content:flex-end;height:100%;width:9%;padding:2px}.content #weekChart .day .bar{content:'';width:100%;height:1%;background-image:linear-gradient(130deg, #7654db, #7494ff);border-radius:7px;transition:1s height}.content #weekChart .day .text{padding:4px 0 0;text-align:center}#top{width:100%}#top #title{display:flex;justify-content:space-between;align-items:center;padding:15px 0}#top #title h1{margin:0;font-size:30px}#top #title #setting{padding:0;border:0;background:rgba(0,0,0,0);outline:none}#counter{display:flex;flex-direction:column;align-items:center;padding:50px 0 40px 0}#counter #counter-today{font-size:90px}#counter .subtitle{font-size:20px;opacity:0.7}#controler{position:fixed;bottom:40px;left:50%;display:flex;justify-content:center;align-items:center;transform:translate(-50%);width:90%;height:70px;box-shadow:rgba(50,50,93,0.25) 0px 2px 5px -1px,rgba(0,0,0,0.3) 0px 1px 3px -1px;background:#99999925;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-radius:10px;border-radius:45px;background:#cccccc1e;color:#ffffffbb;font-size:22px;border:solid 1px rgba(255,255,255,0.2)}#controler #swipeButton{position:absolute;left:0;width:70px;height:70px;display:flex;justify-content:center;align-items:center;border-radius:50%;background-image:linear-gradient(45deg, #3F5798, #866BD7);box-shadow:rgba(50,50,93,0.25) 0px 6px 12px -2px,rgba(0,0,0,0.3) 0px 3px 7px -3px;transition:0.1s}