body {
	background-color: black;
}
html, body {
	height: 100%;
}

	.objectsArray {
		border-left: solid white 150px;
		border-right: solid white 10px;
		position: sticky;
		max-width: 80%;
		overflow-x: visible;
	}



img {
	max-width: 122px;
	max-height: 122px;
	padding: 4px;
	float: right;
	z-index: -1;
}

@keyframes enlarge {
	from {background-color: magenta;}
	to {background-color: cyan;}
}	


img:hover {
		max-width: 500px;
		max-height: 500px;
		background-color: magenta;
		animation-name: enlarge;
		animation-duration: 4s;
		transition: opacity 1s ease-in-out 0s;
		position: inherit;
		z-index: 2;
		
}



.objectsTitle {
	font-family: 'Roboto Mono', monospace;
	font-size: 12.1px;
	color: white;
	height: 100vh;
	overflow-y: auto;
	position: fixed;
	top: 10;
	left: 0;

}
		

.title {
  	width: 150px;
  	background-color: black;
  	display: block;
  	overflow-y: auto;
}

.title:hover {
	color: magenta;
}

#randomizer {
	top: 0;
	left: 0;
	position: sticky;
	position: fixed;
	padding: 10px;
	overflow-y: visible;
	border: none;
	display: none;
  	position: fixed;
  	z-index: 99;
  	background-color: black;
  	color: white;
  	cursor: pointer;
  	padding: 15px;
  	border-radius: 4px;
}


button { 
	background-color: black;
	font-size: 30px;
}

	
.backtotop {
	right: 0;
	bottom: 0;
	position: sticky;
	position: absolute;
	padding: 10px;
}

#topBtn {
	color: white;
	font-family: 'Roboto Mono', monospace;
	font-size: 12.1px;
	display: none;
  	position: fixed;
  	bottom: 20px;
  	right: 30px;
  	z-index: 99;
  	background-color: black;
  	color: white;
  	cursor: pointer;
  	padding: 15px;
  	border-radius: 4px;
}

#topBtn:hover {
	color: magenta;
}