@charset "utf-8";

:root {
    --door-color: black;
    --door-shadow: gray;
    --nano-white: rgba(247, 251, 254, 1);
    --bg-color: rgba(218, 236, 243, 1);
    --bg-color2: #B8928B;
    --frame-color: #DBC0D9;
    --h2-color: #D788AF;
    --font-color: #927EAF;
    --font-zen: 'Zen Maru Gothic', sans-serif;
}

body {
    background-color: var(--bg-color);
    background-image: url(../img/bg/mainbg4.png);
    background-size: 330px;
}

main {
    margin: 0 auto 40px;
}

main section {
    position: relative;
    width: 800px;
    max-width: 100%;
    margin: 0 auto;
}

section h2 {
    z-index: 2;
    position: absolute;
    width: max-content;
    top: -15px;
    right: 5px;
    color: var(--h2-color);
    padding: 0px 10px 5px;
    border-radius: 6px;
    border: 2px solid var(--h2-color);
    background-color: var(--nano-white);
    box-shadow: 1px 2px 5px var(--door-shadow);
    font-weight: bold;
    font-family: var(--font-zen);
    font-weight: 900;
}

section dl {
    display: grid;
    grid-template-columns: 1fr 6fr;
    row-gap: 0.95em;
    color: var(--font-color);
    margin: 41px auto 100px;
    padding: 2.5em 1.5em 3em;
    background-color: rgba(247, 251, 254, 0.7);
    border-radius: 11px;
    border: 2px solid var(--font-color);
    box-shadow: 1px 1px 4px var(--door-shadow);
    font-family: var(--font-zen);
}
.anchor{
    text-decoration: underline;
}
#birth {
    cursor: pointer;
    text-decoration: underline;
}

#message::selection {
background-color: transparent;
}

@media (max-width: 800px) {
    body {
        background-size: 220px;
    }

    section h2 {
        right: 6px;
    }

    section dl {
        display: block;
        margin: 31px auto 86px;
        padding: 2.5em 0.8em 3em;
    }

    section dt {
        margin-bottom: 5px;
    }

    section dd {
        padding-left: 0.7em;
        margin-bottom: 0.95em;
    }

    section dd:last-child {
        margin-bottom: 0;
    }
}