*{
    margin: 0 0;
}

/* --- NAV CONTENT --- */

nav {
    display: flex;
    grid-template-columns: 1fr;
    margin-bottom: 110px;
}

    nav a {
        font-size: 17px;
        color: #ffffff;
        font-family: coop-reg;
        letter-spacing: 2px;
        text-decoration: none;
    }

    .nav_links {
        text-align: right;
        word-spacing: 24px;
        width: 100%;
    }

        .nav_links a:hover {
            opacity: 45%;
            transition: .3s;
        }

        .nav_links-here {
            opacity: 45%;
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 7px;
        }

    .nav_logomark {
        font-size: 17px;
        color: #ffffff;
        font-family: coop-reg;
        letter-spacing: 2px;
        text-decoration: none;
        display: inline-block;
        margin-left: 24px;
        width: 100%;
    }
    
        .nav_logomark a {
            text-align: left;
            word-spacing: 2px;
        }

    .nav_muninn-logo {
        text-align: left;
        border: none;
        width: 92px;
        height: 92px;
        margin-top: -64px;
        display: flexbox;
    }

/* --- WEB BODY CONTENT --- */

    body {
        margin: 0px;
        background-color: #313338;
    }

        main {
            margin: 4% 25%;
            background-color: #313338;
        }
    
    section {
        margin-bottom: 40px;
    }

    hr {
        background-color: #2B2D31;
        color: #2B2D31;
        border: 2px solid;
        margin-bottom: 42px;
    }

    .spacer {
        height: 36px; /* Use this tag to add space between elements. */
    }

    img {
        width: 100%;
        margin: 26px 0px 8px 0px;
        border: 2px solid #000000;
    }

        .no-border {
            width: 680px;
            margin: 28px 0px 18px 0px;
            border: none;
        }

        .no-class {
            margin: 0px;
            border: 2px solid #000000;
            border: none;
            padding: 4px;
        }
    
    .center-box {
        text-align: center;
    }
    
    footer {
        padding: 2% 25%;
    }
    
    
/* divs and grids */

    .grid-games {
        margin-top: 28px;
        display: flexbox;
    }

        .grid-games a:hover {
            opacity: 35%;
            transition: .45s;
        }
    
    .grid-games-02 {
        margin-top: 28px;
        column-gap: 14px;
        row-gap: 14px;
        display: grid;
        text-align: center;
        grid-template-columns: 1fr 1fr;
    }

    .grid-games-02 a:hover {
        opacity: 35%;
        transition: .3s;
    }

        .grid-games-02 h2 {
            font-size: 24px;
            color: #ffffff;
            font-family: coop-l;
            letter-spacing: 6px;
            margin-top: 4px;
            margin-bottom: 4px;
        }

        .grid-games-02 p {
            font-size: 16px;
            color: #ffffff;
            font-family: coop-reg;
            letter-spacing: 1px;
            line-height: 28px;
        }

        .grid-games-02 a {
            text-decoration: none;
        }

        .game-box {
            width: 400px;
            text-align: center;
            padding: 4px 30px 20px 30px;
            background-color: #44454d;
        }

        .game-box img {
            border: none;
        }

    .grid-character {
        display: grid;
        grid-template-columns: 35% 66%;
        width: 100%;
    }
    
        .grid-character_box {
            width: auto;
            margin-top: 26px;
        }

        .grid-character_box img {
            width: 100%;
            border: none;
            margin: 0px;
        }

        .grid-character_box h3 {
            font-size: 26px;
            color: #ffffff;
            font-family: coop-l;
            letter-spacing: 4px;
            margin-top: 0px;
            padding-left: 35px;
        }

        .grid-character_box p {
            font-size: 19px;
            color: #ffffff;
            font-family: coop-reg;
            letter-spacing: 1px;
            line-height: 33px;
            padding-left: 35px;
        }

/* font design */

    h1 {
        font-size: 48px;
        color: #ffffff;
        font-family: coop-l;
        letter-spacing: 4px;
        margin-bottom: 10px;
        text-align: center;
    }

    h2 {
        font-size: 26px;
        color: #ffffff;
        font-family: coop-l;
        letter-spacing: 4px;
        margin-top: 0px;
        margin-bottom: 14px;
    }

    p {
        font-size: 19px;
        color: #ffffff;
        font-family: coop-reg;
        letter-spacing: 1px;
        line-height: 33px;
        padding: 9px 0px;
    }

        ul {
            text-decoration: none;
            margin-top: 9px;
        }

        li {
            font-size: 19px;
            color: #ffffff;
            font-family: coop-reg;
            letter-spacing: 1px;
            line-height: 33px;
        }
    
    figcaption {
        text-align: left;
        font-size: 18px;
        color: #b9b9b9;
        font-family: coop-reg;
        letter-spacing: 1px;
        line-height: 28px;
        padding: 6px 0px 22px 0px;
    }
    
    .update { /* used for the font at the end of articles designated the date */
        font-size: 15px;
        color: #ffffff;
        font-family: coop-reg;
        letter-spacing: 1px;
        line-height: 33px;
        padding: 9px 0px;
    }


/* font family */

    @font-face {
        src: url(font/CooperHewitt-Light.otf);
        font-family: coop-l;
    }

    @font-face {
        src: url(font/CooperHewitt-Book.otf);
        font-family: coop-reg;
    }

    @font-face {
        src: url(font/CooperHewitt-Medium.otf);
        font-family: coop-med;
    }

    @font-face {
        src: url(font/CooperHewitt-Bold.otf);
        font-family: coop-b;
    }

/* --- FOOTER --- */

footer {
    margin: none;
    background-color: #2B2D31;

    font-size: 16px;
    color: #ffffff;
    font-family: coop-reg;
}