body {
	background-color: grey;
}


.leftbar{
	background-color: #0abec1;
	width: 10%;
	padding-left: 3.25%;
	padding-right: 2%;
	padding-bottom:15%;
	padding-top: 1%;
	margin-top: 3%;
	margin-bottom: 2.5%;
	margin-left: 6.5%;
	border-style: groove;
	border-color: grey;
	font-size: 25px;
	font: sans-serif;
	float: left;
}
.main{
	background-color: #2158c4;
	width: 50%;
	padding-left: 6.25%;
	padding-right: 4%;
	padding-bottom:10%;
	padding-top: 1%;
	border-style: groove;
	border-color: grey;
	font-size: 25px;
	margin-top: 2.5%;
	margin-right: 9%;
	font: sans-serif;
	float: right;
}
.menubox{
	border-style: outset;
	border-color: black;
	margin: 2.5%;
	width: 70%;
}
/* Headers for the pages */
#headerhome{
	background-color: #0c9bc7;
	width: 48%;
	padding-left: 2%;
	padding-right: 2%;
	padding-bottom:3.5%;
	padding-top: 3.5%;
	border-style: groove;
	border-color: grey;
	font-size: 25px;
	margin-top: 2.5%;
	margin-right: 25%;
	font: sans-serif;
	font-size: 48px;
	float: right;
}

#headerFinal{
	background-color: #0c9bc7;
	width: 30%;
	padding-left: 8%;
	padding-right: 8%;
	padding-bottom:3.5%;
	padding-top: 3.5%;
	border-style: groove;
	border-color: grey;
	font-size: 25px;
	margin-top: 2.5%;
	margin-right: 29%;
	font: sans-serif;
	float: right;
	font-size: 48px;
}

#headerblackholes{
	background-color: #0c9bc7;
	width: 26%;
	padding-left: 8%;
	padding-right: 8%;
	padding-bottom:3.5%;
	padding-top: 3.5%;
	border-style: groove;
	border-color: grey;
	font-size: 25px;
	margin-top: 2.5%;
	margin-right: 29%;
	font: sans-serif;
	float: right;
		font-size: 48px;
}

#headerWhiteHoles{
	background-color: #0c9bc7;
	width: 27.5%;
	padding-left: 8%;
	padding-right: 8%;
	padding-bottom:3.5%;
	padding-top: 3.5%;
	border-style: groove;
	border-color: grey;
	font-size: 25px;
	margin-top: 2.5%;
	margin-right: 29%;
	font: sans-serif;
	float: right;
	font-size: 48px;
}

#headerTime{
	background-color: #0c9bc7;
	width: 30%;
	padding-left: 8%;
	padding-right: 8%;
	padding-bottom:3.5%;
	padding-top: 3.5%;
	border-style: groove;
	border-color: grey;
	font-size: 25px;
	margin-top: 2.5%;
	margin-right: 29%;
	font: sans-serif;
	float: right;
	font-size: 48px;
}
/* Text for the pages */
#texthome{
	background-color: #0c9bc7;
	width: 94%;
	padding-left: 2%;
	padding-right: 2%;
	padding-bottom:1%;
	padding-top: 1%;
	border-style: groove;
	border-color: grey;
	font-size: 20px;
	margin-top: 2.5%;
	margin-left: 40px;
	font: sans-serif;
	float: right;
}

#textblackholes{
	background-color: #0c9bc7;
	width: 94%;
	padding-left: 2%;
	padding-right: 2%;
	padding-bottom:1%;
	padding-top: 1%;
	border-style: groove;
	border-color: grey;
	font-size: 20px;
	margin-top: 2.5%;
	margin-left: 40px;
	font: sans-serif;
	float: right;
}

#textWhiteholes{
	background-color: #0c9bc7;
	width: 94%;
	padding-left: 2%;
	padding-right: 2%;
	padding-bottom:1%;
	padding-top: 1%;
	border-style: groove;
	border-color: grey;
	font-size: 20px;
	margin-top: 2.5%;
	margin-left: 40px;
	font: sans-serif;
	float: right;
}

#textTime{
	background-color: #0c9bc7;
	width: 94%;
	padding-left: 2%;
	padding-right: 2%;
	padding-bottom:1%;
	padding-top: 1%;
	border-style: groove;
	border-color: grey;
	font-size: 20px;
	margin-top: 2.5%;
	margin-left: 40px;
	font: sans-serif;
	float: right;
}
/*Pictures for the pages*/


#picture{
	padding-left: 17%;
}

#blackholepicture{
	padding-left: 8.25%;
}
#Whiteholepicture{
	padding-left: 35%;
}

.timepictures{
float: left;
padding-top: 2.5%;
padding-left: 7.5%;
}

/* Cyber Stuff */

/* Container styles - isolated by unique class */
.Cyberpictures {
  display: flex;
  gap: 16px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  margin-top: 30%;
}

/* Box styles - scoped using the child class */
.Cyberpictures .img-box {
  flex: 1;
  height: 300px;
  overflow: hidden; 
  border-radius: 8px;
}

/* Image styles - strictly targets images inside .img-box */
.Cyberpictures .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Hover effect - isolated to this exact image path */
.Cyberpictures .img-box img:hover {
  transform: scale(1.1); 
}

#HeaderCyber{
	background-color: #0c9bc7;
	width: 70%;
	padding-left: 8%;
	padding-right: 8%;
	padding-bottom:3.5%;
	padding-top: 3.5%;
	border-style: groove;
	border-color: grey;
	font-size: 25px;
	margin-top: 2.5%;
	margin-right: 8%;
	font: sans-serif;
	float: right;
	font-size: 48px;
	display: grid;
	place-items: center;
}

#textCyber{
	background-color: #0c9bc7;
	width: 94%;
	padding-left: 2%;
	padding-right: 2%;
	padding-bottom:1%;
	padding-top: 1%;
	border-style: groove;
	border-color: grey;
	font-size: 20px;
	margin-top: 2.5%;
	margin-left: 40px;
	font: sans-serif;
	float: right;
}



/* Hovering or link makes it look cool */
a{
	color:black;
	text-decoration: none;
}

a:hover {
	text-decoration:revert;
}
.menubox:hover{
	background-color: cadetblue ;
}