body {
  background-color:#222266;
  color: #f8f8f8;
  font-family: sans;
  padding: 0%;
  margin: 0%;
  display: flex;
  justify-content: center;
}

main {
  text-align:center;
  margin-left: 10px;
  margin-right:10px;
  width: 1500px;
}

.blog {
  background-color: #f8f8f8;
  color: #222222;
  border-radius: 4px;
  margin-top: 50px;
  margin-bottom: 50px;
  font-family: serif;
  padding: 20px;
  line-height:1.5;
  text-align: left;
  max-width: 1000px;
}

blockquote {
  font-style:italic;
}

a, a:link, a:visited, a:active {
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
}

.blog a, .blog a:link, .blog a:visited, .blog a:active {
  color: #222222;
  font-weight: normal;
  text-decoration: underline;
}

.instancecol {
  column-count: 3;
}

.instancecol ul {
  margin: 0px;
}

.blog h2 {
  border-bottom: 2px solid #222222;
}

.privacy {
  position:absolute;
  top:10px;
  right:10px;
  display:block;
  font-size: 12px;
}

#tiles {
  position:fixed;
  height: 48px;
  bottom: 16px;
  image-rendering: pixelated;
  z-index: 1;
}
#bottom_bar {
  position: fixed;
  width: 100%;
  bottom:0px;
  height: 16px;
  background-color:#420333;
}

.fox {
  position:fixed;
  bottom:48px;
  image-rendering: pixelated;
  z-index:0;
}

.fox.left {
  transform: scaleX(-1);
}

.contacts {
  display: flex;
  justify-content:center;
  flex-wrap:wrap;
  gap: 10px;
}

.contacts a {
  width:250px;
  display:block;
  border: 3px solid #f8f8f8;
  border-left: 35px solid #f8f8f8;
  padding:5px;
  border-radius: 3px;
  font-weight:normal;
  position:relative;
}

.contacts a::after {
  content:"";
  position:absolute;
  display:block;
  width:32px;
  height:32px;
  top:0px;
  left:-32px;
  image-rendering:pixelated;
}

.contacts .email::after {
  background-image:url("/icons/email.png");
}

.contacts .mastodon::after {
  background-image:url("/icons/mastodon.png");
}

.contacts .bsky::after {
  background-image:url("/icons/bsky.png");
}