#dateAndTimeSelector{left:0;position:absolute;top:70px}@media only screen and (max-width:450px){#dateAndTimeSelector{top:50px}}.controlsWrapper{display:grid;font-size:20px;grid-template-areas:"date time" "controls controls";padding:15px;width:13%}.dateSelector{grid-area:date;grid-template-columns:repeat(3,auto)}.dateSelector,.timeSelector{color:#fff;display:grid;text-align:center}.timeSelector{grid-area:time;grid-template-columns:repeat(3,auto)}.controls{display:grid;grid-area:controls;grid-template-columns:repeat(5,auto)}.down,.up{cursor:pointer;user-select:none}.down img,.up img{height:25px;width:25px}span.down,span.up{display:inline-block}.controls button{background-color:transparent;border:none;color:#fff;cursor:pointer;font-size:12.5px;padding:10px;text-transform:uppercase}.controls button:hover{background-color:#fff;color:#000}.buttonNormal,.buttonPressed{background-color:var(--color4);border:none;color:#fff;cursor:pointer;font-size:12.5px;padding:10px;text-transform:uppercase}.buttonPressed{background-color:#fff;color:#000}button.aboutBoxBtn{background-color:transparent;border:none;color:#fff;cursor:pointer;font-size:30px;padding:10px;text-transform:uppercase}@media only screen and (max-width:450px){button.aboutBoxBtn{font-size:20px;padding:5px}}div.aboutBox{border:1px solid #fff;display:none;font-family:RobotoRegular;left:50%;padding:30px 50px;position:absolute;top:50%;transform:translate(-50%,-50%);width:25%}button.aboutBoxBtn:hover,div.aboutBox{background-color:#fff;color:#000}button.aboutBoxCloseButton{background-color:#000;border:none;cursor:pointer;padding:5px;position:absolute;right:10px;top:10px}h3.aboutBoxHeading{margin:0;padding:0}p.aboutBoxContent{font-size:15px}@media only screen and (max-width:450px){div.aboutBox{padding:30px;width:70%}h3.aboutBoxHeading{font-size:25px}}:root{--left-margin:15px;--border-width:7px;--app-left-margin:calc(var(--left-margin) + var(--border-width)*2);--bg-color:#fff;--footer-height:50px;--color1:#393835;--color12:#191815;--color2:#514f4b;--color3:#6b6a66;--color4:#4b4d4a}@font-face{font-family:RobotoRegular;src:url(res/a8d6ac03c7b96b7acb62.ttf)}@font-face{font-family:RobotoBlackItalic;src:url(res/77e50ab1eee2eea0a442.ttf)}body{color:#000;font-size:30px;margin:0;overflow:hidden;padding:0}body,button{font-family:RobotoRegular}div.wrapper{background-color:var(--bg-color);color:#fff;min-height:100vh;position:relative}@media only screen and (max-width:450px){div.wrapper{margin:0 auto}h1.header{font-size:35px}}div.header{left:0;position:absolute;top:0}h1.header{color:#fffff9;margin:0;padding:calc(var(--left-margin)/2) var(--left-margin)}a.header{color:#000;text-decoration:none}canvas{display:block}div.moonPhase{align-items:center;bottom:0;color:#fff;display:flex;left:0;position:absolute;width:100%}@media only screen and (max-width:450px){div.moonPhase{font-size:65%}}#moonPhaseName,span.moonPhase{margin-left:var(--left-margin)}#aboutBoxButton,#moonPhaseName,span.moonPhase{margin-right:var(--left-margin)}