:root {
  --theme_change_time: 500ms;
  --shadow: rgba(0, 0, 0, 0.1);
}

.light {
  --bg: #fcfcfc;
  --text: #000000;
  --surface: #ffffff;
  --accent: #303030;
}

.dark {
  --bg: #0e0e0e;
  --text: #ffffff;
  --surface: #202020;
  --accent: #f1f1f1;
}

html {
  height: 100%;
}

body {
  background-color: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-size: 16px;
  margin: 0;
  padding: 0;
  color: var(--text);
  text-align: center;
}

body.transition {
  transition: background var(--theme_change_time) ease-in-out,
    color var(--theme_change_time) ease-in-out;
}

body.transition > #logo > svg,
body.transition .link svg {
  transition: fill var(--theme_change_time) ease-in-out;
}

#main-area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#logo {
  float: left;
  /* image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges; */
}

#logo > svg {
  width: 5vh;
  max-width: 42px;
  margin: 1em;

  overflow: visible;
  fill: var(--text);

  box-shadow: none;
  transition: box-shadow var(--theme_change_time) ease-in-out;
}

#logo > svg:hover {
  box-shadow: 0 2px 12px 0 var(--shadow);
  transition: box-shadow var(--theme_change_time) ease-in-out;
}

#selfie {
  width: 50vw;
  max-width: 200px;
  margin-bottom: 2em;
  border-radius: 50%;
  border: solid 6px var(--surface);
  box-shadow: 0 2px 12px 0 var(--shadow);
  transition: box-shadow var(--theme_change_time) ease-in-out;
}

#selfie:hover {
  box-shadow: none;
  transition: box-shadow var(--theme_change_time) ease-in-out;
}

p {
  line-height: 1;
  font-size: 1.2em;
  margin: 0 0.7em;
  font-weight: 600;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
}

a > svg {
  width: 2em;
  height: auto;
  margin: 2em, 20em;

  overflow: visible;
  fill: var(--text);
}

a > svg:hover {
  fill: var(--accent);
}

@media only screen and (max-width: 479px) {
  body {
    font-size: 14px;
  }
}