.sidebar {
  height: 100%;
  width: 200px;
  position: fixed;
  /* stops it moving */
  top: 0;
  /* same position */
  left: 0;
  background: rgba(15, 15, 31, 0.71);
  overflow-x: hidden;
}

.sidebar a {
  /* side nav links */
  display: block;
  color: #CA75FF;
  border-bottom: 1px dashed;
  padding: 0px 10px;
  margin: 3px;
  font-size: 18px;
  text-align: right;
  text-decoration: none;
  transition: 1s ease 0s;
  /* transition animation*/
}

.sidebar a:hover {
  letter-spacing: 2px;
  /* text spaces out*/
  padding-right: 30px;
  /* moves to the left*/
  font-size: 18px;
}

.sidebar a:active {
  text-align: left;
}

.sidebar a>span:first-child:before {
  content: "✦ ";
  /* symbols before link */
}

.sidebar a>span:first-child:after {
  content: " ✦";
  /* symbols after link */
}


.textbox {
	overflow-y: scroll;
	height: 150px;
	width: 80%;
}
.date {
	color: #CA75FF;
	font-weight: bold;
	font-family: Oceanside Typewriter;
}
/* css for other site buttons + anim */
.sitelinks {
  text-align: center;
  padding: 5px;
}

.sitelinks img:hover { /* hover for animation of buttons/images in this div */
  filter: saturate(300%);
  transition: 1s ease 0s;
  animation: myAnim 2s ease 0s 1 normal forwards;
}

@keyframes myAnim { /* animation code for above div */

  0%,
  100% {
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }

  10% {
    transform: rotate(8deg);
  }

  20%,
  40%,
  60% {
    transform: rotate(-10deg);
  }

  30%,
  50%,
  70% {
    transform: rotate(10deg);
  }

  80% {
    transform: rotate(-8deg);
  }

  90% {
    transform: rotate(8deg);
  }
}


main {
  margin-left: 192px;  /* sits to the right of the sidebar */
  margin-top: -10px;  /* pushes main body to top of screen? */
  padding: 10px;
  width: 600px;  /
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* From https://css.glass */
  backdrop-filter: blur(6.8px);
  -webkit-backdrop-filter: blur(6.8px);
}