body {
	background-color : black;
}
a {
	color : grey;
	accent-color : white;
}
#top {

	text-align : center;
	color : grey;
	font-size : 32px;
	font-family: "Arial", "Helvetica", sans-serif;
}
#middle {
	width : 255px;
	height : 1050px;
	background-color : black;
	margin : auto;


}
#sixword {
	height : 250px;
	width : 250px;
	display: inline-block;
	border-radius: 5%;
	float : center;
background-color : black;
background-image: url('6wordicon.png');
border : 3px solid grey;


}

#passwordGen {
		height : 250px;
	width : 250px;
	display: inline-block;
	border-radius: 5%;
	float : center;
background-color : white;
background-image: url('passwordicon.png');
border : 3px solid grey;

}
#chessBoard {
		height : 250px;
	width : 250px;
	display: inline-block;
	border-radius: 5%;
	float : center;
	background-color : grey;
	background-image: url('chessicon.png');
	border : 3px solid grey;
/*background-image: url('6wordicon.png');
width: auto;
background-color: green;*/
}

#colormaker{
		height : 250px;
	width : 250px;
	display: inline-block;
	border-radius: 5%;
	float : center;
	background-color : grey;
	background-image: url('coloricon.png');
	border : 3px solid grey;
/*background-image: url('6wordicon.png');
width: auto;
background-color: green;*/
}

#bottom {
	text-align : center;
		font-size : 22px;
		color : green;

	font-family: "Arial", "Helvetica", sans-serif;
}

.hover-container {
  position: relative; /* Essential for positioning the hover text */
  display: inline-block; /* Or block, depending on layout needs */

  background-color: lightgray;
  cursor: pointer; /* Indicates interactivity */
}

.hover-text {
  visibility: hidden; /* Hidden by default */
  opacity: 0; /* Hidden by default */
  position: absolute;
 
  margin : auto;

  background-color: darkorange;
  color: black;
padding: 5px 10px;
  border-radius: 4px;
  border : 3px solid black;
  white-space: nowrap; /* Prevents text from wrapping */
  transition: opacity 0.3s ease; /* Smooth fade-in effect */
  z-index: 10; /* Ensures it appears above other content */
}

.hover-container:hover .hover-text {
  visibility: visible; /* Visible on hover */
  opacity: 1; /* Fully opaque on hover */
}