body {
  width:100%;
  margin:0;
  font-size:16px;
}
img {
  vertical-align:middle;
}
ul {
  LIST-STYLE: NONE; 
  padding-left:10px;
}
.date {
  font-size:10px;
  line-height:10px;
  float:right;
  vertical-align:middle;
}
#about img {
  vertical-align:top;
}
#aboutbox {
  margin:5px;
  border: 1px solid;
  border-radius: 4px;
  padding:10px;
}
.col {
  display:inline-block;
  vertical-align:top;
}
.box {
  width:240px;
  border: 1px solid ;
  border-radius: 4px;
  padding:10px;
  margin:5px;
  margin-bottom:10px;
}
.indent {
  padding-left:10px;
}
.center-block {
  margin-left:auto;
  margin-right:auto;
}

/* light mode */
body {
  background-color: #F7F7F9;
  color: #000000
}
.box, #aboutbox {
  background-color: #FFFFFF;
  border-color: #E1E1E8;
  box-shadow:2px 2px 5px rgba(20%,20%,40%,0.5);
}
.date {
  color:#888;
}

/* dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #000000;
    color: #A0A0A0
  }
  .box, #aboutbox {
    background-color: #101010;
    border-color: #333333;
    box-shadow:0px 0px 8px rgba(120, 120, 134, 0.432);
  }
  .date {
    color:#888;
  }
}