:root {
    --bg-color: #403c38;
    --bg-transparent: rgba(64, 60, 56, 0.8);
    --fg-color: #d4c7b4;
    --fg-transparent: rgba(212, 199, 180, 0.3);
    --hl01-color: #c73e1d;
    --hl02-color: #908577;
    --hl03-color: #676058;
    --hl04-color: #262421;

    --ff-body: 'Times New Roman', Times, serif;
    --ff-heading: Arial, Helvetica, sans-serif;
    --ff-nav: Arial, Helvetica, sans-serif;

    --fs-xxl: 6rem;
    --fs-xl: 2rem;
    --fs-l: 2rem;
    --fs-m: 1.5rem;
    --fs-s: 1rem;
    --fs-xs: 0.5rem;

    --general-max-width: 90%;
}

@media screen and (min-width: 1280px) {
    :root {
        --fs-xxl: 6rem;
        --fs-xl: 2.5rem;
        --fs-l: 2rem;
        --fs-m: 1.5rem;
        --fs-s: 1rem;
        --fs-xs: 0.5rem;

        --general-max-width: 50%;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-size: var(--fs-m);
    line-height: 1.25;
    color: var(--fg-color);
    background-color: var(--bg-color);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-heading);
    margin-bottom: var(--fs-s);
}

p {
    margin-bottom: var(--fs-s);
}

.wrapper {
    display: grid;
    justify-items: center;
    gap: var(--fs-m);
}

header {
    font-size: var(--fs-xl);
    color: var(--hl01-color);
    text-align: center;
    line-height: 1;
    width: 100%;
    background: linear-gradient(var(--fg-transparent), var(--fg-transparent)),
                url(/image/header.webp);
    background-position: 15% 15%;
    background-repeat: no-repeat;
    padding-block: var(--fs-xxl) var(--fs-m);
    border-bottom: 6px solid var(--fg-color);
}

@media screen and (min-width: 1280px) {
    header {
        padding-block: var(--fs-xl);
        text-align: right;
    }
}

.blured-background {
    filter: blur(10px);
    background-color: var(--bg-transparent);
}

header > h1 {
    margin: 0 auto;
    background-color: var(--bg-transparent);
    border-radius: 2px;
    padding: var(--fs-s);
    max-width: 90%;
}


@media screen and (min-width: 1280px) {
    header > h1 {
        max-width: min-content;
        margin-right: 5%;
    }
}


main {
    display: grid;
    justify-items: center;
    align-items: center;
    gap: var(--fs-m);

    /* border: 2px solid steelblue; */
}

section {
    max-width: var(--general-max-width);

    /* border: 2px dotted hotpink; */
}

.overflow-wrapper {
    overflow-y: auto;
}

#imagemap {
    max-width: 100%;
}

.imagemap-toggel-label {
    display: inline-block;
    color: var(--bg-color);
    background-color: var(--hl02-color);
    border: 2px solid var(--hl03-color);
    border-radius: 6px;
    width: calc(var(--fs-xl)*2);
    margin-top: var(--fs-xs);
    cursor: pointer;
    user-select: none;
}

.imagemap-toggel-label img {
    width: var(--fs-xl);
    vertical-align: middle;
}

.imagemap-toggel {
    position: absolute;
    left: -9999px;
    z-index: -1;
}

.imagemap-toggel:checked ~ #imagemap-marker-toggel-label {
    color: var(--fg-color);
    background-color: var(--hl03-color);
}

.imagemap-toggel:checked ~ #imagemap-fit-page-toggel-label {
    color: var(--fg-color);
    background-color: var(--hl03-color);
}

@media screen and (max-width: 480px) {
    #imagemap-fit-page-toggel {
        display: none;
    }

    #imagemap-fit-page-toggel-label {
        display: none;
    }
}

@media screen and (min-width: 1280px) {
    #imagemap-zoom-toggel {
        display: none;
    }

    #imagemap-zoom-toggel-label {
        display: none;
    }
}

summary {
    font-family: var(--ff-nav);
    text-align: center;
    margin: var(--fs-s) 0;
    user-select: none;
    cursor: pointer;
}

details[open] summary {
    color: var(--hl02-color);
}

nav {
    background-color: var(--hl04-color);
    max-width: 100%;
    width: 100%;
    margin-top: var(--fs-m);

    /* border: 2px solid peru; */
}

nav > ul {
    list-style-type: none;
}

nav > ul > li {
    display: inline-block;
    margin: 0 var(--fs-xs);
}

nav > ul > li > a {
    font-family: var(--ff-nav);
    color: var(--hl03-color);
    text-decoration: none;
}


footer {
    padding: 0 0 calc(var(--fs-xxl)*1.5);
    background-color: var(--hl04-color);
    width: 100%;
    max-width: 100%;

    /* border: 2px solid firebrick; */
}

/* Utility Classes */

.center {
    text-align: center;
}