@charset "UTF-8";
/* CSS Document for composernotes.com analysis pages */

/* button flex layout */
.button-container
{
	display: flex;
	width: 100%;
	justify-content: space-between;
	margin: 2rem 0 4rem 0;
}
.button
{
	background-color: var(--red);
	font-size: 1em;
	padding: 0.325em 0.65em;
	border-radius: 0.625em;
	text-align: center;
	text-decoration: none;
}
.button a
{
	color: var(--white);
	text-decoration: none;
}
.button a:hover
{
	border-bottom: 1px solid var(--white);
}
.themes
{
	font-size: 1rem;
	font-style: italic;
	font-weight: bold;
    color: var(--grey);
}
.motives
{
	font-size: 0.95rem;
	font-style: italic;
	font-weight: bold;
    color: var(--red);
}
.small-screen
{
	display: inline-block;
	margin-top: 0.625rem;
	margin-bottom: 0.625rem;
}
.underline
{
	border-bottom: 1px solid var(--dark);
}
.indent
{
	margin-left: 1.5rem;
	margin-bottom: 0.25rem;
}

/* CUSTOM COUNTER ORDERED LIST */
.custom-counter
{
	list-style: none;
	counter-reset: 1;
}
li
{
	counter-increment: li;
	margin-bottom: 0.25rem;
}
.custom-counter li::before
{
	content: counter(li);
	color: var(--red);
	font-weight: bold;
	display: inline-block;
	width: 1rem;
	margin-left: -1.5rem;
	margin-right: 0.5rem;
	text-align: right;
}
/* END OF CUSTOM COUNTER */
.scene-characters
{
	list-style: none;
	margin-left: 3rem;
}
.sinfonia-container
{
	display: flex;
	width: 100%;
	justify-content: space-between;
	padding: 0;
}
.sinfonia-container:nth-child(odd)
{
	background-color: var(--light);
}
.sinfonia-container:last-child
{
	margin-bottom: 2rem;
}
.reveal
{
	display: inline;
	font-weight: bold;
	font-style: italic;
	font-size: 0.75rem;
}
.hidden
{
	display: none;
}
.music-link
{
    font-size: 1rem;
    color: var(--red);
}
.margin-bottom
{
	margin-bottom: 1rem;
}
.embed-video
{
	aspect-ratio: 16/9;
	width: 100%;
}
.info
{
	text-align: right;
	margin-bottom: 1rem;
}
.excerpt-left, .excerpt-right
{
	margin-bottom: 1rem;
}
.border
{
	border: 1px solid rgb(0,0,0);
}

/* Tablet and desktop styles */
@media screen and (min-width: 900px)
{
	/* excerpt flex layout */
	.excerpt-container
	{
		display: flex;
		width: 100%;
		justify-content: space-between;
		padding: 0 0 1.5rem 0;
		gap: 3rem;
	}
	.excerpt-left
	{
		justify-content: flex-start;
		flex-basis: 70%;
		text-align: left;
	}
	.excerpt-right
	{
		justify-content: flex-end;
		flex-basis: 30%;
		text-align: right;
	}
	/* listening flex layout */
	.listening-container
	{
		display: flex;
		width: 100%;
		justify-content: space-between;
	}
	.listening-left
	{
		justify-content: flex-start;
		flex-basis: 50%;
		text-align: left;
	}
	.listening-right
	{
		justify-content: flex-start;
		flex-basis: 50%;
		text-align: left;
	}
	/* sinfonia grid layout */
	.sinfonia-container
	{
		display: flex;
		width: 100%;
		justify-content: space-between;
	}
	.sinfonia-left
	{
		justify-content: flex-start;
		flex-basis: 13%;
		text-align: left;
		padding: 5px;
	}
	.sinfonia-mid
	{
		justify-content: flex-start;
		flex-basis: 13%;
		text-align: left;
		padding: 5px;
	}
	.sinfonia-right
	{
		justify-content: flex-start;
		flex-basis: 74%;
		text-align: left;
		padding: 5px;
	}
	/* analysis index layout */
	.analysis-index-container
	{
		display: flex;
		width: 100%;
		justify-content: space-between;
	}
	.analysis-index-left
	{
		justify-content: flex-start;
		flex-basis: 25%;
		text-align: left;
	}
	.analysis-index-right
	{
		justify-content: flex-start;
		flex-basis: 75%;
		text-align: left;
	}
	/* butterley flex layout */
	.butterley-container
	{
		display: flex;
		width: 100%;
		justify-content: space-between;
		padding: 0;
		gap: 3rem;
	}
	.butterley-left
	{
		justify-content: flex-start;
		flex-basis: 35%;
		text-align: left;
	}
	.butterley-right
	{
		justify-content: flex-start;
		flex-basis: 65%;
		text-align: right;
	}
	/* Other elements */
	.excerpts
	{
		max-width: 100%;
	}
	figcaption
	{
		font-size: 0.75em;
	}
	.small-screen
	{
		display: none;
	}
	.hidden
	{
		display: inline-block;
	}
	.reveal
	{
		display: none;
	}
	.analysis-title a:hover, 
	.analysis-title a:focus
    {
        border-bottom: 1px solid var(--red);
    }
}