*{
	margin: 0px;
	padding: 0px;
}

::selection {
  background-color: orange; /* WebKit/Blink Browsers */
  color: #181818;
  transition: background-color 0.5s;
}

::-moz-selection {
  background-color: orange;
  color: #181818;
    transition: background-color 0.5s;
}

.spin-container{
	display: flex;
	width: 100vw;
	height: 100vh;
	flex-direction: row;
}

.spin-container-left{
	display: flex;
	width: 250px;
	flex-direction: column;
	flex-wrap: stretch;
	position: relative;
	padding-top: 60px;
	height: auto;
	overflow: wrap;
	background-color: #181818;
	filter: drop-shadow(0px 0px 0px #000);
	transition: filter 0.5s, width 0.5s ease-in;
}

.spin-container-left:hover{
	filter: drop-shadow(0px 0px 5px #000);
	transition: filter 0.5s, width 0.5s ease-in;
}

.spin-container-left:focus{
	filter: drop-shadow(0px 0px 5px #FFF);
	transition: filter 0.5s, width 0.5s ease-in;
	z-index: 2;
}

.huge{
	display: flex;
	width: 90vw;
	flex-direction: column;
	justify-content: stretch;
	position: relative;
	padding-top: 60px;
	flex-grow: 60;
	height: auto;
	overflow: wrap;
	background-color: #181818;
	transition: filter 0.5s, width 0.5s ease-in;
}

.huge:hover{
	filter: drop-shadow(0px 0px 5px #000);
	height: auto;
	transition: filter 0.5s, width 0.5s ease-in;
}

.plusButton a{
	display: flex;
	font-family: monospace;
	text-decoration: none;
	padding-left: 10px;
	color: #f8f8f8;
	width: 100%;
	font-size: 30px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.plusButton a:active{
	color: #181818;
}

.plusButton a:focus{
	outline: none;
}

.spin-container-left-links{
	display: flex;
	flex-direction: column;
}

.spin-container-left-links > div{
	width: 100%;
	background-color: #181818;
/*	padding-top: 5px;
	padding-bottom: 5px;*/
}

.spin-container-left-links > div:hover{
	width: 100%;
	background-color: #282828;
/*	padding-top: 5px;
	padding-bottom: 5px;*/
}

.spin-container-left-links > div:active{
	width: 100%;
	background-color: orange;
/*	padding-top: 5px;
	padding-bottom: 5px;*/
}

.spin-container-left-links a{
	display: flex;
	font-family: monospace;
	text-decoration: none;
	padding-left: 10px;
	color: #f8f8f8;
	width: 100%;
	font-size: 30px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.spin-container-left-links a:active{
	color: #181818;
}

.spin-container-left-links a:focus{
	outline: none;
}

.bottom-text{
	display: flex;
	flex-grow: 1;
	padding-bottom: 10px;
	flex-direction: column;
	align-items : center;
	justify-content: flex-end;
	color: #f8f8f8;
	font-family: monospace;
	font-size: 12px;
}

.bottom-text >a{
	text-decoration: none;
	color: #f8f8f8;
}

.bottom-text >a:hover{
	text-decoration: underline;
	color: #f8f8f8;
}

.bottom-text >a:active{
	text-decoration: none;
	color: orange;
}

.bottom-text >a:focus{
	text-decoration: none;
	outline: none;
	color: orange;
}

.spin-container-right{
	display: flex;
	flex-grow: 1;
	background-color: #181818;
	width: 100%;
	transition: width 1s;
}

#spin-text-area{
	width:100%;
	opacity: 1;
	font-size: 20px;
	background-color: #282828;
	color: #a8a8a8;
	border: none;
	padding: 5px;
	transition: color 0.5s;
}

#spin-text-area:focus{
	width:100%;
	opacity: 1;
	font-size: 20px;
	background-color: #282828;
	color: #f8f8f8;
	border: none;
	padding: 5px;
	transition: color 0.5s;
}