*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.top-image {
	width: auto;
}

p {
	font-family: "Quicksand";
	font-size: 16px;
	color: #395194;
	text-align: left;
}
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: auto;
  padding: 20px 40px;
  box-sizing: border-box;
  background-color: #80A4D4;
}

.logo { 
	position: relative; 
	display: inline-block; 
} 
.logo img { 
	width: 150px; 
	height: auto; 
	display: block; 
} 
.logo-hover { 
	position: absolute; 
	top: 0; 
	left: 0; 
	opacity: 0; 
	transition: opacity 0.1s ease; 
} 
.logo:hover .logo-hover { 
	opacity: 1; 
} 
.logo:hover img:first-child { 
	opacity: 0; 
}

.nav-links {
  display: flex;
  gap: 70px;
}

.nav-links a {
  text-decoration: none;
  font-family: "Quicksand", bold;
  color: #F7F7EF;
  font-size: 20px;
}
.nav-links a:hover {
	  color: #FFD572;
}

.split-section { 
	display: grid; 
	grid-template-columns: 1fr 1fr; 
	min-height: 500px; 
} 
.text-side { 
	padding: 50px; 
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
} 
.image-side { 
	border-left: 1px solid #F7F7EF; 
} 
.image-side img { 
	width: 60%; 
	height: auto%; 
	object-fit: cover; 
	display: block; 
}



.intro-info {
	margin-left: 60px;
	margin-right: 60px;
}
h1 {
	font-family: Anton;
	font-size: 55px;
	color: #395194;
}
h2 {
	font-family: Anton;
	font-size: 35px;
	color: #80A4D4 ;
}
.homepage-info {
	font-family: "Quicksand";
	font-size: 18px;
	color: #181A21;
}

.credit {
	font-family: "Quicksand";
	font-size: 14px;
	color: #395194;

}
li {
		font-family: "Quicksand";
		font-size: 18px;
		color: #181A21;
}

.url-form { 
	display: flex; 
	flex-direction: 
	column; gap: 15px; 
	max-width: 700px; 
	box-sizing: border-box;
	background-color: #FFD572;
	border-radius: 50px;

} 
.url-form label { 
	font-size: 32px; 
	font-family: "Anton";
	color: #395194;
	padding-top: 20px;
} 
.url-form input { 
	padding: 20px; 
	padding-left: 150px;
	padding-right: 150px;
	font-size: 14px; 
	border: 1px solid #DB9900;	
	border-radius: 10px;
	max-width: 600px;
} 
.url-form button { 
	padding: 12px 20px; 
	background: #395194; 
	font-family: "Quicksand";
	font-size: 18px;
	color: #fff; 
	border: none; 
	cursor: pointer; 
	max-width: 600px;
	padding-left: 40px;
	padding-right: 40px;
	border-radius: 10px;
} .url-form button:hover { 
	opacity: 0.7; 
}

.three-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  padding-left: 40px;
  padding-right: 40px;
}
.column {
  padding: 30px;
}

.play {
	padding: 12px 20px; 
	background: #FFD572; 
	font-family: "Quicksand";
	font-size: 18px;
	color: #395194; 
	border: none; 
	border-radius: 40px;
}
.play:hover {
	background: #DB9900;
}