:root{
    --common-header-h1-color:           black;
    --common-header-h1-color-hover:     #619947;
    --common-header-height:             6em;
    --common-header-height-mini:        3.0em;
    --common-header-horizontal-padding: 2em;
    --common-header-vertical-padding:   1em;
    --common-main-horizontal-margin:    1em;
    --common-main-border-weight:        8px;
    --common-main-padding:              0.5em;
}

/*
    "Mochiy Pop One" is lisenced under the SIL Open Font License 1.1
    by The Mochiypop Project Authors(https://github.com/fontdasu/Mochiypop)
*/
@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap');

/*
    "M PLUS Rounded 1c" is lisenced under the SIL Open Font License 1.1
    by https://fonts.google.com/specimen/M+PLUS+Rounded+1c
*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700;900&display=swap');

body{
    margin:                 0px auto;
    background:             #90ff90;
}

header{
    position:               fixed;
    top:                    0px;
    left:                   0px;
    width:                  calc(100% - 2 * var(--common-header-horizontal-padding));
    height:                 var(--common-header-height);
    padding:                var(--common-header-vertical-padding) var(--common-header-horizontal-padding);
    white-space:            nowrap;
    z-index:		        16777215;
    background:             #ffffff;
}

header.mini{
    height:                 var(--common-header-height-mini);
}

header h1{
    margin:                 0;
    font-family:            "Mochiy Pop One", sans-serif;
}

header h1 a{
    color:                  var(--common-header-h1-color);
    text-decoration:        inherit;
    transition:             0.25s;
}

header h1 a:hover{
    color:                  var(--common-header-h1-color-hover);
}

header ul.global_menu{
    display:                flex;
    justify-content:        center;
    list-style-type:        none;
    padding:                0;
    margin:                 0.5em auto;
}

header ul.global_menu .menu_content{
    display:                block;
    padding:                0.5em;
    margin-right:           0.1em;
    width:                  10em;
    border:                 0.15em solid;
    font-family:            "Mochiy Pop One", sans-serif;
    text-align:             center;
    text-decoration-line:   none;
}

header ul.global_menu a.menu_content{
    border-color:           deepskyblue;
    color:                  deepskyblue;
}

main{
    max-width:              calc(100% - 2 * (var(--common-main-horizontal-margin) + var(--common-main-padding) + var(--common-main-border-weight)));
    width:                  992px;
    height:                 auto;
    margin:                 auto;
    margin-top:             calc(var(--common-header-height) + 2 * var(--common-header-vertical-padding) + 1em);
    margin-bottom:          1em;
    display:                block;
    border:                 var(--common-main-border-weight) ridge #f6f6f6;
    padding:                0.5em;
    padding-top:            0px;
    font-family:            "M PLUS Rounded 1c", sans-serif;
    color:                  #f2eff6;
    background:             #00311b;
}

main.mini{
    margin-top:             calc(var(--common-header-height-mini) + 2 * var(--common-header-vertical-padding) + 1em);
}

footer{
    width:                  100%;
    padding:                0.5em;
    margin:                 1em 0 0 0;
    background:             #ffffff;
}

footer p.footer_copyright{
    text-align:             center;
}