.grid-container {
    min-height: 100vh;
    display: grid;
    float: none;
    overflow: hidden;
    box-sizing: border-box;
    grid: 'header' 90vh
        'aboutmap'  auto
        'map' auto
        'aboutusrules' auto
        'recipes' auto
        'discord' auto
        'whitelist' auto
        'footer' auto
        / 100%;
}

@media (min-width: 65em) {
    .grid-container {
        grid: 'header header' 90vh
        'aboutmap map'  auto
        'aboutusrules aboutusrules' auto
        'recipes recipes' auto
        'discord discord' auto
        'whitelist whitelist' auto
        'footer footer' auto
        / 50% 50%;
    }
}

body {
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0;
}

.header {
    grid-area: header;
    position: absolute;
    top: 0;
    background-image: url("../images/backgroundscreenshot.webp");
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 90vh;
    text-align: center;
    color: white;

    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
}

h2:after {
    /* Create a small line under h2 */
    content: "";
    display: block;
    height: 1px;
    margin-top: 1em;
    width: 6em;
    background-color: currentColor;
    text-align: center;
}

.discord > h2:after, .whitelist > h2:after {
    margin: 1em auto auto;
}

a {
    text-decoration: none;
    color: rgba(49, 49, 49, 0.84);
    transition: all 0.2s ease-in-out;
    border-bottom: dotted 1px currentColor;
}

.discord > a {
    color: white;
}

a:hover {
    color: aqua;
}

.abyss {
    color: #bf3f3f;
    font-weight: 400;
    font-size: 65px;
    text-shadow: 0 2px #191919;
    margin: 0;
}

.subheader {
    text-shadow: 2px 2px #696969;
    font-size: 42px;
    font-weight: 500;
    margin: 0;
}

.join {
    color: #00f2c2;
    font-weight: 700;
    text-shadow: 0 2px #191919;
    font-size: 26px;
    margin: 0;
}

.align-center {
    text-align: center;
}

.about-map {
    grid-area: aboutmap;
    padding: 35px;
    font-size: 24px;
}

.map-image {
    grid-area: map;
    width: 90%;
    height: 90%;
    margin: 5%;
    object-fit: cover;
    overflow: hidden;
}

.rulesaboutus {
    grid-area: aboutusrules;
    display: grid;
    float: none;
    overflow: hidden;
    box-sizing: border-box;
    padding: 3em 0;
    background: rgb(156, 156, 156);
    background: linear-gradient(0deg, rgba(156, 156, 156, 1) 0%, rgba(210, 210, 210, 1) 100%);
    background-attachment: fixed;
    grid: 'aboutus' 50%
        'rules' 50%
        / 100%;
}

@media (min-width: 65em) {
    .rulesaboutus {
        grid: 'aboutus rules' 100%
        / 50% 50%;
    }
}

.rules {
    grid-area: rules;
    font-size: 24px;
    padding: 18px;
}

.aboutus {
    grid-area: aboutus;
    font-size: 24px;
    padding: 18px;
}

.recipes {
    grid-area: recipes;
    padding: 18px;
}

.discord {
    grid-area: discord;
    color: white;
    text-align: center;
    background: rgb(67, 80, 93);
    background: radial-gradient(circle, rgba(67, 80, 93, 1) 0%, rgba(7, 13, 23, 1) 100%);
    background-attachment: fixed;
    padding: 5em 0;
}

.whitelist {
    grid-area: whitelist;
    color: darkslategrey;
    text-align: center;
    padding: 2em 0;
}

.serverIP {
    display: inline-block;
}

.downloads {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.footer {
    grid-area: footer;
    background-color: black;
    color: white;
    padding: 0 1em;
}

.flex-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
}

.crafting-recipes > img {
    border: 3px solid black;
    background: black;
    margin: 0 5px;
    width: 300px;
    height: 130px;
}