@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap');

html, body
{
 margin: 0;
 padding: 0;
 font-family: "Cormorant Garamond", Garamond, "Times New Roman", serif;
 font-size: calc(0.8em + 0.5vw);
 letter-spacing: 0.006em;
 color: #212121;
 border-top: 2px solid #c8102e;
 background-color: #fff;
}

h1, h2, h3, h4, h5, h6
{
 font-weight: 500;
 font-family: "EB Garamond", Garamond, "Times New Roman", serif;
 text-transform: uppercase;
 color: #323232;
}

h3
{
 border-bottom: 1px dotted #999;
 font-size: 1.3em;
 letter-spacing: 0.02em;
 padding: 0 0 0.2em 0.2em;
 font-size: 1.5em;
}

h4
{
 border-bottom: 1px dotted #ccc;
 font-family: "Libre Caslon Text", "Times New Roman", Times, serif;
 letter-spacing: 0.05em;
 margin: 2em 0 1em 0;
 padding: 0 0 0.2em 0.4em;
}

h4, h5, h6
{
 font-family: "Libre Caslon Text", "Times New Roman", Times, serif;
}

a:hover
{
 text-decoration: none;
}

header
{
 width: 50%;
 margin: 0 auto;
 font-size: 1.1em;
}

header h1
{
 margin: 0 auto;
 text-align: center;
 padding: 0;
}

header h1 img
{
 width: 6em;
 margin: 2em 0 0 0;
}

header
{
 text-align: center;
}

header h2
{
 font-family: "Libre Caslon Text", "Times New Roman", Times, serif;
 letter-spacing: 0.05em;
}

header p
{
 text-transform: uppercase;
 font-size: 0.9em;
}

main#intro
{
 width: 60%;
 margin: 0 auto;
}

main#intro h2
{
 font-size: 1.4em;
 text-align: center;
 margin-top: 2em;
}

section.project
{
 margin: 2em 0 3em 0;
}

section.project h3
{
 font-size: 1em;
}

section.project p
{
 font-size: 0.9em;
}

section.project ul
{
 margin: 0;
 padding: 0;
}

section.project ul li
{
 margin: 0.2em 0 0 2.5em;
 padding: 0;
 font-size: 0.8em;
}


footer
{
 grid-area: footer;
 margin: 10em auto 5em auto;
 text-align: center;
 font-family: "Caslon Text", "Times New Roman", Times, serif;
 font-style: italic;
 color: #999;
}

footer p#rat
{
 color: #ddd;
}

footer p img
{
 width: 7em;
 margin: 2em 0 0 0;
}


@media all and (max-width: 480px)
{
 footer
 {
  font-size: 0.7em;
 }
 section.project ul li
 {
  margin: 0.2em 0 0 1.5em;
 }
}