@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/castle-foyer.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; 
		}
		
		.column {
			padding: 10px; 
			width: 20%; 
			display: flex; 
			flex-direction: column;
			align-items: center;
		}
		
		.one, .two, .three, .four, .five {
			width: 100%;
			height: 75%%
			display: flex; 
			justify-content: center;
		}
		
		.character-container {
			background-color: #EBD9A9; 
			width: 90%;
			height: 60vh;
			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;			
		}
		
		.character {
			transform: rotate(0deg); 
			transition: transform 0.2s ease; 
			z-index: 20; 
			display: inline-block; 
			width: 50%; 
			height: auto; 
			margin-top: 20px;
			margin-left: -35%;
			pointer-events: none; 
			outline-color: #880910; 
		}
		
		.character img{
			width: 200%;
			object-fit: contain;
			max-width: none; 
			height: auto; 
			max-height: 300px;
			pointer-events: auto; 
		}
		
		.character:hover{
			cursor: url(https://robinhoodhistory.neocities.org/1-images/cursor-enter.png);
		}
		
		.character:hover img{
			transform: rotate(3deg); 
		}
		
		.desc { 
			font-family: "alagard", auto; 
			color: black;
			font-size: 16px; 
			z-index: 10; 
			white-space: normal; 
			max-width: 80%;
			padding: 10px; 
			box-sizing: border-box; 
			text-align: center;
			margin-top: auto;
		}
		
		.scroll-container {
			padding: 10px;
			position: relative; 
			top: 35vh; 
			transform: translateY(-50%); 
			width: 90%; 
			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; 
		}
		
		.scroll-container img{
			width: 100%; 
			height: 100%;
			object-fit: cover;
		}
		
		.scroll-text {
			position: absolute; /* Place the text over the scroll */
			top: 70px; /* 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: 350px;
		}