* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

@font-face {
		font-family: 'PrinceValiant';
		src: url('https://moocyte.neocities.org/gurdy/assets/PrinceValiant.woff2') format('woff2');
		}
		
@font-face {
		font-family: 'Dunny';
		src: url('https://moocyte.neocities.org/myst/assets/DunnyPenNTS.woff2') format('woff2');
		}

body {
		background-image: url('https://moocyte.neocities.org/assets/twoofair.jpg'); 
		background-size: cover;
		font-size: 1.1rem;
		font-family: "Trebuchet MS";
		} 
		
		header { 
	max-width: 600px;         
	margin: 0 auto; 
	margin-top: 30px;
	margin-bottom: 80px;
	border: solid;
	border-radius: 10px;
	border-color: CornflowerBlue;
	background-color: rgba(255,255,255,0.8);
	text-align: center;
	}

header img {
    width: 300px;
	margin: 10px;
}
	
		main{
		max-width:1000px;
		margin: 0 auto;
		padding: 10px;
		border: solid;
		border-radius: 10px;
		border-color: CornflowerBlue;
		background-color: rgba(255,255,255,0.85);
		padding: 30px;
		color: DarkSlateBlue;
		}
		
		ul  {
		padding-left: 15px;
		}
		
		li {
		padding: 3px;
		}
		
		h2 {
		padding: 5px;
		text-align: center;
		color: MidnightBlue;
		}
		
		section {
		padding: 10px;
		text-align: center;
		border-color: CornflowerBlue;
		color: DarkSlateBlue;
		margin: 10px;
		display: flex;
		}
		
		section div {
			margin: 0 auto;
			
		}
		
		summary {
			margin: 10px;
			border-bottom: solid;
			text-align: center;
		border-color: CornflowerBlue;
		color: DarkSlateBlue;
		}
		
		
		

		footer {
		border-radius: 10px;
		border: solid;
		border-color: CornflowerBlue;
		background-color: rgba(255,255,255,0.8);
		text-align: center;
		margin: 20px auto;
		padding: 5px;
		max-width: 700px;
		}




@media only screen and (max-width: 600px){


header {
Width: calc(100% - 20px);
margin: 10px;
}

.container {
	flex-wrap: wrap;
	margin-top: 10px;
	gap: 10px;
}

main {
	margin: 10px;
	margin-top: 0px;
}

aside {
	position: static;
	width: 100%;
	margin: 10px;
	margin-bottom: 0px;
}
}