html {
 background: linear-gradient(0deg, #00ffff 0%, #ff00ff 92%);
 cursor: cell;
}
body {
  color: 	#B2F5EA; /* or try #EEEEEE for softer contrast */
  font-family: 'Segoe UI', sans-serif;
 
}
.box {
  opacity: 1;
  border-top: 10px ridge #800080;
  border-right: 10px inset #800080;
  border-bottom: 10px outset #800080;
  border-left: 10px groove #800080;
  /*background: linear-gradient(0deg, #800080 0%, #400080 13%, #8000ff 100%);*/
  border-radius:  0 0 15px 15px;
  box-shadow: 3px -3px #800080, -3px 0px 400080;
  padding: 15px 10px 15px 10px;
  background-color: plum;
}
.sidebar-content {
  opacity: 1;
  border-top: 10px ridge #800080;
  border-right: 10px inset #800080;
  border-bottom: 10px outset #800080;
  border-left: 10px groove #800080;
  /*background: linear-gradient(0deg, #800080 0%, #400080 13%, #8000ff 100%);*/
  border-radius:  0 0 15px 15px;
  box-shadow: 3px -3px #800080, -3px 0px 400080;
  padding: 15px 10px 15px 10px;
  background-color: plum;
  width: 100%;
  max-width: 950px;
  float: right;
}
.sidebar-content2 {
  opacity: 1;
  border-top: 10px ridge #800080;
  border-right: 10px inset #800080;
  border-bottom: 10px outset #800080;
  border-left: 10px groove #800080;
  /*background: linear-gradient(0deg, #800080 0%, #400080 13%, #8000ff 100%);*/
  border-radius:  0 0 15px 15px;
  box-shadow: 3px -3px #800080, -3px 0px 400080;
  padding: 15px 10px 15px 10px;
  background-color: plum;
  width: 100%;
  max-width: 950px;
  float: left;
}
.css-button { 
	color: #B2F5EA;
	font-size: 14px;
	border-radius: 7px;
	border: solid 1px #9c33ed;
	padding: 9px 18px;
	text-shadow: 2px 2px 0px #7d15cd;
	box-shadow: inset 1px 1px 2px 0px #d297fe;
	text-decoration: none;
	cursor: pointer;
	position: center;
	overflow: hidden;
	font-family: 'Segoe UI', sans-serif;
	background: linear-gradient(180deg, #a63df6 36%, #7d16cb 100%);
	display: inline-block;
	vertical-align: middle;
	
}
.css-button:hover {
	background: linear-gradient(180deg, #7d16cb 36%, #a63df6 100%);
}
.css-button-text {
	position: relative;
	display: inline-block;

}
a {
  color: #B2F5EC; /* Gold */
  text-decoration: none;
}

a:hover {
  color: #B2F5EB;
  text-decoration: underline;
}

a:visited {
  color: #B2F5EA; /* Plum */
}
img {
  border-radius: 8px;
  border: 6px double #400080;
}

h2 {
  max-width: 950px;
  background-color: black;
  margin: 0;
  border-radius: 15px 15px 0 0;
  box-shadow: 3px -3px #800080, -3px 0px 400080;
  font-size: 30px;
  padding: 15px 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 2px 1px var(--shadow-color1), -1px -1px var(--shadow-color2);
  line-height: 15px;
  box-sizing: border-box;
}
.coolheader {
background: black;
  margin: 0;
  color: white;
  border-radius: 15px 15px 0 0;
  box-shadow: 3px -3px #800080, -3px 0px 400080;
  font-size: 30px;
  padding: 15px 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 2px 1px var(--shadow-color1), -1px -1px var(--shadow-color2);
  line-height: 15px;
}
.innerbox {
box-shadow: var(--border-effect);
  background-color: #800080;
  border-radius: 0.8rem;
  padding: 20px;
  height: 100%;
}

.table {
  display: table;
  column-count: 4;
}
#left-sidebar {
  width: 100%;
  max-width: 430px;
}