body
{
	background-color: #956bc2;
	background-image: url("images/sparkles_01.gif"), url("images/vivaldi_manuscript.webp");
	background-size: 200px 200px, 400px 400px;
	
	font-family: Georgia;
	
	color: #393777;
}

h1
{
	font-size: 36px;
	text-align: center;
}

h3
{
	line-height: 66%;
}

h4
{
	line-height: 33%;
}

p
{
	font-size: 18px;
}

p:hover
{
	text-decoration: underline;
}

a
{
	font-weight: bold;
	color: #956bc2;
}

a:hover
{
	color: #e65c00;
}

.main
{
	margin: 32px 32px 32px 128px;
	
	display: grid;
	grid-template-columns: 680px 500px 300px;
}

.main section
{
	position: relative;
	height: 900px;
	
	margin: 24px;
	
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.main section div.card
{
	position: relative;
	
	padding: 24px;
	margin: 12px 0 12px 0;
	
	background-color: white;
	filter: drop-shadow(8px 8px 0px black);
}

#chords_chart
{
	width: 100%;
	border-collapse: collapse;
	
	font-size: 18px;
	font-family: Georgia;
	text-align: center;
	
	color: white;
}

#chords_chart td
{
	padding: 6px;
}

#main_images
{
	position: relative;
	height: 375px;
}

@keyframes logo_bounce
{
	0% { top: 0px; }
	50% { top: -12px; }
	100% { top: 0px; }
}

#main_logo
{
	position: absolute;
	
	width: 100%;
	
	animation-name: logo_bounce;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	
	filter: drop-shadow(0 0 8px #eec2e0);
}

#piano_roll
{
	position: absolute;
	top: 0;
	left: 0;
	
	width: 200px;
	height: 150%;
	
	background-image: url("images/piano_roll.gif");
	background-repeat: repeat-y;
	background-size: 96px 192px;
	
	filter: drop-shadow(4px 0 4px black);
	
	z-index: -1;
}

#shirgi_idle
{
	position: absolute;
	bottom: -160px;
	right: 0px;
	
	width: 375px;
	
	z-index: 2;
	
	filter: drop-shadow(2px 2px 0px #e4a6c0);
}

#staff_divider
{
	width: 100%;
	
	filter: drop-shadow(6px 6px 0px black);
}