@import "nav.css";
.scrolling-container {
	position: relative;
	width: 94vw;
	height: 20vw; /* Adjust based on your design */
	overflow: hidden;
}

.background {
	position: absolute;
	width: 94vw;
	height: 186.734vw; /* Double the height for seamless looping */
	background: url('background.png') repeat-y center top;
	background-size: cover;
	animation: scroll-background 45s linear infinite;
}

.overlay {
	position: absolute;
	width: 94vw;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.text {
	font-family: "Balsamiq Sans", sans-serif;
	font-weight: 400;
	font-style: italic;
    text-shadow: -0.4vw 0.4vw 0.4vw yellow;
	width: 74vw;
	text-align: center;
	font-size: 5vw;
	color: rgb(145, 8, 8);
}

.logo {
	width: 20vw;
	max-height: 80%; /* Adjust as needed */
	object-fit: contain;
}

@keyframes scroll-background {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-89.5%);
	}; /* Moves halfway so it loops seamlessly */
}
html {
	font-family: "Inclusive Sans", sans-serif;
	font-weight: 400;
	font-style: normal;
	margin-left: 1rem;
	margin-right: 3rem;
	padding-right: 3rem;
	width: 95vw;
}
h1 {
	margin-left: 1rem;
}
h2 {
	margin-left: 1.5rem;
}

h3 {
	margin-left: 2rem;
}

h4 {
	margin-left: 2.5rem;
}

h5 {
	margin-left: 3rem;
}

p {
	margin-left: 1rem;
}

span.clickable:hover {
	cursor: pointer;
	fill: blue;
	text-shadow: 1px 1px grey;
}

.highlighted {
	background-color: wheat;
}