html {
    width: 100%;
}
body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-height: 100vh;
    margin: 0;
}

/* Header */

header{
    height: 4rem;
    z-index: 1;
}

/* Footer */

footer {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    text-align: right;

    min-height:10rem;
    padding: 1rem;
    margin-top: auto;
    z-index: 1;
}
footer address, footer section {
    margin-top: 1rem;
    padding: 0 1rem;
}

/* Main & content */

main {
    margin: 0 auto;
}

.main_main {
    display: grid;
    grid-template-areas: 'content_area aside_area';
    grid-gap: 1rem;
    /* max-width: 80rem; */
}

.content {
    grid-area: content_area;
    
    max-width: 50rem;
    min-width: 16rem;
    min-height: 65vh;
    padding: 4rem 20% 2rem 20%;
}

.last_update {
    float: right;
}

aside {
    grid-area: aside_area;
    text-align: right;
    padding: 2rem;
}

@media (max-width: 60rem) {

    main {
        margin: 0;
    }

    .main_main {
        grid-template-areas: 'aside_area' 'content_area';
        grid-gap: 2rem;
    }

    .content {
        min-width: auto;
        padding: 2rem;
    }

    aside {
        margin: 0 auto;
    }

    .capture {
        width: 90%;
        min-width: 100px;
    }
}

@media (max-width: 30rem) {
    footer {
        flex-direction: column;
    }
}

/* Other */

article, h2, h3, p, ul {
    margin-bottom: 2rem;
}

.capture {
    display: block;
    width: 65%;
    min-width: 300px;
    height: auto;
    margin: 2rem auto;
}
#img_difw {
    width: 30%;
    min-width: 200px;
}
video {
    max-width: 100%;
}

/* Game page */

.game_main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25rem;
    font-weight: bold;
}

.game_main p {
    text-decoration:double;
}