@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/Lato/Latin/300.woff2') format('woff2');
}

* {
  font-weight: normal;
  margin: 0;
  padding: 0;
}

body {
  background: #fff url('crow.png') no-repeat fixed center center;
  color: #333;
  font: 3rem Lato, sans-serif;
  line-height: 133%;
}

body.paused,
h1 a:hover {
  color: #999 !important;
}

body.paused h1 {
  color: #333 !important;
}

h1 {
  font-size: 4em;
  line-height: 100%;
}

h2 {
  color: #ccc;
  font-size: 0.666em;
}

h2::before {
  content: '/* ';
}

h2::after {
  content: ' */';
}

a,
var {
  cursor: pointer;
  font-style: normal;
  text-decoration: none;
}

a:hover,
var:hover {
  color: #999;
}

small {
  font-size: 0.9em;
}

#in,
#global,
#local,
#out {
  padding: 0.5rem 1rem;
  position: fixed;
  white-space: nowrap;
}

#in {
  left: 0;
  top: 0;
}

#in #log {
  font-size: 0.666em;
  line-height: 133%;
}

#global {
  right: 0;
  text-align: right;
  top: 0;
}

#local {
  bottom: 0;
  left: 0;
}

#spel-m {
  color: #999;
  font-size: 0.8em;
}

#spel-s {
  color: #bbb;
  font-size: 0.6em;
}

#out {
  bottom: 0;
  right: 0;
  text-align: right;
}

#out a:hover {
  color: #c00;
}

#out a::after {
  content: ' →';
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    background-image: url('worc.png');
    color: #fff;
  }

  a {
    color: #fff;
  }

  h2 {
    color: #666;
  }

  #spel-m {
    color: #aaa;
  }

  #spel-s {
    color: #888;
  }
}