:root {
    /* Size */
    --poster-width: 841mm;
    --poster-height: 1189mm;

    /* Color */
    --primary-color: #8fc231;
    --secondary-color: #689f39;

    /* Fonts */
    --font-sans: "Noto Sans", "Noto Sans JP", "Noto Sans Emoji", "Noto Sans Math", ui-sans-serif, sans-serif;
    --font-serif: "Noto Serif", "Noto Serif JP", ui-serif, serif;
    --font-mono: "Noto Mono", ui-monospace, monospace;

    --title-font-size: 96px;
    --author-font-size: 54px;
    --affiliation-font-size: 54px;
    --section-title-font-size: 64px;
    --subsection-title-font-size: 36px;
    --poster-content-font-size: 24px;

    --frame-padding: 64px 96px;
    --title-padding: 48px;
    --author-affiliation-gap: 24px;
    --content-gap: 64px;
    --section-title-padding: 36px 48px;
    --section-content-padding: 24px 48px;
    --title-content-gap: 48px;
    --list-padding: 0 0 8px 0;

    --num-columns: 2;
}

body {
    font-family: var(--font-sans);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
}

#title {
    position: absolute;
    box-sizing: border-box;

    height: 10vh;
    width: calc(100vw - 100vh * var(--poster-width) / var(--poster-height));
}

#title h1 {
    font-size: 5vh;
    margin: 0;
    padding: 1.25vh;
    text-align: center;
}

#editor {
    position: absolute;
    box-sizing: border-box;

    height: 90vh;
    width: calc(100vw - 100vh * var(--poster-width) / var(--poster-height));

    top: 10vh;
}

#preview {
    position: absolute;
    box-sizing: border-box;


    height: 100vh;
    width: calc(100vh * var(--poster-width) / var(--poster-height));

    /* 
    display size:
        height: 100vh;
        width: calc(100vh * var(--poster-width) / var(--poster-height));
    */

    top: 0;
    left: calc(100vw - 100vh * var(--poster-width) / var(--poster-height));
}

#poster {
    height: var(--poster-height);
    width: var(--poster-width);

    padding: var(--frame-padding);
    /* white-space: wrap; */
    box-sizing: border-box;

    transform-origin: top left;
    transform: scale(calc(100vh / var(--poster-height)));

    display: flex;
    flex-direction: column;
    gap: var(--title-content-gap);
}

#poster header#poster-header {
    background-color: var(--primary-color);
    color: white;
    padding: var(--title-padding);
    flex: 0 0 auto;
}

#poster header#poster-header h1#poster-title {
    text-align: center;
    font-size: var(--title-font-size);
    margin: 0;
    margin-bottom: var(--title-padding);
}

#poster header#poster-header #poster-author {
    display: flex;
    justify-content: center;
    gap: var(--author-affiliation-gap);
}

#poster header#poster-header #poster-author p {
    margin: 0;
    font-size: var(--author-font-size);
}

#poster header#poster-header #poster-affiliation {
    display: flex;
    justify-content: center;
    gap: var(--author-affiliation-gap);
}

#poster header#poster-header #poster-affiliation p {
    margin: 0;
    font-size: var(--affiliation-font-size);
}

#poster main#poster-main {
    flex: 1 1 auto;
    min-height: 0;

    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: var(--content-gap);
}

#poster main#poster-main .poster-section {
    width: calc((100% - (var(--num-columns) - 1) * var(--content-gap)) / var(--num-columns));
}

#poster main#poster-main .poster-section h2 {
    color: white;
    background-color: var(--primary-color);
    padding: var(--section-title-padding);
    font-size: var(--section-title-font-size);
    margin: 0;
}

#poster main#poster-main .poster-section .poster-content {
    padding: var(--section-content-padding);
}

#poster main#poster-main .poster-section .poster-content p {
    margin: 0;
    text-align: justify;
    font-size: var(--poster-content-font-size);
}

#poster main#poster-main .poster-section .poster-content p strong {
    color: var(--secondary-color);
}

#poster main#poster-main .poster-section .poster-content h3 {
    color: var(--secondary-color);
    font-size: var(--subsection-title-font-size);
    font-weight:bold;
}

#poster main#poster-main .poster-section .poster-content > h3:first-child {
    margin-top: 0;
}

#poster main#poster-main .poster-section .poster-content table {
    width: 100%;
    margin: 24px 0;
    border: 2px solid black;
    border-width: 2px 0;
    border-collapse: collapse;
}

#poster main#poster-main .poster-section .poster-content table th {
    border-bottom: 1px solid black;
}

#poster main#poster-main .poster-section .poster-content table th,
#poster main#poster-main .poster-section .poster-content table td {
    font-size: var(--poster-content-font-size);
    text-align: center;
}

#poster main#poster-main .poster-section .poster-content li {
    font-size: var(--poster-content-font-size);
    padding: var(--list-padding);
}

#poster main#poster-main .poster-section .poster-content li::marker {
    color: var(--secondary-color);
}

#poster main#poster-main .poster-section .poster-content .poster-content-row {
    display: flex;
    gap: var(--content-gap);
}

#poster main#poster-main .poster-section .poster-content .poster-content-column {
    display: block;
}

@media print {
    body {
        width: var(--poster-width);
        height: var(--poster-height);
    }

    #title, #editor {
        display: none;
    }

    #preview {
        display: block;
    }

    #poster {
        transform: none;
        width: var(--poster-width);
        height: var(--poster-height);
    }
}