html,body,div,p,ul,ol,li,table,tr,td,th,input,button,select,textarea,* {
    font-family: "Open Sans", "San Francisco", Helvetica, Arial, sans;
    font-weight: 100;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #111;
    color: #888;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background-color: #eee;
    color: #444;
  }
}

body {
  text-align:center;
  padding:1em;
  line-height:2em;
  font-size:2em;
  background-image:url(./banner.jpg);
  background-position-y: top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

h1 {
  font-size: larger;
  font-weight: normal;
  padding:0;
  margin:0;
  text-shadow: 0px 0px 4px black;
}

h2 {
  font-size: initial;
  font-style: italic;
  font-weight: normal;
  opacity: 0.5;
  padding:0;
  margin:0;
}

ul,ol,li {
  margin:0;
  padding:0;
  list-style-type:none;
}

a:link,a:visited {
  color:#446;
  text-decoration:none;
}

a:active,a:hover {
  color:#c66;
}

#avatar {
  width:6em;
  border-radius:3em;
  box-shadow: 0px 0px 20px black;
}

#links li a {
    display: inline-block;
    padding:0;
    margin-top: 0.25em;
    width:25%;
    min-width:10em;
    border-radius: 0.5em;
    box-shadow: 0px 0px 20px black;
    text-shadow: 0px 0px 4px black;
}

@media (prefers-color-scheme: dark) {
    #links li a {
        background-color: #141414;
    }

    #links li a:active, #links li a:hover {
      background-color:#222;
    }
}

@media (prefers-color-scheme: light) {
    #links li a {
        background-color: #ddd;
    }

    #links li a:active, #links li a:hover {
      background-color:#ccc;
    }
}