body {
    background: black;
    background: url('https://drive.dhog.org/images/hvl/2021/back.jpg');
    font-family: Georgia, 'Times New Roman', Times, serif;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
}
@font-face {
	font-family: potter;
	src: url(./fonts/potter.ttf);
}
@font-face {
	font-family: abri;
	src: url(./fonts/abri.ttf);
}
header {
    width: 100%;
    display: flex;
    align-items: flex-start;
    font-family: potter;
}
.main-menu {
    flex-grow: 1;
}
main, footer {
    width: 100%;
    max-width: 980px;
    background: #e4d6c7e6;
    margin: 0 auto;
}
main {
    box-sizing: border-box;
    padding: 0 20px 30px 20px;
}
.content h1,
.list h1 {
    text-align: center;
    margin-top: 0;
    font-family: potter;
    font-size: 85px;
    font-weight: 400;
    text-align: center;
    display: block;
    text-decoration: none;
    line-height: 50px;
    text-shadow: 0 6px 8px #00000047;
    color: white;
    margin-bottom: 0;
    position: relative;
    top: -30px;
}

.list article a {
    font-family: abri;
    font-size: 38px;
    font-weight: 700;
    text-align: center;
    display: block;
    text-decoration: none;
}
.list a:hover {
    text-decoration: underline;
}
.content {
    font-family:georgia,serif;
    font-size:large;
    color: #4a410d;
    font-size: 15px;
}
.content a {
    color: #a16221
}
article {
    font-family: patrick hand,cursive;
    font-weight: 400;
}
.review {
    margin: 10px 0 25px 0;
}
.review-author {
    text-align: right;
    font-weight: bold;
}
.portrait {
    max-width: 300px;
    margin: 0 auto;
    display: block;
    margin-top: 15px;
}

.list a:nth-child(odd) {
    color: #595959
}
.list a:nth-child(even) {
    color: #fff
}

.gryffindor-list a:nth-child(odd) {
    color: #C8830E
}
.gryffindor-list h1,
.gryffindor-content h1,
.gryffindor-list a:nth-child(even) {
    color: #A30303
}

.hufflepuff-list a:nth-child(odd) {
    color: #595959
}
.hufflepuff-list h1,
.hufflepuff-content h1,
.hufflepuff-list a:nth-child(even) {
    color: #C8830E
}

.slytherin-list a:nth-child(odd) {
    color: #595959
}
.slytherin-list h1,
.slytherin-content h1,
.slytherin-list a:nth-child(even) {
    color: #407C51
}

.ravenclaw-list a:nth-child(odd) {
    color: #C8830E
}
.ravenclaw-list h1,
.ravenclaw-content h1,
.ravenclaw-list a:nth-child(even) {
    color: #003A96
}

.nav {
    font-size: 14px;
    display: inline-block;
    padding: 10px 11px;
    margin: 20px 0 0 0;
    background: #ffc68f70;
    border: 2px solid #3f2610;
    border-radius: 13px;
    text-decoration: none !important;
    color: #38260e !important;
    -webkit-text-stroke: 0 !important; 
}
.nav + .nav {
    margin-left: 20px;
}

.faces-list a, .teachers-list a {
    color: #333;
}
.collectivno p:first-child {
    font-weight: bold;
    text-decoration: underline;
}

.footer-border {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    border-top: 4px dotted black;
}
footer {
    text-align: center;
    padding: 20px 25px;
    box-sizing: border-box;
}

/* FACES STYLES */
header {
    text-align: center;
}
.header-title {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 237px;
}
.header-title a, .header-title a:visited  {
    color: #dab796 !important;
    text-decoration: none;
}
.header-title > * {
    position: absolute;
}
svg {
    width: 232px;
    height: 237px;
    -webkit-filter: drop-shadow( 0 -18px 11px rgba(0, 0, 0, .7));
    filter: drop-shadow( 0 -18px 11px rgba(0, 0, 0, .7));
    transform: rotate(180deg);
}
.top-faces {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    row-gap: 40px;
    column-gap: 80px;
    width: 100%;
    justify-content: center;
    padding-bottom: 25px;
}
.top-faces a {
    background: white;
    padding: 3px;
    width: max-content;
    display: flex;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}
.top-faces div {
    height: 310px;
    text-align: center;
    justify-self: center;
    align-content: flex-end;
}
.top-faces div:nth-child(3n + 2) {
    align-content: flex-start;
}
.top-faces img {
    width: 192px;
}