@charset "UTF-8";

@media screen { /* common */
:root {
    --dm: 3rem;/* default margin */
    --headtra: 0.7s;
    --h2h: 2.5rem;/* h2 height */
    --h2fs: 150%;/* h2 font size */
    --navih : 10rem;
    --ichl: orangered;
    --icnr: #ee8;
    --opendetail: #aaa;
}
* {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--ffgoth);
    font-weight: 400;
    text-decoration: none;
}
body {
    background: var(--cmain);
    overflow-x: hidden;
}
a {
    color: white;
}
ul { list-style-type: none; }
#wrapper {
    display: flex;
    position: fixed;
    width: 100%;
    height: 50vh;
    bottom: 0;
    color: white;
    overflow: scroll; 
}
#container {
    width: var(--aw);
    margin: 41vh auto 0;
}

#wrapper::-webkit-scrollbar { width: 3px; height: 0;}
#wrapper::-webkit-scrollbar-thumb { background: var(--cmain); }

#bottomspacer {
    height: 110vh;
} }

@media screen { /* top contents */

#header_wrapper {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    border-bottom: 1px solid black;
    background-color: var(--cmain);
    color: white;
    transition: top var(--headtra), height var(--headtra);
}
h1 { font-size: 100%; }
h1 > * { position: fixed; }
#mark {
    top: 0.5rem;
    left: 1.5rem;
    width: 2rem;
    height: 2rem;
    transition: top var(--headtra), left var(--headtra);
}
#mv {
    display: block;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: 50% 50%;
}
#navi { display: none; }
#bodybefore {
    position: fixed;
    top: 0;
    z-index: -1;
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1s, margin-left 0.5s;
    /* scroll-snap-type: x mandatory; */
}
#bodybefore img {
    object-fit: cover;
    object-position: 50% 10%;
    width: 100%;
    height: 100vh;
    user-select: none;
    /* scroll-snap-align: start; */
} }

@media screen { /* article */

article:not(#personal) {
    width: var(--aw);
    margin: 5rem auto 0;
    padding: var(--apt) 0 0;
    position: relative;
}
h2 {
    color: var(--cmain);
}
h2:before {
    --forwidth : 12em;
    --forright : calc(100vw - 10rem);
    content: "";
    margin-bottom: -1.3em;
    border-radius: 1em 0 0 1em; 
    position: absolute;
    right: 0;
    z-index: -1;
    display: block;
    width: 0;
    height: 1.4em;
    background: linear-gradient( 90deg, white 80%, transparent ); 
    overflow: hidden;
    font-weight: 900;
    animation: h2anim 1s ease-in-out forwards; 
}
@keyframes h2anim {
    0% { width: 0; right: 0; }
    50% { width: 110vw; right: 0; }
    100% { width: var(--forwidth); right: var(--forright); }
}
h2,
h3 {
    width: fit-content;
    font-family: var(--ffmin);
    font-weight: 800;
} }

@media screen { /* personal */

#personal {
    display: flex;
    flex-direction: column;
}
#personal p,
#personal a {
    display: block;
    width: fit-content;
} }

@media screen { /* gaibu fav */

#gaibu div {
    margin-top: 1rem;
    padding: 1rem;
    height: 30vh;
    border: gray 1px solid;
    overflow-y: scroll;
}
#gaibu div::-webkit-scrollbar,
#fav ul::-webkit-scrollbar { width: 2px; }
#gaibu div::-webkit-scrollbar-thumb,
#fav ul::-webkit-scrollbar-thumb { background: white; }
#gaibu h4:not(:first-of-type) {
    margin-top: 2rem;
}
#gaibu ul {
    list-style-type: disc;
    list-style-position: inside;
}
#gaibu li {
    margin-top: 1rem;
}

#fav {
    line-height: 1.6rem;
}
#fav h3 {
    display: grid;
    width: 100%;
    grid-template-columns: 12rem 1fr;
}
#fav h3 span {
    display: block;
    font: inherit;
}
#fav h3 span:nth-of-type(1) { grid-area: 1/1/2/2; }
#fav h3 span:nth-of-type(2) { grid-area: 2/1/3/2; margin-left: 3em; }
#fav h3 span:nth-of-type(3) { grid-area: 1/2/3/3; margin-top: 0.2em; font-family: var(--ffmit); font-weight: 600; font-size: 320%; }
#fav ul {
    margin-top: 1rem;
    padding: 0rem;
    list-style-type: none;
    list-style-position: inside;
    text-align: justify;
}
#fav li {
    display: inline;
    width: fit-content;
    margin-right: 1rem;
    line-height: 2rem;
}
#fav li span {
    background: white;
    color: var(--cmain);
    width: 1.6rem;
    height: 1.6rem;
    display: inline-block;
    margin-right: 0.1rem;
    border-radius: 1rem;
    line-height: 1.6rem;
    text-align: center;
}
#forold {
    line-height: 2em;
} }

@media screen { /* linkbtn */
article#linkbtn {
    width: 65%;
    display: flex;
    justify-content: space-between;
}
#linkbtn a {
    display: block;
}
#linkbtn svg {
    width: 2em;
    height: 1em;
    vertical-align: -0.1em;
    fill: currentColor;
}
.tozxc { color: var(--czxc); }
.toazz { color: var(--cazz); }
.touss { color: var(--cuss); }
.toyuk { color: var(--cyuk); }
.towet { color: var(--cwet); }
.tohar { color: var(--char); }
.toaaa { color: var(--caaa); }
.toyug { color: var(--cyug); } }

footer {
    width: 100%;
    margin-top: 60vh;
    padding-bottom: 1rem;
    position: absolute;
    right: 1rem;
    text-align: right;
}
#debug {
    position: fixed;
    top: 0.5rem;
    right: 0.5rem;
    width: fit-content;
    padding: 0 1rem;
    border-radius: 0.5rem;
    background: deeppink;
    color: white;
    font-size: 200%;
    z-index: 1000;
}

@media screen and (min-width: 1080px) {

/* #wrapper.leftside  { justify-content: flex-start; }
#wrappleft { justify-content: flex-end; }
#container { margin: 0 2vw; }
#wrapper.rightside h2 { text-align: right;}
#wrapper.rightside #personal { align-items: flex-end; } */

#bodybefore {
    width: 400%;
}
#bodybefore img {
    width: 100vw;
    object-position: 50% 40%;
}
#navi { display: block; }
#nvl,
#nvr {
    position: fixed;
    z-index: 100;
    display: flex;
    width: 1.5rem;
    height: 100vh;
    align-items: center;
    color: white;
    cursor: pointer;
}
#nvl { left: 1rem; display: none; }
#nvr { right: 1rem; }

h2:before {
    --forwidth: 50vw;
    --forright: calc(50vw + 1em);
}
#wrapper::-webkit-scrollbar,
#gaibu div::-webkit-scrollbar,
#fav ul::-webkit-scrollbar { width: 10px; height: 0;}
}