body {
    --baseFonts: "Outfit", "Outfit_Local", "Noto Sans JP", "SF Pro JP", "Arial", sans-serif;
    font-family: var(--baseFonts);
    --baseTextColor: black;
    color: var(--baseTextColor);
    --baseBgColor: hsl(0, 0%, 100%);
    background-color: var(--baseBgColor);
    margin: 0;
    padding: 0;
    --baseDuration: 0.3s;
    --baseRadius: 25px;
    --headerHeight: 50px;
    --baseLayeredBg: rgba(
        255,
        255,
        255,
        .8
    );
    --baseBdFilter: blur(20px);
    --baseBtnPadding: 10px;
    --dScrollY: 0px;
}
body > div.main.content {
    min-height: 100vh;
    margin-top: calc(
        var(--headerHeight)
    );
    position: relative;
}
body .btn {
    --btnVerticalPadding: 5px;
    padding: var(--baseBtnPadding);
    padding-top   : var(--btnVerticalPadding);
    padding-bottom: var(--btnVerticalPadding);
    box-shadow: gray 0 0 10px;
    border-radius: var(--baseRadius);
    transition: 
    width      var(--baseDuration) ease-in-out,
    height     var(--baseDuration) ease-in-out,
    opacity    var(--baseDuration) ease-in-out,
    box-shadow var(--baseDuration) ease-in-out;
}
body .btn:hover {
    box-shadow: gray 0 0 20px;
    cursor: pointer;
}
.customHref {
    width: max-content;
}
.customHref a {
    user-select: none;
    cursor: pointer;
    color: var(--baseTextColor);
    text-decoration: none;
}
.customHref .underLine {
    position: relative;
    background-color: var(--baseTextColor);
    height: 1px;
    width: 0;
    opacity: 0;
    transition:
    opacity    var(--baseDuration) ease-in-out,
    width      var(--baseDuration) ease-in-out;
}
.customHref:hover .underLine {
    width: 100%;
    opacity: 1;
}
body > div.footer {
    --footerWidth : 100%;
    --footerHeight: 300px;
    --footerRadius: 40px;
    position: relative;
    border-radius: var(--footerRadius);
    width : var(--footerWidth);
    height: var(--footerHeight);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
body > div.footer .contents {
    position: relative;
    --contentsRadius: var(--baseRadius);
    --contentsMargin: 20px;
    --contentsPadding: 10px;
    --titlesMargin: calc(
        var(--contentsPadding) * 2
    );
    padding: var(--contentsPadding);
    width : calc(100% - var(--contentsMargin) - var(--contentsPadding) * 2);
    height: calc(100% - var(--contentsMargin) * 2 - var(--contentsPadding) * 2);
    box-shadow: gray 0 0 10px;
    border-top-left-radius: var(--contentsRadius);
    border-bottom-left-radius: var(--contentsRadius);
}
body > div.footer .contents > div {
    width: max-content;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    position: absolute;
}
body > div.footer .contents > div.left {
    left: var(--titlesMargin);
}
body > div.footer .contents > div.right {
    right: var(--titlesMargin);
    align-items: flex-end;
    text-align: right;
}
body > div.footer .contents > div.top {
    top: var(--titlesMargin);
}
body > div.footer .contents > div.bottom {
    bottom: var(--titlesMargin);
}
body > div.footer .contents .titles {
    font-size: 1.5em;
}
body > div.footer .contents .langs {
    flex-direction: row;
}
body > div.footer .contents .credits {
    font-size: 1.5em;
}
body > div.footer .contents .titles .date {
    font-size: .8em;
}

body > div.header {
    --headerWidth : max-content;
    width : var(--headerWidth);
    max-width: calc(
        100vw - 10px
    );
    height: var(--headerHeight);
    position: fixed;
    top: 10px;
    right: 0;
    z-index: 35;
}
body > div.header .contents {
    --iconScale: 50px;
    position: relative;
    width : 100%;
    height: 100%;
    display: flex;
    /* overflow: hidden; */
    flex-direction: row;
    align-items: flex-start;
    box-shadow: gray 0 0 10px;
    border-top-left-radius   : var(--baseRadius);
    border-bottom-left-radius: var(--baseRadius);
    background-color: var(--baseLayeredBg);
    backdrop-filter: var(--baseBdFilter);
    --webkit-backdrop-filter: var(--baseBdFilter);
    right: 0;
    transition:
    border-radius var(--baseDuration) ease-in-out,
    right         var(--baseDuration) ease-in-out,
    height        var(--baseDuration) ease-in-out,
    box-shadow    var(--baseDuration) ease-in-out,
    transform     var(--baseDuration) ease-in-out;
}
body > div.header.opened .contents {
    /* border-radius: var(--baseRadius);
    right: 10px; */
    height: calc(min(
        50vh,
        var(--headerHeight) * 2
    ));
    box-shadow: gray 0 0 20px;
}
body > div.header .contents .items {
    width : max-content;
    height: var(--headerHeight);
    overflow-x: auto;
    display: flex;
    align-items: center;
    flex-direction: row;
    scrollbar-width: none;
}
body > div.header .contents .items::-webkit-scrollbar {
    display: none;
}
body > div.header .contents .items::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: calc(
        var(--iconScale) + 5px
    );
    height: var(--headerHeight);
    background: linear-gradient(
        to right,
        transparent 0%,
        white 25%
    );
}
body > div.header .contents .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    width : var(--iconScale);
    height: var(--iconScale);
}
@keyframes simpleShowAnim {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
body > div.header.opened .contents .opened.content {
    pointer-events: auto;
    opacity: 1;
    animation: simpleShowAnim var(--baseDuration) ease-in-out;
}
body > div.header .contents .opened.content {
    pointer-events: none;
    opacity: 0;
    margin: 0;
    position: absolute;
    --openedContentPadding: 5px;
    width: calc(
        100% - var(--openedContentPadding) * 2
    );
    padding: var(--openedContentPadding);
    height: calc(
        100% - var(--headerHeight)
    );
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition:
    opacity   var(--baseDuration) ease-in-out;
}
body > div.header .contents .opened.content .bottom.btns {
    --bottomBtnsGap: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: min-content;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-direction: row;
    gap: var(--bottomBtnsGap);
    padding: var(--bottomBtnsGap);
}
body > div.header .contents .opened.content .bottom.btns .btnset {
    position: relative;
    width : max-content;
    height: max-content;
}
body > div.header .contents .opened.content .bottom.btns .btnset .btn {
    position: relative;
}
body > div.header .contents .opened.content .bottom.btns .btnset .dropdowns {
    --dropdownGap: calc(var(--bottomBtnsGap) / 2);
    display: flex;
    flex-direction: column;
    gap: var(--dropdownGap);
    margin-top: var(--dropdownGap);
    position: absolute;
    /* --minRadius: calc(var(--baseRadius) / 4); */
    --minRadius: var(--baseRadius);
}
body > div.header .contents .opened.content .bottom.btns .btnset.opened .dropdowns .btn:first-child {
    border-bottom-left-radius: var(--minRadius);
    border-bottom-right-radius: var(--minRadius);
}
body > div.header .contents .opened.content .bottom.btns .btnset.opened .dropdowns .btn:last-child {
    border-top-left-radius: var(--minRadius);
    border-top-right-radius: var(--minRadius);
}
body > div.header .contents .opened.content .bottom.btns .btnset.opened .dropdowns .btn.invalid {
    pointer-events: none;
}
body > div.header .contents .opened.content .bottom.btns .btnset.opened .dropdowns .btn.invalid span {
    opacity: .5;
}
body > div.header .contents .opened.content .bottom.btns .btnset.opened .dropdowns .btn {
    animation: simpleShowAnim var(--baseDuration) ease-in-out;
    opacity: 1;
    pointer-events: auto;
}
body > div.header .contents .opened.content .bottom.btns .btnset .dropdowns .btn {
    opacity: 0;
    pointer-events: none;
    position: relative;
    background-color: white;
    backdrop-filter: var(--baseBdFilter);
    --webkit-backdrop-filter: var(--baseBdFilter);
}
@keyframes headerOpenedContentBtnAnim {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    50% {
        opacity: .25;
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
body > div.header .contents .opened.content .item {
    flex-shrink: 0;
    animation:
    headerOpenedContentBtnAnim calc(var(--baseDuration)) ease-in-out;
    width: max-content;
}
body > div.header .contents .opened.content .item .btn {
    min-width : max-content;
    min-height: max-content;
    width : var(--baseItemWidth);
    height: var(--baseItemHeight);
    overflow: hidden;
    position: relative;
}
body > div.header .contents .opened.content .item.opened .btn {
    width: var(--menuWidth);
    height: var(--menuHeight);
}
body > div.header .contents .opened.content .item.opened .btn .surface {
    opacity: 0;
}
body > div.header .contents .opened.content .item.opened .menu {
    opacity: 1;
    pointer-events: auto;
}
body > div.header .contents .opened.content .item .menu {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: calc(var(--baseBtnPadding) / 2);
}
body > div.header .contents .icon > div {
    --barWidth : 25px;
    --barHeight: 2px;
    position: absolute;
    background-color: var(--baseTextColor);
    border-radius: var(--barHeight);
    width : var(--barWidth);
    height: var(--barHeight);
    transition:
    width     var(--baseDuration) ease-in-out,
    transform var(--baseDuration) ease-in-out;
    --barDif: calc(
        var(--iconScale) * .1
    );
    --barPushedRotate: calc(
        45deg + 90deg
    )
}
body > div.header.opened .contents .icon > div {
    width: calc(
        var(--barWidth) + 5px
    );
}
body > div.header .contents .icon > div:first-child {
    transform: rotate(0) translateY(var(--barDif));
}
body > div.header .contents .icon > div:last-child {
    transform: rotate(0) translateY(calc(
        var(--barDif) * -1
    ));
}
body > div.header.opened .contents .icon > div:first-child {
    transform: rotate(var(--barPushedRotate));
}
body > div.header.opened .contents .icon > div:last-child {
    transform: rotate(calc(
        var(--barPushedRotate) * -1
    ));
}
    
body > div.header .contents .items .item {
    position: relative;
    margin-left: 10px;
    flex-shrink: 0;
}
body > div.header .contents .items .item:last-child {
    margin-right: var(--iconScale);
}
.invalid {
    opacity: .5;
    pointer-events: none;
}