.grid-container {
    display: grid;
    grid-template-areas: 'header header header'
                         'nav monster01 monster01'
                         'nav monster02 monster02'
                         'nav monster03 monster03'
                         'nav monster04 monster04'
                         'nav monster05 monster05'
                         'nav monster06 monster06'
                         'nav monster07 monster07'
                         'nav monster08 monster08'
                         'nav monster09 monster09'
                         'nav monster10 monster10'
                         'nav monster11 monster11'
                         'nav monster12 monster12'
                         'nav monster13 monster13'
                         'nav card14 card14'
                         'nav magic01 magic01'
                         'nav magic02 magic02'
                         'nav magic03 magic03'
                         'nav magic04 magic04'
                         'nav magic05 magic05'
                         'nav trap01 trap01'
                         'nav trap02 trap02'
                         'nav trap03 trap03'
                         'nav trap04 trap04'
                         'nav card23 card23'
                         'nav card24 card24'
                         'footer footer footer';
    padding: 10px;
    gap: 10px;
}

nav {
    display: block;
    grid-area: nav;
    background-color: gray;
}
nav p#monster-card {
    font-weight: bold;
}
nav ul#monster-card-list {
    margin: 10px;
}
nav p#magic-card {
    font-weight: bold;
}
nav ul#magic-card-list {
    margin: 10px;
}
nav p#trap-card {
    font-weight: bold;
}
nav ul#trap-card-list {
    margin: 10px;
}

header {
    display: block;
    grid-area: header;
    text-align: center;
}

div.card {
    grid-area: card;
    text-align: left;
    margin: 10px;
}

div .card p.card-name {
    font-weight: bold;
}

div#monster01 {
    grid-area: monster01;
}
div#monster02 {
    grid-area: monster02;
}
div#monster03 {
    grid-area: monster03;
}
div#monster04 {
    grid-area: monster04;
}
div#monster05 {
    grid-area: monster05;
}
div#monster06 {
    grid-area: monster06;
}
div#monster07 {
    grid-area: monster07;
}
div#monster08 {
    grid-area: monster08;
}
div#monster09 {
    grid-area: monster09;
}
div#monster10 {
    grid-area: monster10;
}
div#monster11 {
    grid-area: monster11;
}
div#monster12 {
    grid-area: monster12;
}
div#monster13 {
    grid-area: monster13;
}
div#magic01 {
    grid-area: magic01;
}
div#magic02 {
    grid-area: magic02;
}
div#magic03 {
    grid-area: magic03;
}
div#magic04 {
    grid-area: magic04;
}
div#magic05 {
    grid-area: magic05;
}
div#trap01 {
    grid-area: trap01;
}
div#trap02 {
    grid-area: trap02;
}
div#trap03 {
    grid-area: trap03;
}
div#trap04 {
    grid-area: trap04;
}

img.card-image{
    width: 200px;
    height: 290px;
}

footer {
    display: block;
    grid-area: footer;
    text-align: center;
}