#main-header {
    background-color: rgb(226, 255, 182); 

    top: 0;
    padding: 0% 5%;
    position: sticky;
    max-width: 100%;
    height: 60px;

    display: flex;

    z-index: 100;

    box-shadow: rgba(0, 0, 0, 0.237) 0px 5px 2px;
    /* overflow: hidden; */
}

#main-footer {
    background-color: #68be8d;

    bottom: 0;
    width: 100%;
    height: 100px;

    border-top: solid 4px #243400;
    /* min-height: 100px; */
    /* position: absolute; */
    text-align: center;

    padding-top: 10px;
    display:flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
}

#link-box {
    width: 100%;
    min-height: 50%;

    font-size:large;

    flex-grow: 1;

    display: flex;
    flex-direction: column;
}

#link-box a:hover {
    color:#00f7ff;
}

#copyright-box {
    width: 100%;
    max-height: 30%;

    flex-shrink: 1;

    font-size: medium;
    font-weight: bold;
    color: black;
}

#main-navigation {
    width: 100%;
    height: 100%;

    padding: 0px 10px;
    padding-left: 0px;
    margin: 0px;

    display:flex;
    /* justify-content: center;
    align-items: center; */
    list-style: none;
    /* overflow: hidden; */
}

#main-navigation li {
    width: 170px;
    float:left;
    padding: 0px;
    display: block;
    position: relative;
}

#main-navigation li a{
    display:flex;
    z-index: 2;

    width: 90%;
    height: 100%;
    
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    
    padding: 0px 5%;

    transition: background-color 0.5s;   
}

#main-navigation > li > a {
    font-size: 20px;
    color: white;
    font-weight: bold;
    letter-spacing: 0.1em;

    text-shadow: 3px 0px 0px #268000, 2.9px 0.6px 0px #268000, 2.8px 1.1px 0px #268000, 2.5px 1.7px 0px #268000, 2.1px 2.1px 0px #268000, 1.7px 2.5px 0px #268000, 1.1px 2.8px 0px #268000, 0.6px 2.9px 0px #268000, 0px 3px 0px #268000, -0.6px 2.9px 0px #268000, -1.1px 2.8px 0px #268000, -1.7px 2.5px 0px #268000, -2.1px 2.1px 0px #268000, -2.5px 1.7px 0px #268000, -2.8px 1.1px 0px #268000, -2.9px 0.6px 0px #268000, -3px 0px 0px #268000, -2.9px -0.6px 0px #268000, -2.8px -1.1px 0px #268000, -2.5px -1.7px 0px #268000, -2.1px -2.1px 0px #268000, -1.7px -2.5px 0px #268000, -1.1px -2.8px 0px #268000, -0.6px -2.9px 0px #268000, 0px -3px 0px #268000, 0.6px -2.9px 0px #268000, 1.1px -2.8px 0px #268000, 1.7px -2.5px 0px #268000, 2.1px -2.1px 0px #268000, 2.5px -1.7px 0px #268000, 2.8px -1.1px 0px #268000, 2.9px -0.6px 0px #268000, 6px 0px 0px #ffffff, 5.9px 1.2px 0px #ffffff, 5.5px 2.3px 0px #ffffff, 5px 3.3px 0px #ffffff, 4.2px 4.2px 0px #ffffff, 3.3px 5px 0px #ffffff, 2.3px 5.5px 0px #ffffff, 1.2px 5.9px 0px #ffffff, 0px 6px 0px #ffffff, -1.2px 5.9px 0px #ffffff, -2.3px 5.5px 0px #ffffff, -3.3px 5px 0px #ffffff, -4.2px 4.2px 0px #ffffff, -5px 3.3px 0px #ffffff, -5.5px 2.3px 0px #ffffff, -5.9px 1.2px 0px #ffffff, -6px 0px 0px #ffffff, -5.9px -1.2px 0px #ffffff, -5.5px -2.3px 0px #ffffff, -5px -3.3px 0px #ffffff, -4.2px -4.2px 0px #ffffff, -3.3px -5px 0px #ffffff, -2.3px -5.5px 0px #ffffff, -1.2px -5.9px 0px #ffffff, 0px -6px 0px #ffffff, 1.2px -5.9px 0px #ffffff, 2.3px -5.5px 0px #ffffff, 3.3px -5px 0px #ffffff, 4.2px -4.2px 0px #ffffff, 5px -3.3px 0px #ffffff, 5.5px -2.3px 0px #ffffff, 5.9px -1.2px 0px #ffffff, 9px 0px 0px #316745, 8.8px 1.8px 0px #316745, 8.3px 3.4px 0px #316745, 7.5px 5px 0px #316745, 6.4px 6.4px 0px #316745, 5px 7.5px 0px #316745, 3.4px 8.3px 0px #316745, 1.8px 8.8px 0px #316745, 0px 9px 0px #316745, -1.8px 8.8px 0px #316745, -3.4px 8.3px 0px #316745, -5px 7.5px 0px #316745, -6.4px 6.4px 0px #316745, -7.5px 5px 0px #316745, -8.3px 3.4px 0px #316745, -8.8px 1.8px 0px #316745, -9px 0px 0px #316745, -8.8px -1.8px 0px #316745, -8.3px -3.4px 0px #316745, -7.5px -5px 0px #316745, -6.4px -6.4px 0px #316745, -5px -7.5px 0px #316745, -3.4px -8.3px 0px #316745, -1.8px -8.8px 0px #316745, 0px -9px 0px #316745, 1.8px -8.8px 0px #316745, 3.4px -8.3px 0px #316745, 5px -7.5px 0px #316745, 6.4px -6.4px 0px #316745, 7.5px -5px 0px #316745, 8.3px -3.4px 0px #316745, 8.8px -1.8px 0px #316745, 5px 2px 0px #316745, 4.9px 2.6px 0px #316745, 4.8px 3.1px 0px #316745, 4.5px 3.7px 0px #316745, 4.1px 4.1px 0px #316745, 3.7px 4.5px 0px #316745, 3.1px 4.8px 0px #316745, 2.6px 4.9px 0px #316745, 2px 5px 0px #316745, 1.4px 4.9px 0px #316745, 0.9px 4.8px 0px #316745, 0.3px 4.5px 0px #316745, -0.1px 4.1px 0px #316745, -0.5px 3.7px 0px #316745, -0.8px 3.1px 0px #316745, -0.9px 2.6px 0px #316745, -1px 2px 0px #316745, -0.9px 1.4px 0px #316745, -0.8px 0.9px 0px #316745, -0.5px 0.3px 0px #316745, -0.1px -0.1px 0px #316745, 0.3px -0.5px 0px #316745, 0.9px -0.8px 0px #316745, 1.4px -0.9px 0px #316745, 2px -1px 0px #316745, 2.6px -0.9px 0px #316745, 3.1px -0.8px 0px #316745, 3.7px -0.5px 0px #316745, 4.1px -0.1px 0px #316745, 4.5px 0.3px 0px #316745, 4.8px 0.9px 0px #316745, 4.9px 1.4px 0px #316745, 8px 2px 0px #316745, 7.9px 3.2px 0px #316745, 7.5px 4.3px 0px #316745, 7px 5.3px 0px #316745, 6.2px 6.2px 0px #316745, 5.3px 7px 0px #316745, 4.3px 7.5px 0px #316745, 3.2px 7.9px 0px #316745, 2px 8px 0px #316745, 0.8px 7.9px 0px #316745, -0.3px 7.5px 0px #316745, -1.3px 7px 0px #316745, -2.2px 6.2px 0px #316745, -3px 5.3px 0px #316745, -3.5px 4.3px 0px #316745, -3.9px 3.2px 0px #316745, -4px 2px 0px #316745, -3.9px 0.8px 0px #316745, -3.5px -0.3px 0px #316745, -3px -1.3px 0px #316745, -2.2px -2.2px 0px #316745, -1.3px -3px 0px #316745, -0.3px -3.5px 0px #316745, 0.8px -3.9px 0px #316745, 2px -4px 0px #316745, 3.2px -3.9px 0px #316745, 4.3px -3.5px 0px #316745, 5.3px -3px 0px #316745, 6.2px -2.2px 0px #316745, 7px -1.3px 0px #316745, 7.5px -0.3px 0px #316745, 7.9px 0.8px 0px #316745, 11px 2px 0px #316745, 10.8px 3.8px 0px #316745, 10.3px 5.4px 0px #316745, 9.5px 7px 0px #316745, 8.4px 8.4px 0px #316745, 7px 9.5px 0px #316745, 5.4px 10.3px 0px #316745, 3.8px 10.8px 0px #316745, 2px 11px 0px #316745, 0.2px 10.8px 0px #316745, -1.4px 10.3px 0px #316745, -3px 9.5px 0px #316745, -4.4px 8.4px 0px #316745, -5.5px 7px 0px #316745, -6.3px 5.4px 0px #316745, -6.8px 3.8px 0px #316745, -7px 2px 0px #316745, -6.8px 0.2px 0px #316745, -6.3px -1.4px 0px #316745, -5.5px -3px 0px #316745, -4.4px -4.4px 0px #316745, -3px -5.5px 0px #316745, -1.4px -6.3px 0px #316745, 0.2px -6.8px 0px #316745, 2px -7px 0px #316745, 3.8px -6.8px 0px #316745, 5.4px -6.3px 0px #316745, 7px -5.5px 0px #316745, 8.4px -4.4px 0px #316745, 9.5px -3px 0px #316745, 10.3px -1.4px 0px #316745, 10.8px 0.2px 0px #316745;
}

#main-navigation > li:hover > a {
    color: greenyellow;
}

#main-navigation > li:hover {
    background-color: rgb(156, 212, 72)
}

#main-navigation > li {
    height: 60px;
    line-height: 55px;
    background-color: rgb(99, 164, 1);
}

#main-navigation li a div {
    position:relative;
}

#main-navigation > li > a div::after {
    --initial-width: 10px;
    --hover-width: 150px;

    display:block;

    content: "";
    width: var(--initial-width);
    height: 3px;
    background-color: #316745;
    
    position:absolute;
    left: calc((100% - var(--initial-width)) / 2);
    bottom: 0px;

    transition: width 0.3s ease, left 0.3s ease;
}

#main-navigation > li > a:hover div::after {
    width: var(--hover-width);
    left: calc((100% - var(--hover-width)) / 2);
}

#main-navigation ul.navigation-second {
    visibility: hidden;
    opacity: 0;
    z-index: 1;

    position: absolute;
    top: 50px;
    width: 100%;
    padding: 0px;

    transition: all 0.2s ease;
}

#main-navigation > li:hover ul.navigation-second {
    top: 60px;
    visibility: visible;
    opacity: 1;
}

ul.navigation-second > li {
    border-top: 2px solid #243400;

    height: 50px;
    line-height: 50px;
    background-color: #88cb7f;
}

ul.navigation-second > li:hover {
    background-color: #b4cba7;
}

ul.navigation-second > li a {
    font-weight: bold;
    font-size: 20px;
    color: white;
    text-shadow: 1px 1px 0 white, 2px 2px 2px black;
}

ul.navigation-second > li:hover a {
    color: greenyellow;
}

.header-item {
    padding: 0px 10px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 900;
    color: #3eb370;
    background-color: rgb(226, 255, 182);
    text-align: center;
    white-space: nowrap;

    text-shadow: 3px 0px 0px #ffffff, 0px 3px 0px #ffffff, -3px 0px 0px #ffffff, 0px -3px 0px #ffffff, 6px 0px 0px #60cd88, 0px 6px 0px #60cd88, -6px 0px 0px #60cd88, 0px -6px 0px #60cd88;
    transition: background-color 0.3s ease;
}

.header-item:hover {
    background-color: rgb(150, 191, 88);
}

.main-body {
    width: 60%;
    min-height: fit-content;
    min-width: 200px;
    padding: 20px;
    padding-bottom: 100px;
    margin: 0 auto;
    
    background-color: #c6deb9;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 100px;

    overflow: hidden;
}

.release-date {
    margin: 5px;
    padding: 5px;
    display: flex;

    background-color: #f0f4ee;
    border-radius: 10px;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.436);
}

.release-date p {
    margin: 0px 20px;
    float: left;
    font-weight: bold;
}

img.icon-image {
    height: 50px;
}

img.article-image {
    width: 600px;
}

span.header-text {
    text-align: center;
}

body,
html,
main {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: fit-content;
}

body {
    background-color: #93ca76;

    font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Noto Sans JP",
    sans-serif;
}

h1 {
    font-weight: 1000;
    font-size: 40px;
    color: #000000;

    /* background-color: #ffffff; */
    padding: 10px;
    margin: 0px;
    /* border-radius: 5px; */
    border: dashed black;
    border-bottom-width: 0px;

    /* text-shadow: 4px 4px 0px rgb(49, 103, 69); */
}

hr {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

h1 + hr {
    border-top: 4px solid #2a4919;
    border-radius: 5px;
}

h2 {
    margin: 50px 0px 20px 0px;
}

a.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}

.scroll {
    overflow:auto;

    padding: 10px;
}

.notebook {
    --notebook-width: 500px;
    height: calc(var(--notebook-width) * sqrt(2));
    width: var(--notebook-width);

    display:flex;
    padding: 0px 0px;
    margin: 0 auto;

    filter: drop-shadow(5px 5px rgba(0, 0, 0, 0.3));
}

.notebook-hole {
    float: left;
    width: 40px;
    flex-shrink: 0;
    height: 100%;

    background-color: white;
    border-radius: 10px 0 0 10px;

    mask-image: radial-gradient(circle at 20px 16px, transparent 9px, black 10px);
    mask-size: 30px 30px;
    mask-repeat: repeat;
}

.notebook-right {
    float:right;
    flex-grow: 1;
    height:100%;
    max-width: 100%;

    background-color: white;
    border-radius: 0 10px 10px 0;

    display:flex;
    flex-direction: column;
}

.notebook-top {
    height: 60px;
    max-width: 100%;
    flex-shrink: 0;
}

.notebook-body {
    max-width: 100%;

    
    background-image: linear-gradient(180deg, rgb(0, 78, 9) 1px, transparent 1px);
    background-size: 100% 25px;
    line-height: 25px;
    font-size: 18px;

    flex-grow: 1;

    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.notebook-bottom {
    height: 60px;
    max-width: 100%;

    flex-shrink: 0;
}

.notebook-body img {
    display:block;
    height: 150px;
}

.link-frame {
    border: solid 3px;
    border-radius: 1000px;
    width: fit-content;

    padding: 5px;
    margin:20px auto;
    text-decoration: none;

    display:flex;
    flex-direction: row;

    box-shadow: 0px 0px 5px 5px #ffffff;
}

.link-frame:hover {
    filter: brightness(150%);
}

.link-frame img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.link-frame > div {
    display:grid;
    grid-template-rows: 1fr 1fr;

    font-size: 20px;
    margin: 0px 10px;
    
    font-weight: bold;
}

.link-frame .platform {
    font-size: 18px;
}

.link-frame.youtube {
    border-color:#FF0033;
    background-color: #ffb1c1;
    color:#270008;
}

.link-frame.x {
    border-color: #000000;
    background-color: #9f9f9f;
    color: #000000;
}

.link-frame.marshmallow {
    border-color: #f3969a;
    background-color: #f4f4f5;
    color: #000000;
}