/*fonts*/
@font-face {
    font-family: 'Sigmar One';
    font-style: normal;
    font-weight: 400;
    src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https://fonts.gstatic.com/s/sigmarone/v9/co3DmWZ8kjZuErj9Ta3do6Tppg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*media queries*/
@media only screen and (max-width: 600px) {
    .headerlinks h1 {
	font-size: 20px;
    }
}
@media only screen and (min-width: 600px) {
    .headerlinks h1 {
	font-size: 40px;
    }
}
@media only screen and (min-width: 1200px) {
    .headerlinks h1 {
	font-size: 80px;
    }
    .headerlinks ul li a {
	font-size: 30px;
	padding: 10px;
    }
}
body {
    margin: 0px 0px;
    background-color: aliceblue;
}
.headerlinks {
    width: 100%;
    background-color: aliceblue;
    position: relative;
    top: 0px;
}
.headerlinks h1 {
    text-align: center;
    color: white;
    text-shadow: 3px 3px 5px black;
    font-family: sans-serif;
}
.headerlinks ul {
    list-style-type: none;
    position: relative;
    width: 100%;
    text-align: center;
}
.headerlinks ul li {
    position: relative;
    display: inline-block;
    text-align: center;
    background-color: rgba(50, 50, 50, .5);
    width: 20%;
    margin: auto;
}
.headerlinks ul li a {
    color: white;
    text-decoration: none;
}
div[class*="content"] {
    padding: 10px;
}
.content-wrapper {
    position: relative;
    top: 0px;
    bottom: 100px;
    display: grid;
    grid-template: repeat(3, 500px) / auto auto;
    grid-row-gap: 30px;
    grid-column-gap: 5%;
    background-color: #777;
    padding: 20px 10px;
    height: 1560px;
}
.content {
    background-color: white;
    border: 3px solid black;
    color: black;
    grid-area: 2 / 2 / span 1 / span 1;
    height: 100%;
}
.content-dark {
    grid-area: 1 / 1 / span 1 / span 1;
}
.content-dark-2 {
    grid-area: 3 / 1 / span 1 / span 1;
}
.content-dark, .content-dark-2 {
    background-color: black;
    border: 3px solid white;
    color: white;
}
footer {
    position: relative;
    top: 0px;
    width: 100%;
    background-color: aliceblue;
}
footer ul {
    list-style-type: none;
    text-align: center;
}
footer ul li {
    display: inline-block;
    width: 10%;
    text-align: center;
}
footer ul li a {
    color: #333;
    font-family: sans-serif;
}