@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');

body{
	font-family: "Google Sans Code", system-ui, sans-serif;
	font-size: 100%
	line-height: 135%;
	margin: 0;
}

header{
background-image: url("images/moons.jpg");
	background-position: center;
		background-size: cover;
	height: 40vh;
	display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
}
h1{
	margin-top: 0.7em;	
	/*padding-top: calc(25vh - 1em);*/
	padding: 0.25em;
	text-align: center;
	line-height: 1em;
	font-size: 6vw;
	color: #ffe5ec;
		text-shadow: -2px 2px 4px #000;
	background-color: rgba(220, 208, 255, 0.5);
}

main{
	margin: 1em
}
.outline {
	outline: 1px dotted #f00;
}

.sword img{
		width: 100%
}

	figure.sword {
		text-align: center;
			padding: 0.5em 1em 2em 1em;
		background-color: #E7DDFF;
		position: relative;
		line-height: 0;
		margin: 1em 2em;
	}

	.sword figcaption{
			
		color:(48, 25, 52);
		
		display: block;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			width: fit-content;
		background-color: rgba(150,150,150,.6);
			width: 60%;
			margin: 0 auto 0em auto;
			padding: 0.5em 0 0.5em 0;
			line-height: 100%
	}

.photo img{
		width: 100%
}

	figure.photo {
		text-align: center;
		width: 50%;
		padding: 0.5em 1em 2em 1em;
		background-color: #FFD1DF;
		position: relative;
		line-height: 0.5em;
		margin: 1em 5em;

	}
	.photo figcaption{
		text-align: center;
		color:#A3386C;
		
		display: block;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			width: fit-content;
		background-color: rgba(150,150,150,.6);
			width: 66%;
			margin: 0 auto 0em auto;
			padding: 0.5em 0 0.5em 0;
			line-height: 100%
	}

footer{
	align: bottom
}