body,html {
	margin: 0;
	padding: 0;}
	
@font-face {
  font-family: Toletto;
	src: url("fonts/Toletto Medium.woff");}
	
h1 {font-family: "Toletto";
	font-size: 42px;
	color: red;}

body {
	background-image: url("manuscript images/91513.jpg");
	background-size: 1280px 631px;}
	
#flex {
	position: relative;
	display: flex;
	justify-content: center;
	padding-top: 110px;}
	
	#main {
		position: relative;
		height: 375px;
		width: 600px;
		background-color: white;
		border-radius: 25px;
		border: solid black 1px;
		padding: 12px;
		display: flex;
		align-items: stretch;
		gap: 12px;}
		
		#bunny {
			position: absolute;
			height: 200px;
			right: -70px;
			top: -53px;
			z-index: 3;}
		
		#sidebar {
			width: 106px;
			padding: 12px;
			background-color: #ffefd1;
			border-radius: 20px;
			text-align: right;
			font-size: 90%;}
			
		#content {
		  position: relative;
			width: 446px;
			height: 375px;
			overflow: auto;
			font-size: 80%;}
			
			#canterbury {
				float: left;
				height: 50px;
				padding-right: 5px;}
			
			#beneventan {
				width: 440px;}
			
			#fuckthis {
			position: relative;}
			
			#parchmenthover {
			  position: absolute;
			  width: 150px;
			  right: 0px;
			  top: 0px;
			  padding-left: 10px;
			  padding-right: 10px;
			  background-color: white;
			  border: solid 1px black;
			  display: none;}
			  
				#parchment:hover + #parchmenthover {
					display: block;}
					
			#inkhover {
			  position: absolute;
			  width: 150px;
			  right: 0px;
			  top: 0px;
			  padding-left: 10px;
			  padding-right: 10px;
			  background-color: white;
			  border: solid 1px black;
			  display: none;}
			  
				#ink:hover + #inkhover {
					display: block;}
					
			#quillhover {
			  position: absolute;
			  width: 150px;
			  right: 0px;
			  top: 0px;
			  padding-left: 10px;
			  padding-right: 10px;
			  background-color: white;
			  border: solid 1px black;
			  display: none;}
			  
			  #quills:hover + #quillhover {
					display: block;}
			
			#mandisplay {
				display: flex;
				gap: 10px;
				justify-content: center;}
				
				#man {
					height: 198px;}
			
			#beasts {
			  display: flex;
			  flex-wrap: wrap;
			  gap: 10px;
			  justify-content: center;}
			  
			  #bpic {
			    height: 100px;}
				
		
		#monk {
			height: 190px;
			float: right;
			padding-left: 10px;
			padding-right: 10px;
			padding-bottom: 10px;}
				
		#marcella {
			height: 200px;
			float: right;
			padding-left: 10px;
			padding-right: 10px;
			padding-bottom: 10px;}