index.css

@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow');

.button {
    color: grey;
    width:80%;
    max-width:450px;
    min-height:20vh;
    min-width: 130px;
    margin-bottom: 5vh;
    font-size: 36px;
    font-family:serif;
    text-align:center;
    border-radius: 50px;
    border: 10px outset black;
    cursor: pointer;
}
.button:hover {color: yellow;}
.button:active {
    border-style: inset;
}
body {
    background: black;
    color: grey;
    text-align: center;
}
#calendar {
    display: flex;
    justify-content: center;
    margin:auto;
    font-family: 'PT Sans Narrow',sans-serif;
    width: 100%;
    overflow: scroll-y;
}
#calendar>span {border: 1px solid; min-width:60px;}
#calendar .diff {font-size: 200%;}
.good {background-color: green;color:black;}
.ok {background-color: goldenrod;color:black;}
.bad {background-color: red;color:black}
#buttons:empty::before {content: "Requires javascript";}
.buttonframe#sleep>.button {background: #004; font-weight: bold;}
.buttonframe#wake>.button {background: #400; font-weight: bold;}
.time {font-weight: normal;}
.time.yesterday:not(:empty)::before {
    content: "↜";
}
.buttonframe{
    display: flex;
    align-content: center;
    justify-content: center;
    
}
.side {
    display:flex;
    flex-direction:row;
    padding-top:20px;
    position:relative;
}
.side input {
    position:absolute;
    bottom:0px;
    }
.sidebtn {
    width:60px;
    height: 60px;
    border: 5px black solid;
}
.sidebtn:hover {border-style:outset;border-color:grey;}
.sidebtn:active {border-style:inset;border-color:grey;}
		
#calendar .sleep, #calendar .wake {
    height: 21px;
    cursor: pointer;
}
#calendar .sleep:empty::before,
#calendar .wake:empty::before {content:"--:--";}
#refresh {background-color: black;
          color: grey;
          font-size:80%;
          border: 3px grey outset;
          padding: 0px 15px;
          margin: 5px 10px;
          cursor: pointer;
          border-radius: 10px;
         }
#refresh:hover {
    border: #ddd;
}
#refresh:active {
    color: black;
    background-color: grey;
}
h1 {color: black;
    background: linear-gradient(to right,black,#888,black);}