.wrapper{
    margin: auto;
}

body{
    margin: 0px;
}

nav{
    border-style: solid;
    border-color: #15493d;
}

main{
    margin: auto;
}

footer{
    display: flex;
    justify-content: space-between;
    margin: auto 2%;
}

ul{
    list-style: none;
    display: flex;
    justify-content:space-evenly;
    align-items: center;
    text-align: center;
    margin: 1% auto;
    padding: 0;
}

li{
    font-family: sans-serif;
    text-align: center;
    align-items: center;
}

a{
    text-decoration: none;
    font-size: 1.2em;
    color: black;
}

a:hover{
    color: #15493d;
}

header{
    background-color: #99c8b6;
    margin: 0px;
}

h1{
    font-family: sans-serif;
}

h2{
    font-family: sans-serif;
}

p{
    font-family: sans-serif;
    font-size: 1.2em;
}

.a{
    grid-area: a;
    margin: auto;
}

.b{
    grid-area: b;
    margin: auto;
}

.c{
    grid-area: c;
    margin: auto;
}

.d{
    grid-area: d;
    margin: auto;
}

.e{
    grid-area: e;
    margin: auto;
}

.f{
    grid-area: f;
    margin: auto;
}

.g{
    grid-area: g;
    margin: auto;
}

.home_main{
    width: 80%;
    margin: 4% auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas: 
    "a b"
    "c d"
    "e f";
}

.home_main .b{
    text-align: end;
}

.home_main .f{
    text-align: end;
}


.rulebooks_main{
    width: 80%;
    margin: 4% auto;
    display: grid;
    grid-template-columns: 20% 80%;
    grid-template-rows: repeat(3, auto);
    grid-template-areas: 
    "a a"
    "c b";
    row-gap: 2%;
}

.rulebooks_main .c{
    background-color: #99c8b6;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    width: 100%;
    height: 100%;
}

.rulebooks_main .b{
    background-color: azure;
    width: 100%;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

#rulebooks_grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas: none;
}

.product{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-template-areas: 
    "a a"
    "b c";
    background-color: #99c8b6;
    border-radius: 10px;
}

.product .b{
    background-color: inherit;
    border-radius: 0px;
    width: 80%;
}

.product .c{
    background-color: inherit;
    border-radius: 0px;
    text-align: end;
    height: min-content;
    width: 80%;
}

.product .a{
    display: block;
    margin: 2% auto;
}

.product img{
    display: block;
    border-radius: 10px;
    width: 95%;
    margin: auto;
}

#rulebooks_hero img{
    width: 70vw;
    display: block;
    margin: auto;
}

#rulebooks_hero h1{
    position: absolute;
    bottom: 45%;
    margin: 2%;
}

#rulebooks_hero p{
    position: absolute;
    bottom: 42%;
    margin: 2%;
    width: 70%;
}

#rulebooks_hero h2{
    position: absolute;
    bottom: 38%;
    margin: 2%;
}

.book_main{
    width: 80%;
    margin: 2% auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-template-areas: 
    "a a"
    "b d"
    "c ."
    "e e";
}

.book_main img{
    width: 70%;
}


.game_main{
    width: 70%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, auto);
    grid-template-areas: 
    "a a"
    "b c"
    "d e"
    "f f"
    "g g";
    justify-content: center;
}

.game_main h2{
    text-align: center;
    width: 100%;
}

.game_main img{
    display: block;
    margin: auto;
    width: 100%;
}

.game_main button{
    width: 30%;
    margin: 2% auto;
    font-size: 1.2em;
    font-family: sans-serif;
}

#mail_form{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-template-areas: 
    "a b c d"
    "e . . ."
    "f f f f"
    ". g g .";
    text-align: start;
    margin: auto;
    padding: 2%;
}

#mail_form textarea{
    width: 100%;
    height: 300px;
    margin: auto;
}

#mail_form button{
    padding: 2%;
    margin: 2% auto;
    font-size: 1.5em;
    width: 40%;
}

#mail_form{
    font-family: sans-serif;
}

.character_main{
    width: 80%;
    margin: auto;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.character_main iframe{
    margin: auto;
    width: 80%;
    height: 1350px;
    display: block;
    border-radius: 10px;
}

/** reactive styles **/

@media screen and (max-device-width: 600px) {

    a{
        font-size: 1.2em;
        text-align: center;
    }

    .home_main{
        grid-template-columns: 90%;
        grid-template-rows: repeat(6, auto);
        grid-template-areas: 
        "a"
        "b"
        "d"
        "c"
        "e"
        "f";
        margin: 2% auto 0;
        gap: 2%;
        overflow: auto;
        justify-content: center;
    }

    .home_main p{
        text-align: center;
        font-size: 1.3em;
        width: 100%;
    }

    .home_main h2{
        text-align: center;
        margin: auto;
    }

    .home_main h1{
        text-align: start;
        margin: auto;
    }

    .home_main img{
        display: block;
        width: 100%;
        margin: auto;
        padding: 0;
    }

    .character_main{
        width: 95%;
    }

    .character_main iframe{
        width: 100%;
        height: 1200px;
    }

    #rulebooks_hero{
        display: none;
    }

    .rulebooks_main{
        width: 95%;
        grid-template-columns: 100%;
        grid-template-rows: 15% auto;
        grid-template-areas:
        "c"
        "b";
        row-gap: 0px;
        overflow: auto;        
    }

    .rulebooks_main .c{
        border-radius: 0px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .rulebooks_main .b{
        border-radius: 0px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    #rulebooks_grid{
        grid-template-columns: 50% 50%;
        grid-template-rows: repeat(3, 1fr);
        justify-content: center;
        align-items: center;
    }

    .product{
        grid-template-columns: 100%;
        grid-template-rows: auto auto auto;
        grid-template-areas: 
        "a"
        "b"
        "c";
        justify-content: center;
        text-align: center;
        row-gap: 1%;
    }

    .product img{
        width: 95%;
        display: grid;
        margin: auto;
    }

    .product .b{
        font-size: 2em;
        font-family: sans-serif;
        text-align: center;
    }

    .product .c{
        text-align: center;
        width: 100%;
        margin: auto;
        font-family: sans-serif;
        font-size: 1.5em;
        margin: 0 0 4%;
    }

    .game_main{
        width: 95%;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(7, auto);
        grid-template-areas: 
        "a a"
        "b c"
        "d d"
        "e e"
        "f f"
        "g g";
        justify-content: center;
        margin: 2% auto;
        text-align: center;
        font-size: 1.3em;
    }

    #mail_form{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, auto);
        grid-template-areas: 
        "a b"
        "c d"
        "e ."
        "f f"
        "g g";
        justify-content: center;
        margin: 1% auto;
        text-align: center;
        font-size: 1.3em;
        row-gap: 3%;
    }

    textarea{
        border-radius: 10px;
        box-shadow: 10px 10px 10px;
    }

    input{
        width: 80%;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 10px 10px 10px;
    }

    .book_main{
        width: 95%;
        font-size: 1.5em;
    }

    .book_main img{
        width: 100%;
    }

    .book_main h1{
        font-size: 1.8em;
    }

}