body {
  font-family: 'Segoe UI', sans-serif;
  background-color: black;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

main {
    background-image: url('../menu_curve3A.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 2rem;
}

.divider {
    background-image:url('../divider.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 8em;
    margin: 3em auto 3em auto;
    opacity: .25;
}

section {
    color: white;
    width: 80%;
    margin: auto;
}

section p {
    text-indent: 2em;
}

h1 {
    color: black;
    text-align: center;
    text-decoration: underline;
}

h2, h3 {
    color: white;
    text-align: center;
}

.playgroundMap {
    display: block;
    margin: auto;
    max-width: 80%;
    height: auto;
}

.playGroundImage {
    float: left;
    margin: .5em 1.5em .5em .5em;
    width: 15em;
}

.kijoImage {
    float: right;
    margin: .5em .5em .5em 1.5em;
    width: 10em;
}

.copyRight {
    text-align: right;
    color: gray;
    font-size: 0.6em;
    margin: 2em 0;
}

.legendContainer {
    position: absolute;
    border: .2em solid white;
    background-color: yellow;
    padding: 1em;
    margin: auto;
    width: fit-content;
    right: 16em;
    top: 44em;
    transform: scale(35%);
}

/* .legendContainer h1 {
    text-decoration: underline;
    color: black;
} */

.legendForMap {
    margin: .2em auto;
    display: flex;
    width: 25em;
}

.legendForMap div {
    padding: 0 0.5em;
    margin: auto;
    object-fit: cover;
    flex: 1;
}

.legendForMap div img {
    width: 100%;
}

.legendText {
    color: black;
    text-align: center;
    font-size: 1.5em;
    margin-top: 0.2em;
}

.dungeonMasterBox {
    position: relative;
    width: 76em;
    background-color: lemonchiffon;
    border: .2em solid gray;
    font-size: .8em;
    margin: auto;
    padding: 2em;
    color: black;
}

.previous, .next {
    width: 6em;
    height: 1.4em;
    margin: auto;
    color: white;
}

.previous a, .next a {
    color: white;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 1.4em;
    text-align: center;
}

@media (max-width: 1200px) {
    .legendContainer {
        top: 49em;
        right: 1em;
        transform: scale(25%);
    }
    .dungeonMasterBox {
        width: 100%;
        padding: 1em;
    }
    .divider {
        margin: 3em 0 3em 4em;
    }
}


@media (max-width: 768px) {
    .playgroundMap {
        max-width: 100%;
    }
    .legendContainer {
        top: 66em;
        right: -9em;
        transform: scale(10%);
    }
    .dungeonMasterBox {
        width: 100%;
        padding: 1em;
    }
    .divider {
        margin: 3em 0 3em 2em;
    }
}