div	{padding: 4px;
}

body {
	background: black;
	text-align: center;
}

#imagediv1:hover{
outline: 8px solid black;
outline-offset: -8px;
box-shadow:0px 0px 0px 1px white;
}	{padding: 4px;
}
#imagediv2:hover{
outline: 8px solid black;
outline-offset: -8px;
box-shadow:0px 0px 0px 1px white;
}	{padding: 4px;
}
#imagediv3:hover{
outline: 8px solid black;
outline-offset: -8px;
box-shadow:0px 0px 0px 1px white;
}	{padding: 4px;
}
#videodiv	{padding: 4px;
}
#imagediv4:hover{
outline: 8px solid black;
outline-offset: -8px;
box-shadow:0px 0px 0px 1px white;
}	{padding: 4px;
}
#imagediv5:hover{
outline: 8px solid black;
outline-offset: -8px;
box-shadow:0px 0px 0px 1px white;
}	{padding: 4px;
}
#imagediv6:hover{
outline: 8px solid black;
outline-offset: -8px;
box-shadow:0px 0px 0px 1px white;
}	{padding: 4px;
}
.backgroundspace {
transform: translate(0%, 10vh);
}
.flex-container {
  display: flex;
  justify-content:space-evenly;
	/* this is best for me here as any single alone elements are centered, like when screen is small */
	align-items:center;
  flex-wrap: wrap;
	max-width: 1000px;
	margin: auto;
}