@keyframes spin {
  from {
      transform: rotate(0deg); /* Start at 0 degrees */
  }
  to {
      transform: rotate(360deg); /* Rotate to 360 degrees */
  }
}

@keyframes spin2 {
  from {
      transform: rotate(360deg); /* Start at 360 degrees */
  }
  to {
      transform: rotate(0deg); /* Rotate to 0 degrees */
  }
}

@font-face {
  font-family: Draconis;
  src: url(Draconis.otf);
}

@font-face {
  font-family: Blockstepped;
  src: url(Blockstepped.ttf);
}

* {
  padding: 0;
  margin: 0;
}

html {
  background-color: black;
}

body {
  font-size: 62.5%;
}

header {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

footer {
  width: 100%;
  text-align: right;
}

#page {
  position: absolute;
  top: 0px;
  padding: 15px;
  width: 90%;
  color: greenyellow;
  justify-self: center;
  font-size: 2vw;
}

#banner {
  width: 74%;
  flex: 1 0 400px;
}

#logo {
  width: 25%;
}

.canvas {
  position: relative;
  width: 100vw;
  min-height: 150vh;
  background-color: black;
}

.rot-c {
    animation: spin 10s linear infinite;
    /* Applies the 'spin' animation */
}

.rot-cc {
  animation: spin2 10s linear infinite;
  /* Applies the 'spin' animation */
}

.item {
  /* border: 1px solid red; */
  text-align: center;
  position: relative;
}

.item img {
    width: 100%;
}

.inner {
    position: fixed;
    width: 100%;
}

.inner img {
    width: 20%;
}

.posts {
  width: 70vw;
  margin: 5%;
  justify-self: center;
}

.post {
  max-width: 100%;
  border: 5px solid rgb(255, 255, 255);
  border-radius: 15px;
  background-color: rgb(3, 3, 3,0.5);
  color: rgb(119, 112, 251);
  margin: 20px;
  padding: 5px;
}

.post-author, .post-date {
  color: aliceblue;
}

.post-title {
  text-decoration-line: underline;
}