@font-face {
	font-family: "alagard"; 
	src: url("https://robinhoodhistory.neocities.org/9-fonts/alagard.ttf") format("truetype");
}
		
@font-face {
	font-family: "GothicPixels"; 
	src: url("https://robinhoodhistory.neocities.org/9-fonts/GothicPixels.ttf") format("truetype");
}
		
body, html {
	margin: 0; 
	padding: 0; 
	height: 100%;
	width: 100%;
	background-image: url(https://robinhoodhistory.neocities.org/1-images/wooden-board.jpg); 
	background-size: cover; 
	background-position: center;
	background-repeat: no-repeat;
	font-family: "alagard", auto; 
	font-size: 22px; 
	cursor: url(https://robinhoodhistory.neocities.org/1-images/cursor-classic.png), pointer;
}
		
a {
	cursor: url(https://robinhoodhistory.neocities.org/1-images/cursor-link.png), pointer;
	text-decoration: underline; 
	color: #1D5221;
}
		
.heading {
	font-size: 2rem; 
	padding: 20px;
	color: #880910; 
	font-family: "GothicPixels", auto; 
	text-align: center; 
	text-shadow: 
		1px 1px 0 white, 
		-1px 1px 0 white, 
		-1px -1px 0 white, 
		1px -1px 0 white;
}
		
.row {
	width: 100%;
	position: absolute; 
	top: 10%;
	display: flex; 
	justify-content: space-between; 
	padding: 30px;
}
		
.column {
	padding: 10px; 
	width: 25%; 
	display: flex; 
	flex-direction: column;
	align-items: center;
}
		
.one, .two, .three, .four {
	width: 100%;
	height: 100%;
	display: flex; 
	justify-content: center;
}

.poster-container {
	width: 90%;
	height: auto;
	position: relative; 
	display: flex; 
	flex-direction: column; 
	justify-content: flex-start;
	align-items: center;
	padding: 10px; 
	margin-top: 10vh;
	cursor: url(https://robinhoodhistory.neocities.org/1-images/cursor-classic.png), pointer;			
}
		
.poster {
	transform: scale(1, 1); 
	transition: transform 0.5s ease; 
	z-index: 20; 
	display: inline-block; 
	width: 50%; 
	height: auto; 
	margin-top: 20px;
	margin-left: -35%;
	pointer-events: none; 
	outline-color: #880910; 
}

.poster img{
	width: 200%;
	object-fit: contain;
	max-width: none; 
	height: auto; 
		pointer-events: auto; 
}
	
.poster:hover{
	cursor: url(https://robinhoodhistory.neocities.org/1-images/cursor-enter.png);
}

.poster:hover img{
	transform: scale(1.2, 1.2); 
}
		
.scroll-container {
	position: relative; 
	top: 45vh; 
	transform: translateY(-50%); 
	width: 75%; 
	height: 60vh; 
	cursor: url(https://robinhoodhistory.neocities.org/1-images/cursor-classic.png), pointer;
	display: flex; 
	justify-content: center; 
	align-items: flex-start;
	margin: 0 auto; 
	margin-left: -15%
}
		
.scroll-container img{
	width: 100%; 
	height: 350px;
	object-fit: fill;
}

.scroll-text {
	position: absolute; /* Place the text over the scroll */
	top: 20px; /* Adjust the position inside the scroll */
	width: 50%; /* Keep the text width constrained within the scroll */
	padding: 10px; /* Add spacing around the text */
	font-family: "alagard", auto; 
	font-size: 16px; /* Adjust font size for readability */
	color: black; 
	text-align: justify; /* Align text neatly */
	overflow-wrap: break-word; /* Prevent text from breaking out */
	overflow-y: scroll; 
	max-height: 308px;
}
		
.column.one .poster-container {
	margin-top: 16vh; /* Adjust the height for the first poster */
	margin-right: -10%;
}

.column.two .poster-container {
	margin-top: -3vh; /* Adjust the height for the second poster */
	object-fit: cover; 
	width: 125%;
}

.column.three .poster-container {
	margin-top: 25vh; /* Adjust the height for the third poster */
	margin-left: -50%;
}