body {
    font-family: Georgia, "Times New Roman", serif;
    background: linear-gradient(#d9e7f2,#eef5fa);
    color:#222;
    max-width:85%;
    margin:40px auto;
    padding:30px;
    line-height:1.6;
}

ol {
    padding-left: 1.5em;
}

li {
    margin-bottom: 1.2em;
}

ul {
    margin-top: 0.4em;
}

.reference {
    font-style: italic;
    color: #666;
}

h1{
    text-align:center;
    color:#1f4e79;
    margin-bottom:0;
}

h2{
    text-align: center;
    color:#2f6690;
    border-bottom:2px solid #9fbcd3;
    padding-bottom:4px;
    font-size: 110%;
}

.subtitle{
    text-align:center;
    font-style:italic;
    color:#666;
    margin-top:4px;
    margin-bottom:40px;
}

blockquote{
    margin:20px 40px;
    padding-left:20px;
    border-left:4px solid #7fa6c2;
    color:#444;
    font-style:italic;
}

ul{
    margin-left:25px;
}

.footer{
    margin-top:50px;
    text-align:center;
    color:#777;
    font-size:0.9em;
}
.logo {
    display: block;
    margin: 1.5em auto 2em auto;
    max-width: 320px;
    width: 100%;
    height: auto;
    margin-bottom: 48px;
}
/************************************************************/
/* MAIN CONTENT                                             */
/************************************************************/

.page-content {
    margin-left: 280px;
    padding: 48px 32px 80px;
    max-width: 1200px;
}

.hero {
    background: rgba(16,32,48,.96);
    border: 1px solid var(--border);
    border-radius: 24px;

    padding: 42px;
    margin-bottom: 34px;
}

.card {
    background: rgba(17,24,39,.12);
    border: 1px solid var(--border);
    border-radius: 18px;

    padding: 24px;
    margin-bottom: 24px;
	text-align: center;
}

.grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit,minmax(300px,1fr));
    gap: 22px;
	margin-left: auto;
	margin-right: auto;
}