@font-face{font-family:'alarmClock';src:url(../font/Alarm\ Clock/alarm\ clock.ttf)}body{background-color:hsla(0,1%,1%,1.0);margin:0}#buttonDisplayPlaceholder{align-items:center;background:#bbb;border-radius:15px;cursor:pointer;display:flex;height:80%;justify-content:center;width:80%}#buttonDisplayPlaceholder[data="0"]{border:2px solid red;color:red}#buttonDisplayPlaceholder[data="1"]{border:2px solid #0f0;color:#0f0}#buttonDisplaySeconds{align-items:center;background:#bbb;border-radius:15px;cursor:pointer;display:flex;height:80%;justify-content:center;width:80%}#buttonDisplaySeconds[data="0"]{border:2px solid red;color:red}#buttonDisplaySeconds[data="1"]{border:2px solid #0f0;color:#0f0}#buttonHour12,#buttonHour24{align-items:center;background:#bbb;border-radius:15px;cursor:pointer;display:flex;height:80%;justify-content:center;width:45%}#buttonHour12[data="0"],#buttonHour24[data="0"]{border:2px solid red;color:red}#buttonHour12[data="1"],#buttonHour24[data="1"]{border:2px solid #0f0;color:#0f0}#buttonSolarTime{align-items:center;background:#bbb;border-radius:15px;cursor:pointer;display:flex;height:80%;justify-content:center;width:80%}#buttonSolarTime[data="0"]{border:2px solid red;color:red}#buttonSolarTime[data="1"]{border:2px solid #0f0;color:#0f0}#clock{color:hsla(120,100%,50%,1.0)}.clockFace{align-content:center;display:grid;font-family:alarmClock;font-size:23.9vw;grid-gap:0;height:100vh;position:absolute;text-align:right;width:100vw}.clockFace#clock{grid-template-areas:"c_hour10s	c_hour10s	c_hour10s	c_hour10s	c_hour1s	c_hour1s	c_hour1s	c_hour1s	c_hourMinute	c_minute10s	c_minute10s	c_minute10s	c_minute10s	c_minute1s	c_minute1s	c_minute1s	c_minute1s	c_minuteSecond	c_second10s	c_second10s	c_second10s	c_second10s	c_second1s	c_second1s	c_second1s	c_second1s	c_period";visibility:visible}.clockFace#clock .hour1s{grid-area:c_hour1s}.clockFace#clock .hour10s{grid-area:c_hour10s}.clockFace#clock .hourMinute{grid-area:c_hourMinute}.clockFace#clock .minute1s{grid-area:c_minute1s}.clockFace#clock .minute10s{grid-area:c_minute10s}.clockFace#clock .minuteSecond{grid-area:c_minuteSecond}.clockFace#clock .second1s{grid-area:c_second1s}.clockFace#clock .second10s{grid-area:c_second10s}.clockFace#clock .period{grid-area:c_period}.clockFace#placeholder{grid-template-areas:"p_hour10s	p_hour10s	p_hour10s	p_hour10s	p_hour1s	p_hour1s	p_hour1s	p_hour1s	p_hourMinute	p_minute10s	p_minute10s	p_minute10s	p_minute10s	p_minute1s	p_minute1s	p_minute1s	p_minute1s	p_minuteSecond	p_second10s	p_second10s	p_second10s	p_second10s	p_second1s	p_second1s	p_second1s	p_second1s	p_period";visibility:visible}.clockFace#placeholder .hour1s{grid-area:p_hour1s}.clockFace#placeholder .hour10s{grid-area:p_hour10s}.clockFace#placeholder .hourMinute{grid-area:p_hourMinute}.clockFace#placeholder .minute1s{grid-area:p_minute1s}.clockFace#placeholder .minute10s{grid-area:p_minute10s}.clockFace#placeholder .minuteSecond{grid-area:p_minuteSecond}.clockFace#placeholder .second1s{grid-area:p_second1s}.clockFace#placeholder .second10s{grid-area:p_second10s}.clockFace#placeholder .period{grid-area:p_period}.colon{font-size:.85em}#confirmSettings{align-items:center;bottom:5%;display:flex;height:12%;justify-content:space-around;position:absolute;width:100%}.digit{}.hour{}.hour1s{}.hour10s{}.hourMinute{}.minute{}.minute1s{}.minute10s{}.minuteSecond{}.period{font-size:.15em}#placeholder{color:hsla(120,100%,8%,1.0)}#placeholderDisplay{align-items:center;display:flex;height:12%;justify-content:space-around;width:100%}#saveSettings{align-items:center;background:#bbb;border-radius:15px;cursor:pointer;display:flex;height:80%;justify-content:center;width:80%}.second{}.second1s{}.second10s{}#secondsDisplay{align-items:center;display:flex;height:12%;justify-content:space-around;width:100%}.settings{background:#111;display:none;font-family:Arial;font-size:1.5em;font-weight:bold;height:100%;opacity:1.0;position:absolute;right:0%;top:0;width:0%;z-index:999}.settings>div{border:1px solid #222}#settingsIcon{height:3.1em;margin:.75em;overflow:hidden;position:absolute;right:0;top:0;width:3.1em;z-index:1}#settingsIcon .cog{background-color:hsla(0,1%,20%,1.0);height:100%;left:2.1em;position:relative;top:0;transform:rotate(45deg);width:100%}.settingsOption{display:none;opacity:0}#solarTime{align-items:center;display:flex;height:12%;justify-content:space-around;width:100%}#timeColor{align-items:center;display:flex;height:18%;justify-content:space-around;width:100%}#timeColorHex{background:#ccc;color:#0f0;font-size:1em;font-weight:bold;text-align:center;width:80%}#timeColorPicker{align-items:center;background:#bbb;border-radius:15px;display:flex;flex-direction:column;height:80%;justify-content:center;width:80%}#timeFormat{align-items:center;display:flex;height:12%;justify-content:space-around;width:100%}