#container {
	width: 700px;
	margin: 0 auto;
  margin-bottom: 5px;
}
/*left sidebar styling*/
#sidebar {
	width: 25%;
	/* From https://css.glass */
	background: var(--background);
	border-radius: 5px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border: 1px solid var(--border);
	float: left;
	margin-bottom: 5px;
}
/*id for pollcodes styling*/
#pollcode {
  background-color: transparent;
  padding: 2px;
  width: 93%;
  float: right;
  margin: 5px;
  border-radius: 5px;
  font-family: "simsun";
  font-size: small;
  color: var(--bodytext);
  box-shadow: 0px 0px 5px #888;
}

/*top horizontal navi bar styling*/
.nav {

	margin: 0 auto;
	padding: 5px 10px;
	width: 680px;
	/* From https://css.glass */
	background: var(--background);
	background: linear-gradient(90deg, var(--background) 0%, var(--transpgradient) 100%);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
/*navbar list styling to be horizontal*/
.nav li {
	display: inline;
	position: sticky;
	padding: 5px;
}

.nav li a {
	color: var(--accent1);
	text-decoration: none;
	font-weight: bold;
}

/*side bar list styling*/
.sidenav {
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}
/*sidebar list gradient bgs*/
.sidenav li {
	background: var(--accent2);
	background: linear-gradient(90deg, var(--gradient0) 0%, var(--gradient30) 30%, var(--gradient70) 70%, var(--gradient100) 100%);
	margin-top: 3px;
	transition: 1s ease 0s;
}

.sidenav li:hover {
	padding-left: 20px;
}
/*active means when BEING CLICKED*/
.sidenav li:active {
	background: #9BF54C;
	background: linear-gradient(90deg, rgba(155, 245, 76, 1) 0%, rgba(155, 229, 89, 1) 30%, rgba(210, 249, 176, 0.75) 70%, rgba(210, 249, 176, 0) 100%);
}
/*sidebar links*/
.sidebar {
	color: var(--bodytext);
	text-shadow: none;
}
/*decor for iframe links + hover anim*/
.linkpointer li {
  list-style-type:none;
  }
.linkpointer li:hover {
  list-style: inside url('https://faescape.neocities.org/assets/favicons/arrow-left.jpg');
  }
div.scroll-container {
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
  scrollbar-color: var(--green) var(--lime);
  scrollbar-width: thin;
}

div.scroll-container img {
  margin: 10px;
  border-radius: 5px;
  border: 5px solid white;
}
div.scroll-container img:hover {
  animation: myAnim 2s ease 0s 1 normal forwards;
  }
@keyframes myAnim {
	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);
	}
}
.scrollgallery {
  width: 150px;
  height: auto;
  border-radius: 5px;
  }
/*main section styling*/
main {
	width: 698px;
	/* From https://css.glass for glassmorphic vista style*/
	background: var(--background);
	border-radius: 5px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border: 1px solid var(--border);
	float: right;
	margin-bottom: 5px;
	margin-top: 5px;
}