@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

html{
	font-family: "Noto Sans", sans-serif;
	background: radial-gradient(#280048,#300000);
	background-size: 33%;
	color: #FFDDCC;
}

body{
	margin: auto;
}

h1,h2,h3{
	margin: .5em;
	font-family: "Noto Serif", serif;
}

p{
	font-size: .95em;
	padding-left: 3%;
	padding-right: 3%;
}

a{
	color: #FFC400;
	text-decoration: none;
}
a:hover{
	color: #FFF400;
}

img{
	width: 100%;
	border-radius: 3px;
}

hr{
	color: #AA9988;
}

header{
	text-align: center;
	font-size: .9em;
}
header i{
	font-size: .6em;
	font-weight: normal;
	display: none;
}

nav{
	text-align: center;
	color: #998877;
}
nav a{
	font-size: 1.03em;
	padding-left: 1%;
	padding-right: 1%;
}
nav i{
	font-size: .85em;
	color: #FFAA77;
	padding-left: 1%;
	display: none;
}

main{
	padding-top: 3%;
	padding-bottom: 5%;
}

figure{
	border: 3px solid rgba(0,0,0,.0);
	max-width: 400px;
	margin: 5% auto;
}
figcaption{
	text-align: center;
	background-color: rgba(255,200,200,.2);
	border-radius: 3px;
	margin-bottom: 5px;
	text-shadow: 3px 3px 8px #000000;
}
aside{
	font-size: 1.3em;
	text-align: center;
	border-radius: 3px;
	margin-bottom: 5px;
}

footer{
	position: fixed;
	bottom: 0;
	width: 100%;
	font-size: .8em;
	font-family: "Noto Serif", serif;
	background-color: #300000;
	text-align: center;
}
footer p{
	margin: 1%;
	text-shadow: 3px 3px 8px #FFAA77;
}

.btn{
	background-color: #330033;
	color: #FFC400;
	border: none;
	font-size: 1.1em;
	padding: 2px 3px;
	display: inline-block;
	border-radius: 3px;
	box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2), 0 3px 5px 0 rgba(222,180,120,.9);
}
.btn:hover{
	color: #FFF400;
	box-shadow: 0 8px 15px 0 rgba(0,0,0,0.2), 0 5px 8px 0 rgba(255,222,22,22.19);
}
nav .btn:nth-child(1){
	color: #DFC400;
	font-size: 1.05em;
}
nav .btn:nth-last-child(-n+3){
	color: #DFC400;
	font-size: 1.05em;
}

@media screen and (min-width:600px),print{
	.grid{
		display: grid;
		grid-template-columns: auto auto;
		grid-gap: 0px;
	}
	aside{
		grid-column: 1 / span 2;
	}

	body{
		width: 95%;
	}
	header{
		width: 90%;
	}
	nav{
		width: 95%;
	}
	footer{
		width: 95%;
	}

	.btn{
		font-size: 1.2em;
		padding: 3px 5px;
	}

	.col{
		position: fixed;
		width: 40%;
		height: 100%;
	}
	#left{
		left: 0;
		padding-left: 8%;
	}
	#right{
		right: 0;
		padding-right: 8%;
	}
}

@media screen and (min-width:900px),print{
	body{
		width: 85%;
	}
	header{
		width: 80%;
	}
	header i{
		display: inline;
	}
	nav{
		width: 85%;
	}
	nav i{
		display: inline;
	}
	footer{
		width: 85%;
	}

	.col{
		position: fixed;
		width: 30%;
	}
	#left{
		padding-left: 18%;
	}
	#right{
		padding-right: 18%;
	}
}