body {
  margin: 0px;
  padding: 0px;

  display: flex;
  flex-direction: column;

  background-color: #0a080a;
  background-image: url("/static/pattern.png");

  color: #ffffff;

  font-family: monospace;
  font-size: 1.5em;

  animation: background_image_scroll 4s linear 0s infinite;
}

@keyframes background_image_scroll {
  from {background-position: 0px 0px;}
  to {background-position: 128px 128px;}
}

#header {
  display: flex;
  flex-direction: column;
}

#header img {
  width: 512px;
  height: 256px;
  
  align-self: center;

  animation: header_title_img 8s ease 0s infinite;

  pointer-events: none;
}

@keyframes header_title_img {
  0% { rotate: 10deg; }
  50% { rotate: -10deg; }
  100% { rotate: 10deg; }
}

#header ul {
  padding: 0px;
  margin: 0px;

  display: flex;
  flex-direction: row;
  gap: 1em;

  list-style-type: none;
  
  align-self: center;
}

#header #item #link {
  padding: 0.5em 2em;

  background: linear-gradient(#ffffff, #cbdbfc);
  color: #000000;

  border-radius: 1em;

  text-decoration: none;

  transition: 0.25s;
}

#header #item #link:hover {
  padding: 0.75em 3em;

  background: linear-gradient(#cbdbfc, #ffffff);

  border-radius: 1.5em;
}

#note, #notes {
  margin-top: 4em;
  padding: 2em;

  background: linear-gradient(#120f12, #090809);

  border-radius: 1em;

  width: 32em;
  
  align-self: center;
}

h1 {
  margin: 0px;
  padding: 0px;
}

footer {
  position: fixed;
  bottom: 0%;
  
  margin-top: 2em;
  padding: 2em;

  text-align: center;

  background: linear-gradient(#ffffff, #cbdbfc);
  color: #000000;

  /* border-radius: 1em; */

  width: 100%;
  
  align-self: center;

  text-transform: lowercase;
}