body {
  background-color: var(--uchu-yang);
  color: var(--uchu-yin);
  font-family: system-ui, sans-serif;
  font-size: 17px;
}
/*Padding for all the edges*/
div.content {
  max-width: 700px;
  margin: 1rem auto;
  padding: 2rem;
}

/*Description (highest item on the page)*/
p.description {
  margin: 0px 0px 2px;
  font-size: 15px;
  font-family: "courier new";
  text-align: right;
}

/*The header (logo and title, not description)*/
header {
  display: flex;
  justify-content: space-between;
  font-family: "courier new";
  line-height: 17px;
  gap: 30px;
}

/*Page title*/
h1.title {
  line-height: 30px;
  font-size: 26px;
  margin: 0;
  text-align: right;
  font-family: system-ui, sans-serif;
}

/*Link color and hover colors*/
a {
  display: inline-block;
  text-decoration: none;
  color: var(--uchu-yin);
}
@keyframes hoverTitle {
  12% {
    color: var(--uchu-red);
  }
  25% {
    color: var(--uchu-pink);
  }
  38% {
    color: var(--uchu-purple);
  }
  50% {
    color: var(--uchu-blue);
  }
  62% {
    color: var(--uchu-green);
  }
  75% {
    color: var(--uchu-yellow);
  }
  88% {
    color: var(--uchu-orange);
  }
}
a:hover {
  animation-name: hoverTitle;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-duration: 8s;
}

/*Main section (writing)*/
main {
  margin-top: 4rem;
}
main a {
  text-decoration: underline;
}
img {
  max-width: 100%;
}

/*Normal header*/
h1 {
  font-size: 20px;
}
h1:hover {
  text-decoration: underline;
}

/*Phone accessibility*/
@media (max-width: 420px) {
  div.content {
    padding: 20px
  }
  header {
    flex-wrap: wrap;
    justify-content: center;
  }
  h1.title {
    text-align: center;
    animation-name: hoverTitle;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    animation-duration: 50s;
  }
  p.description {
    text-align: center;
    margin: 0 0 10px 0;
  }
  main {
    padding: 0 10px;
  }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  body {
    background: var(--uchu-yin);
    color: var(--uchu-yang);
  }
  a {
    color: var(--uchu-yang);
  }
}