@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap');

body {
  display: grid;
  grid-template-rows:  1fr auto;
  font-family: 'Noto Serif', serif;
  min-height: calc(100dvh - 80px);
  max-width: 650px;
  margin: 40px auto 0;
  padding: 0 20px;
  color: #444;
  background: #f2f2f2;
  line-height: 1.8;
}

a, a:hover, a:visited, a:active {
  color: #1320d2;
  font-size: 16px;
}

p {
  font-size: 16px;
}

h2 {
  font-size: 22px;
  margin-top: 20px;
}

li {
  display: list-item;
  text-align: -webkit-match-parent;
}

footer {
  font-size: 12px;
  height: 20px;
  display: flex;
  justify-content: center;
  margin-top: 40px;
  padding-bottom: 1rem;
}

.footer, .footer:hover, .footer:visited, .footer:active {
  font-size: 12px;
}

.project {
  display: flex;
  justify-content: space-between;
}

.titlenolink {
  font-size: 18px;
  margin: auto 0;
  text-decoration: underline;
}

.titlelink, .titlelink:hover, .titlelink:visited, .titlelink:active {
  font-size: 18px;
  margin: auto 0;
}

.sublink, .sublink:hover, .sublink:visited, .sublink:active {
  font-size: 14px;
  margin: auto 0;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #c9d1d9;
    background:#0d1117
  }
  
  a, a:hover, a:visited, a:active {
    color: #58a6ff;
  }
}