* {
    margin: 0;
}


/* html {
    overflow-y: scroll;
    scroll-snap-type: y proximity;
} */

section.top {
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: auto;
    scroll-snap-align: start;
    background: linear-gradient(red, blue);
    background-image: url("./dum2.jpg");
    background-size: cover;
}

#topWorks {
    min-height: 250vh;
}

section.footer {
    background: none;
    min-height: unset;
    height: var(--footerHeight);
    font-size: 0.75rem;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(243, 172, 46, 0.750);
}

div.projectCard {
    scroll-snap-align: start;
}

#logo {
    position: absolute;
    left: 1rem;
    bottom: 2rem;
    max-height: 50vh;
    max-width: 30vw;
    /* position: -webkit-sticky; */
}

div.topMenu {
    writing-mode: vertical-rl;
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 6rem;
    filter: drop-shadow(0 0 .25rem rgba(255, 255, 255, 0.5));
}

div.topMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

div.topMenu a {
    text-decoration: none;
}

div.jp_desc {
    position: absolute;
    top: 1rem;
    right: 1rem;
    max-height: 60vh;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    -ms-text-combine-horizontal: digits 2;
    -ms-text-combine-horizontal: digits 2;
    font-size: 1.5rem;
    line-height: 3.0rem;
    text-align: justify;
    -moz-text-align-last: left;
    text-align-last: left;
    text-justify: inter-ideograph;
}

div.en_desc {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    max-width: 60vw;
    font-size: 1.2rem;
    text-align: justify;
    -moz-text-align-last: left;
    text-align-last: left;
    text-justify: inter-ideograph;
}

div.subHeader {
    z-index: 100;
    position: -webkit-sticky;
    position: sticky;
    /* position: fixed; */
    left: 0;
    top: 0;
    height: 100vh;
    width: var( --headerWidth);
    background-color: rgba(105, 173, 186, 0.50);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

div.subHeader a {
    text-decoration: none;
}

div.topContentPH {
    position: absolute;
    right: 0;
    top: 0;
    width: calc(100% - var(--headerWidth));
    /* background-color: antiquewhite; */
    min-height: 100vh;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.2+0,0.8+100 */
    background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.8) 100%);
    /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.8) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.8) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#ccffffff', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}

div.projectCard {
    height: calc(50vh - 2rem);
}

@media screen and (max-width: 850px) {
    div.topMenu {
        font-size: 3rem;
    }
    div.subHeader {
        display: sticky;
        height: 2rem;
        width: 100vw;
        writing-mode: unset;
        transform: rotate(0deg);
    }
    div.headerTitle {
        margin: 0;
        margin-left: 0.5rem;
        display: inline-block;
        position: relative;
        font-size: 1.5rem;
    }
    div.headerMenu {
        display: none;
    }
    div.topContentPH {
        position: unset;
        width: 100%;
    }
    div.jp_desc {
        padding-top: 3.0rem;
        margin: 0;
        position: unset;
        width: unset;
        height: unset;
        width: 100%;
        font-size: 1.0rem;
        line-height: 1.75rem;
        columns: 15rem;
    }
    div.en_desc {
        padding: 1rem;
        position: unset;
        margin: 0;
        margin-top: 2rem;
        max-width: unset;
        width: unset;
        height: unset;
        width: 75vw;
        font-size: 1.0rem;
        line-height: 1.75rem;
    }
    h2.projectTitle {
        top: 2rem;
        height: calc(100% - 3rem);
    }
}