body {
  background-color: #B1ABF3;
  font-size: 0.875em;
  font-family: monospace;
  padding: 0;
  margin: 0;
  background: url("https://i.imgur.com/6WN8n7s.png");
  background-attachment: fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  }
  
center {
  text-align: center;
  }
  
/*Contains everything*/
.wrapper {
  background: none;
  top: 0;
  margin: 0 auto;
  width: 960px;
  }
  
/*Contains main and sidebar divs*/
.main-wrapper {
  position: relative;
}
  
/*Header and footer images*/
.header {
  border: 3px double #333;
  background: linear-gradient(rgb(255, 215, 249, 0.75), rgb(255, 215, 249, 0.75));
  text-align: center;
  margin-top: 15px;
  top: 0;
  height: auto;
  }
  
  
.footer {
  margin-bottom: 15px;
  text-align: center;
  }
  
.header img {
  border-top: 0px;
  }
  
  
.title { /*suppress title, since we're putting the title as text in the header box*/
  display: none;
  }
  

/*Container for top row of links.*/
.links {
  margin-top: 1em;
  text-align: center;
  }
  
/*Div style for header links.*/
.link {
  text-align: center;
  display: inline-block;
  list-style-type: none;
  float: none;
  font-weight: bold;
  font-size: 1.16em;
  padding: 5px;
  margin-right: 10px;
  margin-left: 10px;
  border: 0px;
  }
  
a:link {
	color: #7B71E4;
	text-decoration: none;
	}
				
a:visited {
	color: #7B71E4;
	text-decoration: none;
	}
				
a:hover {
	color: #B1ABF3;
	text-decoration: underline;
	}
	
				
a:active {
	color: #B1ABF3;
	text-decoration: underline;
	}
	
ul {
  list-style-position: outside;
  margin: 5px;
  margin-left: 10px;
  padding: 5px;
  }
  
ol {
  list-style-position: outside;
  margin: 5px;
  margin-left: 15px;
  padding: 5px;
  }

/*These three classes are just for defining the boundaries and size of the main and sidebar columns. Most fancy styling goes in the 'box' class.*/
.sidebar-left, .main, .sidebar-right {
  display: inline-block;
  }
  
.sidebar-left, .sidebar-right {
  width: 175px;
  top: 0;
  text-align: center;
  }

.sidebar-left {
  position:fixed;
  margin-top: 78px;
  }

.sidebar-right {
  margin-left: 15px;
  position: absolute;
  }
  
.main {
  margin-left: 190px;
  width: 580px;
  }
  
  
/*Box used for individual sections in the sidebar, center column, etc.*/
.box {
  border: 3px double #333;
  background: #FFD7F9;
  padding: 0;
  margin-top: 10px;
  }

/*Prevent overflow of large images in main text areas.*/
.box img {
  max-width: 100%;
  height: auto;
  }

  /*Override default margins/padding for headings.*/
.box h1, .box h2, .box h3, .box h4 {
  background: #EF9DE9;
  margin: 0;
  padding: 0.35em 0.25em 0.3em 0.25em;
  text-align: center;
  border-bottom: 3px double #333;
  }
  
.tab {
  padding: 0.25em 1em 0.3em 1em;
  font-size: 1.075em;
  }
  
.tabcontent {
  border: 3px double #333;
  background: #FFD7F9;
  padding: 0;
  margin-top: 10px;
  }
  
 .tabcontent h1, .tabcontent h2, .tabcontent h3, .tabcontent h4 {
  background: #EF9DE9;
  margin: 0;
  padding: 0.35em 0.25em 0.3em 0.25em;
  text-align: center;
  border-bottom: 3px double #333;
  }
  
 .tab button {
  background-color: inherit;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  color: #7B71E4;
	text-decoration: none;
}

.tab button:hover {
  background-color: inherit;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  color: #B1ABF3;
	text-decoration: underline;
}
  
audio::-webkit-media-controls-panel{
		background-color:#7B71E4;
		background-size:cover;
		background-position:center
		}
  
  
.tabcontent img {
  max-width: 100%;
  height: auto;
  }

hr {
  width: 85%;
  border-bottom: 3px double #333;
  border-top: none;
  }

textarea {
  width: 120px;
  }
  
iframe {
    border: 0px;
    width: 100%;
}
  
/***
  Not give any style rules by default. Move the padding from the 'box' class here if you want boxes with specially styled headers or images that 
  don't follow the margins of the main text. (For an example of that: see skin #1.)
  ***/
.inner {
  padding: 0.25em 1em 0.3em 1em;
  font-size: 1.075em;
  }

.inner img {
  max-width: 100%;
  height: auto;
  }
  
.row {
  display: flex;
}

  
/*** scrollbar ***/
/* width */
::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #B1ABF3;
  border: 1px solid;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #FBDFFA;
  border: 1px solid;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #EF9DE9;
}

::-webkit-scrollbar-button {
  background: #FBDFFA;
}

::-webkit-scrollbar-button:hover {
  background: #EF9DE9;
}

::-webkit-scrollbar-button:single-button {
  border: 1px solid;
  height: 12px;
}

/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #555555 transparent;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent #777777 transparent;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: 8px 8px 0 8px;
  border-color: #555555 transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:single-button:increment:hover {
  border-color: #777777 transparent transparent transparent;
}