@font-face {
    font-family: 'Libre Baskerville';
    src: url('font/LibreBaskerville-VariableFont_wght.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
		font-variation-settings: "wght" 400;
}

@font-face {
    font-family: 'Libre Baskerville';
    src: url('font/LibreBaskerville-VariableFont_wght.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
		font-variation-settings: "wght" 700;
}

@font-face {
    font-family: 'Libre Baskerville';
    src: url('font/LibreBaskerville-Italic-VariableFont_wght.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
		font-variation-settings: "wght" 400;
}

@font-face {
    font-family: 'Libre Baskerville';
    src: url('font/LibreBaskerville-Italic-VariableFont_wght.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
		font-variation-settings: "wght" 700;
}

:root {
		--myvar: 1;
}

body {
		font-family: 'Libre Baskerville', serif;
		background: #c7cbc5 url("assets/bg2.jpg");

}
header {
		margin: 1rem 0 4rem 2rem;
		font-size: 1.3rem;
		@media screen and (width >= 700px) {
				max-width: 700px;
				margin: 1rem auto 4rem;
				padding-left: 2rem;
		}
}
header a{
		&:link, &:visited, &:active, &:hover {
				color: #0f3458;
				text-decoration: none;
		}
}

a {
		&:link, &:visited, &:active, &:hover {
				text-decoration: none;
		}
}

h1 {
		text-align: center;
		font-size: 2.7rem;
}
p.titleauthor, p.titlesource {
		text-align: center;
}
p.titleauthor {
		font-size: 1.4rem;
}

img.ornament {
		display: block;
		margin: 2rem auto;
		width: 25%;
		min-width: 300px;
}

hr {
		width: 15rem;
		margin: 3rem auto;
		border: none;
		border-top: 1px solid black;
}

article {
		width: 40%;
		min-width: 600px;
		margin: 3rem auto;
}

article p {
		font-size: 1.3rem;
		line-height: 1.7rem;
		margin-bottom: 0 0 1.5rem 0;
		text-indent: 1.5rem;
		text-align: justify;
		text-justify: inter-word;
}

article p span {
		font-variant-caps: small-caps;
}

article p:first-child {
		text-indent: 60%;
		background-image: url('assets/fa_ornament_3.svg');
		background-repeat: no-repeat;
		background-position: 50% -0.1rem;
		background-size: auto 1.8rem;
		overflow: visible;
}

article p:first-child::first-letter {
		display: inline-block;
		font-weight: bold;
		font-size: 2.8rem;
		line-height: 1.5rem;
		color: #901f25;
}

figure {
		width: 600px;
		margin: 3rem auto;
}
figure img {
		width: 600px;
		font-style: italic;
}

figure img.circ {
		clip-path: circle(48% at center);
}
figure img:not(.circ) {
		border: 6px double #999;
		border-radius: 1rem;
}
figure figcaption {
		font-size: 1.1rem;
		color: #0f3458;
		text-align: center;
		padding-top: 1rem;
}

hr.fin {
		margin: 2rem auto;
		border: 0;
		text-align: center;
		&:before {
				content: "\2756";
				font-size: 3rem;
				color: #111;
		}
}

@media screen and (width <= 620px) {
		h1 {
				font-size: 2.2rem;
		}
		p.titleauthor {
				font-size: 1.3rem;
		}
		article {
				width: auto;
				min-width: 0;
				margin: 2rem 1rem;
		}

		article p {
				font-size:1.2rem;
				line-height: 1.5rem;
		}
		article p:first-child {
				text-indent: 40%;
				background-position: 20% -0.1rem;
				background-size: auto 1.7rem;
		}
		article p:first-child::first-letter {
				line-height: 1.5rem;
				font-size: 2.5rem;
		}

		figure {
				width: auto;
				margin: inherit 2rem;
		}
		figure img {
				width: auto;
				max-width: 100%;
				height: auto;
		}
}