body {
  color: white;
  background: black;
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  font-size: 14px;
}

img {
  image-rendering: pixelated;
  transition: ease 0.1s;
}

img:hover {
  transform: scale(1.1);
}

a:link, a:visited {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  color: var(--primary_dark);
	font-style: italic;
	text-decoration: underline wavy;
}

:root {
  --link: rgb(156 194 255);
    
  --primary_dark: rgb(209, 227, 255);
    
  --blue: #3a7be3;

  --green: #78e278;

  --purple: #7a2abb;
}
#container {
  display: flex;
  width: 936px;
  flex-direction: column;
  margin: 180px auto 140px;
  transform: skew(0deg, 10deg);
}

#top {
  text-align: center;
}

#middle {
  display:flex;
}

#left-sidebar {
  background: rgb(122 42 187 / 27%);
  flex: 0 0 160px;
  padding: 10px;
  border-left: 2px solid #2e0c74;
}
        
#content {
  background: rgb(122 42 187 / 27%);
  border: 2px solid #2e0c74;
  flex: 1;
  border-bottom: 0;
  border-top: 0;
}
        
#right-sidebar {
  background: rgb(122 42 187 / 27%);
  flex: 0 0 160px;
  padding: 10px;
  border-right: 2px solid #2e0c74;
}

#footer {
  background: rgb(122 42 187 / 27%);
  padding: 10px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  border: 2px solid #2e0c74;
  height: 40px;
  margin-top: auto;
}

#left-sidebar, #content, #right-sidebar, #footer {
  text-align: center;
}

.intro {
  border-bottom: 2px solid #2e0c74;
  padding: 10px;
  height: 150px;
  overflow: auto;
  text-align: left;
}
        
.vots {
  border-bottom: 2px solid #2e0c74;
  border-right: 2px solid #2e0c74;
  padding: 10px;
}

.gallery {
  padding: 10px;
  border-bottom: 2px solid #2e0c74;
  height: 50%;
  overflow-y: auto;
  overflow-x: hidden;
}

.buttons {
  border-right: 2px solid #2e0c74;
  padding: 10px;
  display: block;
  height: 220px;
  overflow: auto;
}

.misc {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center
}

div.gallery img {
  width: 192px;
  height: auto;
}

h3 {
  background-image: linear-gradient(0deg, #fff0, #4b06d9);
  padding: 4px;
  text-shadow: 1px 1px 5px #3a7be3;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-family: Arial;
  text-align: center;
}

#content h3 {
  margin-top: 0;
}

h1, h2, h4 {
  font-family: Arial;
  text-align: center;
}

        
figure {
  display: inline-block;
  text-align: center;
  margin: 0;
}

figcaption {
  color: white;
  margin-top: 8px;
  font-size: 14px;
}

.left-content {
  max-width:350px;
  margin-right:10px;
}

.right-content {
  width:200px;
  flex:1;
}
                      
.left-content, .right-content {
  display: inline-block;
  vertical-align: top;
  width: 35%;
}

.left-content img {
  width: 100%;
  max-width: 200px;
  height: auto;
}

.Series, .Music {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.Series img, .Music img {
  width: 100px;
}

textarea {
  background: #10101a;
  color: var(--green);
  border: 1px solid #7a2abb;
  resize: none;
}

.tooltip {
  position: absolute;
	top: 0;
	left: 0;
  z-index: 99;
  opacity: 0;
  background-color: #0E1016;
  font-family: 'MS Gothic';
  font-size: 12px;
	padding: 5px;
	transition: opacity 0.2s ease-in-out;
	text-shadow: 2px 2px #4d4d4d;
	border: 1.5px grey inset;
}

.divwrap {
  display: flex;
}

#social img {
  filter: saturate(0%);
  transform: translateY(0px);
}

#social img:hover {
  filter: saturate(100%);
  transform: translateY(-5px) scale(1.1);
}

#social img {
  height: 48px;
}

#aeq {
  text-shadow: #ffffff4f 1px 1px;
  color: #fff;
  font-weight: bold;
  font-family: 'MS Gothic';
  background-color: #352626;
  margin: 0 2px;
  border: solid 1px #4d3535;
}

@keyframes shake {
  0% { transform: translate(2px, 2px) rotate(0deg); }
  10% { transform: translate(-3px, -3px) rotate(-2deg); }
  20% { transform: translate(-5px, 0px) rotate(2deg); }
  30% { transform: translate(5px, 3px) rotate(-1deg); }
  40% { transform: translate(3px, -3px) rotate(3deg); }
  50% { transform: translate(-3px, 5px) rotate(-3deg); }
  60% { transform: translate(-6px, 1px) rotate(2deg); }
  70% { transform: translate(6px, 2px) rotate(-1deg); }
  80% { transform: translate(-2px, -2px) rotate(3deg); }
  90% { transform: translate(2px, 5px) rotate(-2deg); }
  100% { transform: translate(2px, -5px) rotate(1deg); }
}