:root {
    --clr-black: #000000;
    --clr-white: #ffffff;
    --clr-defcursor: #c6494b;
    --clr-txtfoot: #bac4b8;
    --clr-txthover: #677265;
    --clr-jap: #ba1f1f;
    --ff-primary: 'Heathergreen';
    --ff-secondary: 'Roboto';
    --ff-tertiary: 'Bebas Neue';
    --ff-fourth: 'Neue Haas Grotesk';
    --ff-logo: 'Roboto-Black';
    --ff-logo-j: 'Kozuka';
    --ff-jap: 'GN-KillGothic-U-KanaNA';

    --catCarouselY: -181;
}

@font-face {
    font-family: Heathergreen;
    src: url(media/Heathergreen.otf);
}

@font-face {
    font-family: Roboto;
    src: url(media/Roboto-Medium.ttf);
}

@font-face {
    font-family: Roboto-Black;
    src: url(media/Roboto-Medium.ttf);
}

@font-face {
    font-family: Bebas Neue;
    src: url(media/BebasNeue-Bold.ttf);
}

@font-face {
    font-family: Kozuka;
    src: url(media/Kozuka-Gothic-Pr6N-B.otf);
}

@font-face {
    font-family: Neue Haas Grotesk;
    src: url(media/NHaasGroteskTXPro-55Rg.ttf);
}

@font-face {
    font-family: GN-KillGothic-U-KanaNA;
    src: url(media/GN-KillGothic-U-KanaNA.ttf);
}

* {
  cursor: none !important;
}

html, body {
  overscroll-behavior-y: contain;
  /* or none */
}

body {
    margin: 0;
    scrollbar-width: none;
    cursor: none;
    visibility: hidden;
}

.cursor {
    position: fixed;
    z-index: 100;
    width: 0.7vmax;
    height: 0.7vmax;
    border-radius: 100%;
    background-color: var(--clr-defcursor);
    pointer-events: none;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: var(--ff-fourth);
    font-size: 0.9vh;
    color: var(--clr-white);
    font-weight: 400;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
}

#splash_block {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    z-index: 10;
    pointer-events: none;
}

#splash-flip-cont {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    background-color: rgb(178, 162, 138,1);
    perspective: 52.08vw;
    display: flex;
    justify-content: center;
    align-items: center;
}






.splash-cards {
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 2.5vw;
    transform: rotateX(30deg) translateY(-400px) translateZ(-800px);
    opacity: 0;
}

.splash-cards::before {
    content: "";
    border-radius: 2.5vw;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7); /* black overlay */
}

/**HOME**/
#home-wrap {
    width: 100%;
    height: 100vh;
}

#home-cont {
    width: 100%;
    height: 100%;
    position: relative;
    /* background-color: pink; */
    overflow: hidden;
    touch-action: none; /*prevents browser to perform normal touch gesture; if removed, browser toolbar on safari will also swipe along when navigating projects*/
}

#home-logo-btn {
    width: 7.5vw;
    height: 2.5vw;
    position: absolute;
    top: 4vh;
    left: 7.3vh;
    z-index: 4;
    /* background-color: green; */
}

#home-logo-btn a {
    cursor: none;
}

#home-logo-a {
    width: 25%;
    height: 100%;
    float: left;
    display: grid;
    /* background-color: blue; */
    /* background-image: url('media/logo.png'); */
}

.logo-a {
    width: 100%;
    height: 100%;
    grid-area: 1 / 1;
    object-fit: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.4vw;
}

#home-logo-a-a {
    /* background-color: yellow; */
    opacity: 0;
}

#home-logo-a-b { /*First shown*/
    /* background-color: green; */
}

#home-logo-a-c {
    /* background-color: pink; */
    opacity: 0;
}

#home-logo-b {
    width: 73%;
    height: 100%;
    float: right;
    /* background-color: red; */
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    gap: 0vw;
}

#home-logo-c {
    width: 100%;
    height: 0.7vw;
    font-family: var(--ff-logo);
    font-size: 0.60vw;
    font-weight: 600;
    overflow: hidden;
    display: flex;
    flex-flow: column nowrap;
    /* background-color: violet; */
}

#home-logo-c-a {
    /* background-color: yellow; */
    position: relative;
}

#home-logo-c-b {
    /* background-color: orange; */
    position: relative;
}

#home-logo-d {
    width: 100%;
    height: 0.7vw;
    font-family: var(--ff-logo-j);
    font-size: 0.50vw;
    font-weight: 600;
    /* letter-spacing: -2px; */
    overflow: hidden;
    display: flex;
    flex-flow: column nowrap;
    /* background-color: red; */
}

#home-logo-d-a {
    /* background-color: yellow; */
    position: relative;
}

#home-logo-d-b {
    /* background-color: orange; */
    position: relative;
}







#home-catalog-btn {
    width: auto;
    height: auto;
    /* background-color: black; */
    position: absolute;
    top: 6vh;
    right: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

#home-catalog-cont {
    width: auto;
    height: auto;
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    /* align-items: center; */
    overflow: hidden;
    z-index: 1;
    /* background-color: violet; */
}

#home-catalog-cont > .nav-line {
    width: 100%;
}

#home-catalog-cont a {
    font-size: 0.7vw;
}

.nav-lbl {
    font-family: var(--ff-secondary);
    color: var(--clr-black);
    text-decoration: none;
    cursor: none;
}

.nav-line {
    background-color: var(--clr-black);
    height: 0.03vw;
    transform-origin: left;
}








#home-progress {
    width: 2vw;
    height: auto;
    /* background-color: yellow; */
    position: absolute;
    top: 50%;
    left: 7%;
    margin: -7.5vh -2vh -7.5vh 0;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    gap: 1.5vh;
    z-index: 3;
}

.bar {
    width: 0vw;
    height: 0.1vh;
}

















#projArea_Carousel_Block {
    width: 100%;
    position: absolute;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    /* background-color: green; */
    top: 1.5vw;
    z-index: 0;
}

#projArea {
    width: 64vw;
    height: auto;
    /* background-color: indigo; */
    position: relative;
    /* top: 9%; */
    /* left: 50%; */
    /* margin: -4vh -32vw -4vh -32vw; */
    z-index: 1;

    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 2vh;
}

#titleBelt {
    width: 100%;
    height: 10vmax;
    /* gap: 8vw; */
    container-type: inline-size;
    overflow: hidden;

    /* background-color: green; */
    display: flex;
    align-items: center;
    flex-flow: column nowrap; 
    justify-content: center;
}

.ptitle {
    --title-height: 15vmax;
    flex: 0 0 var(--title-height);
    top: 12.5vmax;
    /* background-color: black; */
    margin: 0;

    display: flex;
    align-items: flex-end;
    line-height: 11vmax;
    white-space: nowrap;
    font-family: var(--ff-primary);
    position: relative;
    font-size: clamp(5rem, 19cqw, 17rem);
    padding: 0;
}

#title_node_n {
    /* background-color: yellow; */
    visibility: hidden;
}

#title_node_0 {
    /* background-color: red; */
}

#title_node_1 {
    /* background-color: blue; */
}


#attrBelt {
    width: 100%;
    height: 1.3vh;
    /* background-color: purple; */
    margin-bottom: 3vh;
    display: flex;
    align-items: center;
    flex-flow: column nowrap;
    gap: 1vh;
    /* word-wrap: break-word; */
    overflow: hidden;
}

.pAttr {
    height: 0.65vw;
    font-size: 0.65vw;
    font-family: var(--ff-secondary);
    padding: 0;
    line-height: 1;
    margin: 0;
    display: flex;
    align-items: flex-end;
    position: relative;
    top: 0%;
    white-space: pre;
    /* background-color: yellow; */
}

#attr_node_n {
    /* background-color: yellow; */
    visibility: hidden;
}

#attr_node_0 {
    /* background-color: pink; */
}

#attr_node_1 {
    /* background-color: lavender; */
}



#cardCarousel {
    width: 65vw;
    height: 60vh;
    /* background-color: orange; */
    position: relative;
    z-index: 2;
    /* top: 50vh; 50% */
    /* left: 50vw; */
    /* margin: -16.5vh 0 0 -32.5vw; */
    transform-origin: center;
    perspective: 1000px;
    /* overflow: hidden; */
    opacity: 0;
}

.project {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 2.5vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.5);
    /* transition-duration: 2s; */

    text-align: center;
    font-size: 5vh;
}

#proj_node_1 {
    opacity: 0;
}

#proj_node_2 {
    opacity: 0;
    transform: matrix3d(1, 0, 0, 0,    0, 1, 0.1, 0,    0, 0, 1, 0,    0, 0, -100, 1);
}

#proj_node_3 {
    /* opacity: 0; */
}

#proj_node_4 {
    opacity: 0;
    transform: matrix3d(1, 0, 0, 0,    0, 1, -0.4, 0,    0, 0, 1, 0,    0, 450, 150, 1);
}

#proj_node_5 {
    opacity: 0;
}














#home-foot-nav {
    width: 5.5vw;
    height: 3vw;
    bottom: 5vh;
    left: 7.3vh;
    position: absolute;
    z-index: 4;
    /* background-color: pink; */
}

#home-foot-nav a {
    font-size: 0.7vw;
}

#home-about-btn {
    width: auto;
    height: 50%;
    /* background-color: black; */
    display: flex;
    flex-flow: column nowrap;
    transition: 0.2s;
    display: inline-block;
}

#home-about-btn > .nav-line {
    width: 100%;
    height: 0.03vw;
}

#home-connect-btn {
    width: auto;
    height: 50%;
    /* background-color: gray; */
    display: flex;
    flex-flow: column nowrap;
    transition: 0.2s;
    display: inline-block;
}

#home-connect-btn > .nav-line {
    width: 100%;
}


#home-scsw-illu {
    width: 16vh;
    height: 6vh;
    bottom: 5vh;
    right: 7.3vh;
    /* background-color: pink; */
    position: absolute;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row nowrap;
}

#home-swipe-outer  {
    background-color: rgba(0,0,0,0);
    width: 2vh;
    height: 2vh;
    border-radius: 100vmax;
    border: 0.15vmax solid black;
    opacity: 0;
    z-index: 1;
    position: absolute;
}

#home-swipe-inner {
    background-color: black;
    width: 0.8vh;
    height: 0.8vh;
    border-radius: 100vmax;
    top: 50%;
    left: 50%;
    margin: -0.4vh -0.4vh -0.4vh -0.4vh;
    opacity: 0;
    z-index: 1;
    position: absolute;
}

#home-scrl-outer {
    background-color: rgba(0,0,0,0);
    width: 2vh;
    height: 3.5vh;
    border-radius: 100vmax;
    border: 0.15vmax solid black;
    opacity: 0;
    z-index: 2;
    position: absolute;
}

#home-scrl-inner {
    background-color: black;
    width: 0.4vh;
    height: 0.4vh;
    border-radius: 100vmax;
    top: 25%;
    left: 50%;
    margin: -0.2vh -0.2vh -0.2vh -0.2vh;
    position: absolute;
    opacity: 0;
    z-index: 2;
}









/*******PROJECT-MODE**********/
#projmode-cont {
    width: 100%;
    height: 100vh;
    /* background-color: white; */
    position: relative;
    z-index: 3;
    pointer-events: none; /*Needs to be put to AUTO for troubleshooting*/
    scrollbar-width: auto;
    overflow: auto;
    opacity: 0; /*Needs to be put to 1 for troubleshooting*/
}

#pmInfo-cont {
    width: 50vw;
    height: auto;
    /* background-color: pink; */
    margin-top: 34vh;
    margin-left: 20vw;
    margin-bottom: 28vh;
    position: relative;
}

#pmTitle-cont {
    width: auto;
    height: auto;
    overflow: hidden;
    /* background-color: lavender; */
}

#pmTitle {
    width: 100%;
    height: auto;
    margin: 0;
    line-height: 1;
    font-size: 10vw;
    font-family: var(--ff-primary);
    opacity: 0;
    /* transform: translateY(-100%); */
    /* background-color: orange; */
    /* position: relative; */
    /* bottom: -2vw; */
}



#pmAttr-cont {
    width: 100%;
    height: 17vh;
    /* background-color: rosybrown; */
    display: flex;
    flex-flow: column wrap;
    margin-top: 4vh;
    gap: 2vh;
    font-family: var(--ff-secondary);
}

.pm-m-cont {
    width: 10vw;
    height: 1.60vw;
    display: flex;
    flex-flow: column nowrap;
}

.pm-ch-cont {
    width: 100%;
    height: auto;
    overflow: hidden;
}

#pmType-cont {
    /* background-color: blue; */
}

#pmType-lbl-cont {
    overflow: hidden;
    /* background-color: yellow; */
}

#pmType-txt-cont {
    overflow: hidden;
    /* background-color: violet; */
}

#pmType-lbl {
    width: 100%;
    height: 100%;
    font-size: 0.55vw;
    opacity: 0;
    /* background-color: white; */
}

#pmType-txt {
    width: 100%;
    height: 100%;
    font-size: 0.8vw;
    opacity: 0;
}





#pmRole-cont {
    /* background-color: green; */
}

#pmRole-lbl-cont {
    /* background-color: yellow; */
}

#pmRole-txt-cont {
    /* background-color: violet; */
}

#pmRole-lbl {
    width: 100%;
    height: 100%;
    font-size: 0.55vw;
    opacity: 0;
    /* background-color: white; */
}

#pmRole-txt {
    width: 100%;
    height: 100%;
    font-size: 0.8vw;
    opacity: 0;
}






#pmCompleted-cont {
    /* background-color: red; */
}

#pmCompleted-lbl-cont {
    /* background-color: yellow; */
}

#pmCompleted-txt-cont {
    /* background-color: violet; */
}

#pmCompleted-lbl {
    width: 100%;
    height: 100%;
    font-size: 0.55vw;
    opacity: 0;
    /* background-color: white; */
}

#pmCompleted-txt {
    width: 100%;
    height: 100%;
    font-size: 0.8vw;
    opacity: 0;
}




#pmExplore-cont {
    /* background-color: orange; */
}

#pmExplore-lbl-cont {
    /* background-color: yellow; */
}

#pmExplore-lbl {
    width: 100%;
    height: 100%;
    font-size: 0.55vw;
    opacity: 0;
    /* background-color: white; */
}





#pmExplore-txt-cont {
    /* background-color: violet; */
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0.3vw;
    cursor: none;
}

#pmExplore-txt {
    width: auto;
    height: 100%;
    font-size: 0.8vw;
    opacity: 0;
    cursor: none;
    /* background-color: red; */
}



#pmExplore-arrow-cont {
    width: 0.8vw;
    height: auto;
    /* background-color: yellow; */
    overflow: hidden;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.pmExplore-arrow {
    width: clamp(0.8vw, 0.8vw, 1vw);
    height: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    flex-shrink: 0;
    overflow: hidden;
    opacity: 0;
}

#pmExplore-arrow-a {
    /* background-color: orange; */
}

#pmExplore-arrow-b {
    /* background-color: white; */
}





#pmAwards-cont {
    width: 15vw;
    height: auto;
    display: flex;
    flex-flow: column nowrap;
    /* background-color: yellow; */
}

#pmAwards-lbl-cont {
    /* background-color: yellow; */
}

#pmAwards-txt-cont {
    /* background-color: violet; */
}

#pmAwards-lbl {
    width: 100%;
    height: 100%;
    font-size: 0.55vw;
    opacity: 0;
    /* background-color: white; */
}

#pmAwards-txt {
    width: 100%;
    height: 100%;
    font-size: 0.8vw;
    opacity: 0;
}






#pmDesc {
    width: 90%;
    height: auto;
    /* background-color: yellow; */
    margin-top: 2vh;
    font-family: var(--ff-secondary);
    font-size: 1vw;
    line-height: 1.2vw;
    /* opacity: 0; */
}


#pmClose {
    width: auto;
    height: 2.5vh;
    /* background-color: violet; */
    position: fixed;
    right: 8%;
    top: 6%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 1vh;
}

#pmXsvg {
    width: 25%;
    height: 100%;
    /* background-color: yellow; */
    fill:none;
    stroke:black;
    stroke-width:2;
    stroke-linecap:round;
}

#pmClose-lbl {
    font-family: var(--ff-secondary);
    font-size: 0.55vw;
}




#pmImages-cont {
    width: 100%;
    height: auto;
    margin-bottom: 25vh;
    /* background-color: red; */
    display: flex;
    flex-flow: column nowrap;
    /* justify-content: center; */
    align-items: center;
    gap: 25vh;
    opacity: 0;
}

.pmImages-shot {
    width: 60vw;
    aspect-ratio: 16 / 9;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 1;
}


#pmNavRail-cont {
    width: 5vw;
    height: auto;
    /* background-color: purple; */
    position: fixed;
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 1vh;
    opacity: 0;
}

#pmNavRail-fthumb {
    width: 95%;
    aspect-ratio: 16 / 9;
    /* background-color: yellow; */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.pmNavRail-thmb {
    width: 95%;
    aspect-ratio: 16 / 9;
    /* background-color: yellow; */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#pmNavRail-select {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: white solid 0.1vw;
    position: absolute;
    top: 0%;
}


/*******CATALOG VIEW**********/
#catalog-cont {
    width: 100vw;
    height: 100vh;
    /* background-color: lavender; */
    position: absolute;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
}

#card-view-nav {
    width: auto;
    height: 5vh;
    /* background-color: black; */
    position: absolute;
    top: 4.4vh;
    right: 12vh;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    /* align-items: center; */
    transform-origin: left;
}

#card-view-nav .cvtext {
    font-size: 0.7vw;
}

#card-view-nav > .nav-line {
    width: 100%;
}

#catalog-carousel {
    width: 60vmax;
    height: 200vh;
    /* background-color: purple; */
    position: relative;
    top: 50%;
    left: 50%;
    margin: -100vh 0 0 -30vmax;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: space-between;
    gap: 20vh;
}

.catalog-project {
    width: 100%;
    height: 50vh;
    /* background-color: pink; */
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    gap: 1vh;
}

.cproj-title {
    width: 100%;
    height: 80%;
    /* background-color: green; */
    font-family: var(--ff-tertiary);
    font-size: 11vw;
    white-space: pre;
    line-height: 1;
    display: flex;
    align-self: center;
}

.cproj-desc {
    width: 100%;
    height: auto;
    /* background-color: black; */
    color: white;
    font-family: var(--ff-secondary);
    font-size: 0.7vw;
    display: flex;
    align-items: center;
    text-indent: 0.5vw;
    white-space: pre;
}

#cproj-3d {
    /* background-color: #ec2324; */
    /* background-color: rgba(255, 124, 124, 0.5); */
    width: 40vw;
    height: 20vw;
    aspect-ratio: 16 / 9;
    position: fixed;
    left: 45%;
    top: 35%;
    /* opacity: 0.5; */
    pointer-events: none;
    z-index: 2;
}

#cproj-1 {
    opacity: 0.2;
}

#cproj-2 {
    opacity: 0.2;
}

#cproj-3 {
    /* opacity: 0; */
}

#cproj-4 {
    opacity: 0.2;
}

#cproj-5 {
    opacity: 0.2;
}











/***********************ABOUT*************************/
.abt-body {
    background-color: #a2aeae;
}

#abt-wrap {
    width: 100%;
    height: 100vh;
    background-color: #a2aeae;
}

#abt-cont {
    width: 100%;
    height: auto;
    position: relative;
    background-color: #1c1c1c;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

#abt-backToTop {
    width: 5vw;
    height: 5vw;
    aspect-ratio: 1 / 1; /* maintains its size no matter the viewport resize recalculation */
    background-color: var(--clr-white);
    color: var(--clr-black);
    font-family: var(--ff-fourth);
    font-size: 0.9vh;
    position: fixed;
    bottom: 3vw;
    right: 3vw;
    z-index: 3;
    border-radius: 100%;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    filter: drop-shadow(20px 30px 30px rgba(0, 0, 0, 0.2));
    transform-origin: center;
    transition: transform 0.3s;
}

#abt-backToTop:hover {
    transform: scale(110%);
    transition-duration: 0.5s;
}

#abt-logo-btn {
    width: 15vh;
    height: 5vh;
    position: fixed;
    top: 4vh;
    left: 7.3vh;
    z-index: 3;
    /* background-color: green; */
}

#abt-logo-btn a {
    cursor: none;
}

#abt-logo-a {
    width: 25%;
    height: 100%;
    float: left;
    display: grid;
}

#abt-logo-b {
    width: 73%;
    height: 100%;
    float: right;
    /* background-color: red; */
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    gap: 0vw;
}

#abt-logo-a-a {
    opacity: 0;
}

#abt-logo-a-b { /*First shown*/
}

#abt-logo-a-c {
    opacity: 0;
}

#abt-logo-c {
    width: 100%;
    height: 30%;
    font-family: var(--ff-logo);
    font-size: 0.60vw;
    font-weight: 600;
    overflow: hidden;
    display: flex;
    flex-flow: column nowrap;
}

#abt-logo-c-a {
    /* background-color: yellow; */
    color: #f2efea;
    position: relative;
}

#abt-logo-c-b {
    /* background-color: orange; */
    color: #f2efea;
    position: relative;
}

#abt-logo-d {
    width: 100%;
    height: 30%;
    font-family: var(--ff-logo-j);
    font-size: 0.50vw;
    font-weight: 600;
    /* letter-spacing: -2px; */
    overflow: hidden;
    display: flex;
    flex-flow: column nowrap;
    /* background-color: red; */
}

#abt-logo-d-a {
    /* background-color: yellow; */
    color: #f2efea;
    position: relative;
}

#abt-logo-d-b {
    /* background-color: orange; */
    color: #f2efea;
    position: relative;
}











#abt-sec-1 {
    width: 100%;
    height: 200vh;
    background-image: url('media/about-bg.png');
    /* background-attachment: fixed; */
    background-repeat: no-repeat;
    background-position: 40% 20%;
    background-size: cover;
}

#abt-cont::before {
    background-color: #a2aeae;
    opacity: 1;
    content: "";
    inset: 0;
    position: absolute;
    transition: opacity 0.3s ease;
}

#abt-cont.show-overlay::before {
    opacity: 0;
}

#abt-sec1-sticky {
    width: auto;
    height: 150vh;
    position: relative;
    top: 10vh;
    /* background-color: red; */
}

#abt-sec1-centerpc { 
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    position: sticky;
    /* background-color: green; */
    top: 20vh; /*tells a sticky element where to start and keep sticking*/
}

#abt-sec1-title {
    font-family: var(--ff-tertiary);
    color: var(--clr-white);
    font-size: 10vw;
    top: 20vh;
    opacity: 0;
}

#abt-sec1-desc {
    width: 50vw;
    height: auto;
    font-family: var(--ff-fourth);
    color: var(--clr-white);
    top: 45vh;
    font-size: 1vw;
    text-align: center;
    line-height: 1.7vw;
    opacity: 0;
}












#abt-sec1-stickyrw {
    width: auto;
    height: 107vh;
    position: absolute;
    top: 60vh;
    right: 8vw;
    opacity: 0;
    /* background-color: purple; */
}




#abt-sec1-rwcont {
    width: auto;
    height: 4vw;
    position: sticky;
    top: 70vh;
    right: 8vw;
    /* background-color: purple; */
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}






#abt-sec1-rwupper {
    width: 100%;
    height: 30%;
    /* background-color: blue; */
}

#abt-sec1-rwproj {
    width: auto;
    height: 70%;
    float: left;
    /* background-color: green; */
    font-family: var(--ff-fourth);
    color: var(--clr-white);
    font-size: 2.5vw;
    display: flex;
    align-items: center;
    /* opacity: 0; */
}










#abt-sec1-rw {
    width: auto;
    height: auto;
    float: left;
    /* background-color: red; */
    font-family: var(--ff-fourth);
    color: var(--clr-white);
    font-size: 0.8vw;
    /* display: flex; */
    /* align-items: center; */
    margin-right: 0.2vw;
}





#abt-sec1-rwacont {
    width: auto; /*20*/
    height: auto; /*30*/
    float: left;
    /* background-color: green; */
    
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

#abt-sec1-arrow {
    width: clamp(0.8vw, 1vw, 1vw);
    height: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    flex-shrink: 0;
}








#abt-sec-2 {
    width: 100%;
    height: 100vh;
    /* background-color: indianred; */
    background-color: white;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

#abt-sec2-leftpanel {
    width: 50%;
    height: 100%;
    background-color: white;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

#abt-sec2-contents {
    width: 75vh;
    height: 35vh;
    display: flex;
    flex-flow: column nowrap;
    justify-content: left;
    gap: 5vh;
    /* background-color: violet; */
}

#abt-sec2-lblcont {
    width: auto;
    height: auto;
    /* background-color: pink; */
    /* display: inline-block; */
    overflow: hidden;
}

#abt-sec2-lbl {
    font-family: var(--ff-fourth);
    color: var(--clr-black);
    opacity: 0.5;
    font-size: 0.8vw;
    top: -100%;
    position: relative;
}

#abt-sec2-titlecont {
    width: auto;
    height: 2.5vh;
    /* background-color: purple; */
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    color: var(--clr-black);
    font-family: var(--ff-tertiary);
    font-size: 1.3vw;
    display: inline-flex;
    opacity: 0;
}

#sec2-wrapper {
    width: 0.5vw;
    height: 2.5vh;
    overflow: hidden;
    /* background-color: blue; */
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: left;
}

#sec2-title-wrapper {
    /* background-color: #ec2324; */
    width: auto;
    height: 2.5vh;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: left;
    overflow: hidden;
}

#abt-sec2-desc {
    width: 100%;
    height: auto;
    /* background-color: yellow; */
    font-family: var(--ff-fourth);
    color: var(--clr-black);
    font-size: 0.8vw;
    position: relative;
    opacity: 0;
}

.desc-item {
    position: absolute;
    /* background-color: yellow; */
    z-index: 1;
    opacity: 0;
}

#abt-sec2-rightpanel {
    width: 50%;
    height: 100%;
    position: relative;
    /* overflow: hidden; */
}

.srv_img {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 40% 85%;
    background-size: cover;
    opacity: 0;
    position: absolute;
    z-index: 1;
}

.srv_img:nth-child(1) {
    background-image: url('media/1webdesign.jpg');
}

.srv_img:nth-child(2) {
    background-image: url('media/1webdev.jpg');
}

.srv_img:nth-child(3) {
    background-image: url('media/1logomaking.jpg');
}





#abt-sec-3 {
    width: 100%;
    height: 100vh;
    margin-top: 290vh;
    background-color: var(--clr-white);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    gap: 4vh;
    z-index: 2;
    border-radius: 0 0 7vmax 7vmax;
}

#sec3-title-cont {
    width: auto;
    height: auto;
    font-size: 0.8vw;
    /* background-color: indianred; */
    position: relative;
    overflow: hidden;
}

#sec3-title {
    font-family: var(--ff-fourth);
    color: var(--clr-black);
    font-size: 0.8vw;
    top: -100%;
    position: relative;
}

#sec3-desc {
    width: auto;
    height: auto;
    /* background-color: blueviolet; */
    font-family: var(--ff-tertiary);
    color: var(--clr-black);
    font-size: 3vw;
    margin: 0 10vw 0;
    text-align: center;
    opacity: 0;
}

#sec3-cert-cont {
    width:90vw;
    height: 40vh;
    /* background-color: green; */
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1vh;
    opacity: 0;
}

.sec3-certificate {
    width: 15vw;
    height: 100%;
    /* background-color: red; */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    filter: drop-shadow(20px 30px 30px rgba(0, 0, 0, 0.2));
}

.cert-overlay {
    /* background-color: yellow; */
    /* opacity: 0.5; */
    width: 100%;
    height: 100%;
    font-family: var(--ff-fourth);
    font-size: 0.6vw;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    line-height: 0.1;
    opacity: 0;
}

.cert-overlay p:nth-child(2) { /*Title*/
    font-weight: 600;
    margin-bottom: 0.3vw;
}

.cert-overlay p:nth-child(3) { /*Proj Name*/
    margin-bottom: 0.3vw;
}

.cert-overlay > h3 { /*Platform*/
    font-size: 0.5vw;
    margin-top: 1vw;
}

.award-leaf {
    background-image: url('media/award-leaf.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* background-color: pink; */
    width: 100%;
    height: 10vh;
    margin-bottom: 2vh;
}





/* #abt-sec-4 {
    width: 100%;
    height: 100vh;
    margin-top: 290vh;
    background-color: lavender;
} */

#abt-footer {
    width: 100%;
    height: 100vh;
    margin-top: 100vh;
    background-color: #1c1c1c;
    z-index: 0;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}




#footer-tronfo-cont {
    width: 100%;
    height: 100vh;
    /* background-color: green; */
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    margin-top: 9vh;
}





#footer-intro {
    width: 50%;
    height: 100%;
    /* background-color: black; */
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

#footer-intro-overview {
    width: 80%;
    height: 80%;
    /* background-color: green; */
    font-family: var(--ff-tertiary);
    color: var(--clr-txtfoot);
    font-size: 5vh;
}

#footer-intro-copyright {
    width: 80%;
    height: 20%;
    /* background-color: darkgoldenrod; */
    color: var(--clr-txtfoot);
    font-family: var(--ff-fourth);
    font-size: 1.2vh;
    line-height: 3vh;
}






#footer-info {
    width: 50%;
    height: 100%;
    /* background-color: purple; */

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

#main-info-cont {
    width: 80%;
    height: 80%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    /* align-items: center; */
    gap: 1vh;
    /* background-color: brown; */
}









.info-cont {
    width: 25vw;
    height: 50vh;
    /* background-color: red; */
    display: flex;
    flex-flow: column nowrap;
    /* justify-content: center; */
    /* align-items: center; */
}

.info-lbl {
    color: var(--clr-white);
    font-family: var(--ff-fourth);
    font-size: 1.2vh;
    /* font-weight: 600; */
    margin-bottom: 3vh;
}

.info-btn {
    color: var(--clr-txtfoot);
    font-family: var(--ff-tertiary);
    font-size: 2vh;
    margin-bottom: 1vh;
    text-decoration: none;
    transition: color 0.5s;
    cursor: none;
}

.info-btn:hover {
    color: var(--clr-txthover);
    transition-duration: 0.5s;
}

#main-info-cont span:nth-child(3) a {
    font-size: 2.5vh;
    color: var(--clr-white);
    text-decoration: underline;
}









#info-timesign-cont {
    width: 80%;
    height: 20%;
    /* background-color: yellow; */
    color: var(--clr-txtfoot);
    font-family: var(--ff-fourth);
    font-size: 1.2vh;
    line-height: 3vh;
}

#info-timesign-cont span {
    color: red;
    font-weight: 600;
}


#footer-jap {
    width: 100%;
    height: 30vh;
    font-family: var(--ff-jap);
    font-size: 15vw;
    text-align: center;
    /* background-color: yellow; */
    color: var(--clr-jap);
    position: relative;
    bottom: -5vh;
}

.barba-box-cont {
    width: 100%;
    height: 100vh;
    position: fixed;
    pointer-events: none;
    z-index: 13;
    overflow: hidden;
}

.barba-box {
    position: absolute;
    width: 100%;
    height: 100vh;
    /* background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(70px); */
    z-index: 10;
    margin-left: -100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    inset: 0;
    background: rgb(255 255 255 / 8%);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
}

/* Sharp grain layered over the blurred background */
.barba-box::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23noise)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
}

.barba-box > * {
  position: relative;
  z-index: 1;
}

#mobile-menu-icon {
    position: fixed;
    width: 100%;
    height: 13vh;
    bottom: 0vw;
    /* background-color: black; */
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 1.5vh;
    opacity: 0;
    pointer-events: none;
    /* display: none; */
    z-index: 12;
}

.mobile-menu-icon {
    background-color: var(--clr-white);
    width: 8vh;
    height: 0.2vh;
}

#mobile-menu-cont {
    background-color: var(--clr-txthover);
    position: fixed;
    width: 100%;
    height: 90svh;
    bottom: 0;
    z-index: 11;
    display: flex;
    flex-flow: column nowrap;
    justify-content:right;
    align-items: flex-end;
}

.m-menu-section:nth-child(1) {
    margin-top: 7vw;
}

.m-menu-section {
    /* background-color: gray; */
    width: 80%;
    margin-left: 0;
    margin-right: 0;
    height: auto;
    position: relative;
    border-bottom: 2px solid white;
    margin-bottom: 2vw;
}

.m-menu-section-title {
    font-family: var(--ff-fourth);
    font-size: 1.5vw;
    width: 100%;
    height: auto;
    color: var(--clr-white);
    /* background-color: blue; */
}

.m-menu-info {
    /* background-color: violet; */
    width: 100%;
    height: auto;
    display: flex;
    flex-flow: row nowrap;
}

.m-menu-section-btn {
    font-family: var(--ff-fourth);
    color: var(--clr-white);
    font-size: 8vw;
    width: 90%;
    height: 100%;
    float: left;
    text-decoration: none;
    /* background-color: green; */
}

.m-menu-section-arrow {
    /* background-color: red; */
    width: 12%;
    height: 100%;
    float: right;
}

#m-menu-desc {
    font-size: 1.3vmax;
    color: white;
    font-family: var(--ff-fourth);
    width: 80%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 5vw;
    /* background-color: green; */
    border-bottom: 2px solid white;
    box-sizing: border-box;
    padding-right: 15vw;
}

#swipe-instr-overlay {
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100vh;
    position: fixed;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    z-index: 99;
    opacity: 0;
    inset: 0;
    pointer-events: none;
}

#swipe-outer {
    background-color: rgba(0,0,0,0);
    width: 2vh;
    height: 2vh;
    border-radius: 100vmax;
    border: 0.15vmax solid white;
    opacity: 0;
    /* aspect-ratio: 1/1; */
}

#swipe-inner {
    background-color: var(--clr-white);
    width: 0.8vh;
    height: 0.8vh;
    border-radius: 100vmax;
    top: 50%;
    left: 50%;
    margin: -0.4vh -0.4vh -0.4vh -0.4vh;
    aspect-ratio: 1/1;
    opacity: 0;
    position: absolute;
}

#swipe-instrText {
    font-family: var(--ff-fourth);
    color: var(--clr-white);
    font-size: 1vh;
    position: absolute;
    margin-top: 10vh;
}

/* NOTES: 
-For the #home-cont nav and #home-cont footer, you will only need to adjust the gap and nothing else. Adjust the gap based on the screen size so the buttons will remain properly distant to each other.
*/


/***** MEDIA QUERIES *****/
/* Extra-large touch */
@media (min-width: 1440px) and (hover: none) and (pointer: coarse) {
    #mqindicator {
        background-color: burlywood;
    }

    #projArea_Carousel_Block {
        top: 6vh;
    }
}

/* Full desktop */
@media (min-width: 1440px) and (hover: hover) and (pointer: fine) {
    #mqindicator {
        background-color: yellow;
    }
    
    #projArea_Carousel_Block {
        top: 6vh;
    }

    .ptitle {
        top: 12.8vmax;
        /* font-size: 12vh; */
        align-items: flex-end;
        font-size: clamp(5rem, 18cqw, 18rem);
        /* background-color: purple; */
    }

    #attrBelt {
        height: 1.5vh;
    }

    .pAttr {
        font-size: 1.5vh;
        height: 1.5vh;
        /* background-color: purple; */
    }
}



/* Desktop / laptop large X */
@media (min-width: 1024px) and (max-width: 1439px) and (hover: hover) and (pointer: fine) {
    #mqindicator {
        background-color: orange;
    }
}

/* Large tablet landscape - touch X */
@media (min-width: 1024px) and (max-width: 1439px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    /*
        Common viewport sizes that WILL match
        Viewport (W × H)	Typical devices
        1024 × 768	iPad Mini (Landscape)
        1080 × 810	Some Android tablets
        1112 × 834	Older iPad Pro 10.5"
        1180 × 820	iPad Air, iPad 10th Gen
        1194 × 834	iPad Pro 11"
        1200 × 800	Many Android tablets
        1280 × 800	Galaxy Tab S series, Pixel Tablet, Lenovo, Xiaomi
        1280 × 720	Some 16:9 Android tablets
        1280 × 960	Some 4:3 Android tablets
        1366 × 912	Large Android tablets
        1373 × 1032	iPad Pro 13"
        1400 × 900	Large Android tablets (still matches since width < 1440)
    */

    /*ABOUT*/
    #abt-logo-btn {
        /* background-color: purple; */
        width: 11vw;
        height: 4vw;
    }

    #abt-logo-c {
        height: 1vw;
        font-size: 0.9vw;
        /* background-color: blue; */
    }

    #abt-logo-d {
        height: 1.2vw;
        font-size: 0.8vw;
        /* background-color: red; */
    }

    #abt-backToTop {
        width: 8vw;
        height: 8vw;
    }

    #abt-sec1-sticky {
        width: auto;
        height: 125vh;
        position: relative;
        top: 25vh;
        /* background-color: red; */
    }

    #abt-sec1-title {
        font-size: 12vw;
    }

    #abt-sec1-desc {
        width: 65vw;
        font-size: 1.3vw;
        line-height: 1.7vw;
    }

    #abt-sec1-stickyrw {
        height: 120vh;
        right: 11vw;
        top: 30vh; /*20*/
        /* background-color: purple; */
    }

    #abt-sec1-rw {
        font-size: 1vw;
        /* background-color: red; */
    }

    #abt-sec1-rwcont {
        gap: 0.8vw;
    }

    #abt-sec1-arrow {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #abt-sec1-rwproj {
        font-size: 3.3vw;
    }




    #abt-sec2-contents {
        width: 50vh;
        height: 35vh;
        gap: 3vh;
        /* background-color: violet; */
    }

    #abt-sec2-lbl {
        font-size: 1vw;
    }

    #abt-sec2-titlecont {
        font-size: 1.7vw;
    }

    #abt-sec2-desc {
        font-size: 1vw;
    }

    #sec2-wrapper {
        width: 0.8vw;
        /* background-color: violet; */
    }


    #abt-sec-3 {
        /* background-color: pink; */
    }

    #sec3-title {
        font-size: 1vw;
    }

    #sec3-cert-cont {
        gap: 0vh;
        width: 80vw;
        height: 28vh;
        /* background-color: violet; */
    }

    .sec3-certificate {
        width: 13vw;
        height: auto;
        aspect-ratio: 320/448;
        filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));
    }



    #abt-footer {
        height: 80vh;
        /* margin-top: 7vh; */
        /* background-color: black; */
    }

    #footer-tronfo-cont {
        height: 50vh;
        /* background-color: green; */
    }

    #footer-intro-overview {
        font-size: 3.2vh;
    }
/* 
    #footer-intro {
        background-color: indianred;
    }

    #footer-intro-overview {
        background-color: green;
    }

    #footer-intro-copyright {
        background-color: darkgoldenrod;
    }

    #footer-info {
        background-color: purple;
    }

    #main-info-cont {
        background-color: brown;
    }

    .info-cont {
        background-color: red;
    }

    #footer-jap {
        background-color: yellow;
    } */

    /***/


    #mqindicator {
        background-color: green;
    }

    .cursor {
        opacity: 0;
        pointer-events: none;
    }

    #home-catalog-cont a {
        font-size: 1vw;
    }

    .nav-line {
        height: 0.07vw;
    }

    #home-logo-btn {
        /* background-color: purple; */
        width: 11vw;
        height: 4vw;
    }
    
    .logo-a {
        background-size: 1.8vw;
        /* background-color: black; */
    }

    #home-logo-c {
        height: 1vw;
        font-size: 0.9vw;
        /* background-color: blue; */
    }

    #home-logo-d {
        height: 1.2vw;
        font-size: 0.8vw;
        /* background-color: red; */
    }

    #home-progress {
        width: 4vw;
    }

    #home-foot-nav {
        width: 8vw;
        height: 4vw;
        /* background-color: purple; */
    }

    #home-foot-nav a {
        font-size: 1vw;
    }

    #home-scsw-illu {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #projArea_Carousel_Block {
        top: 6.5vh;
    }

    /*******CATALOG VIEW**********/
    :root {
        --catCarouselY: -198; /**/
    }

    #card-view-nav .cvtext {
        font-size: 1vw;
    }

    #catalog-carousel {
        /* background-color: purple; */
        gap: 22vh;
    }

    .catalog-project {
        /* background-color: pink; */
        gap: 0.1vh; 
    }

    .cproj-title {
        font-size: 12vw;
    }

    .cproj-desc {
        /* background-color: black; */
        font-size: 1vw;
    }

    #cproj-3d {
        /* background-color: #ec2324; */
        width: 100vw;
        height: 30vh;
        /* top: 50%; */
        left: 20%;
    }

    /*PROJECT VIEW*/
    #pmTitle {
        font-size: 15vw;
    }

    #pmAttr-cont {
        /* background-color: rosybrown; */
    }

    .pm-m-cont {
        height: 2.4vw;
        /* background-color: red; */
    }

    #pmType-lbl {
        font-size: 0.8vw;
        /* background-color: blue; */
    }

    #pmType-txt {
        font-size: 1vw;
    }

    #pmRole-lbl {
        font-size: 0.8vw;
    }

    #pmRole-txt {
        font-size: 1vw;
    }

    #pmCompleted-lbl {
        font-size: 0.8vw;
    }

    #pmCompleted-txt {
        font-size: 1vw;
    }

    #pmExplore-lbl {
        font-size: 0.8vw;
    }

    #pmExplore-txt {
        font-size: 1vw;
        /* background-color: green; */
    }

    #pmExplore-arrow-cont {
        width: 1.5vw;
        /* background-color: blue; */
    }

    .pmExplore-arrow {
        width: clamp(1vw, 1.3vw, 1.5vw);
    }

    #pmAwards-lbl {
        font-size: 0.8vw;
    }

    #pmAwards-txt {
        font-size: 1vw;
    }

    #pmDesc {
        font-size: 1.5vw;
        line-height: 1.8vw;
        /* background-color: black; */
        width: 100%;
    }

    #pmClose-lbl {
        font-size: 1vw;
        /* background-color: lavender; */
    }
}

/* Large tablet portrait - touch X */
@media (min-width: 1024px) and (max-width: 1439px) and (orientation: portrait) and (hover: none) and (pointer: coarse) { 
    /* TEST WITH:
    1032 × 1373   ← iPad Pro 13" (most important)
    1080 × 1440
    1200 × 1600
    1280 × 1707
    1400 × 1867
    */

    /**ABOUT**/
    #abt-backToTop {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #abt-logo-btn {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #abt-sec1-centerpc { 
        top: 25vh;
    }

    #abt-sec1-title {
        font-size: 13vw;
    }

    #abt-sec1-desc {
        width: 85vw;
        font-size: 3vw;
        line-height: 4.5vw;
        text-align: justify;
    }

    #abt-sec1-stickyrw {
        height: 102vh;
        /* background-color: purple; */
    }

    #abt-sec1-rwcont {
        height: 10vw;
        top: 75vh;
        /* background-color: red; */
    }

    #abt-sec1-rwproj {
        font-size: 6vw;
    }

    #abt-sec1-rw {
        font-size: 2vw;
    }

    #abt-sec1-arrow {
        opacity: 0;
        pointer-events: none;
        display: none;
    }



    #abt-sec-2 {
        /* width: 10%; */
        flex-flow: column nowrap;
    }

    #abt-sec2-leftpanel {
        width: 100%;
        height: 50%;
    }

    #abt-sec2-contents {
        width: 40vmax;
        gap: 2.5vh;
        /* background-color: red; */
    }

    #abt-sec2-lbl {
        font-size: 2.5vw;
    }

    #abt-sec2-titlecont {
        font-size: 3vw;
    }

    #sec2-wrapper {
        /* background-color: red;  */
        width: 1.5vw;
        height: 2.8vw;
    }

    #sec2-title-wrapper {
        height: 2.9vw;
        /* background-color: red; */
    }

    #abt-sec2-desc {
        font-size: 1.5vmax;
    }

    #abt-sec2-rightpanel {
        width: 100%;
        height: 50%;
    }
    

    #abt-sec-3 {
        height: auto;
        min-height: 100vh;
        justify-content: flex-start;
        padding: 10vh 0;
        gap: 5vh;
        /* overflow: hidden; */
    }

    #sec3-title {
        font-size: 2.5vw;
        top: -100%;
    }

    #sec3-desc {
        font-size: 5.8vw;
        /* background-color: pink; */
    }

    #sec3-cert-cont {
        width: 100%;
        height: auto;
        flex-flow: row wrap;
        justify-content: center;
        gap: 5vh;
        opacity: 1;
        align-items: center;
        /* background-color: pink; */
    }

    .sec3-certificate {
        width: 50vw;
        height: auto;
        aspect-ratio: 320/448;
        filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));
    }

    .cert-overlay {
        font-size: 3vw;
    }

    .cert-overlay > h3 { /*Platform*/
        font-size: 3vw;
        margin-top: 5vw;
    }





    #abt-footer {
        height: 70vh;
        margin-top: -4vh;
        flex-flow: column nowrap;
    }

    #footer-tronfo-cont {
        /* background-color: gray; */
        height: auto;
        flex-flow: column nowrap;
    }


    #footer-intro {
        width: 85%;
        height: auto;
        gap: 2vh;
        /* background-color: black; */
    }

    #footer-intro-overview {
        width: 100%;
        height: auto;
        /* background-color: green; */
        font-size: 3vh;
    }

    #footer-intro-copyright {
        opacity: 0;
        pointer-events: none;
        display: none;
    }





    #footer-info {
        width: 85%;
        height: auto;
        margin-top: 4vh;
        gap: 3vh;
        /* background-color: purple; */
    }

    #main-info-cont {
        width: 100%;
        height: 30vh;
        flex-flow: column wrap;
        justify-content: flex-start;
        gap: 5vh;
        /* background-color: brown; */
    }


    .info-cont {
        width: fit-content;
        height: auto;
        /* column-gap: 10vw; */
        /* background-color: red; */
    }

    .info-lbl {
        font-size: 1vh;
        margin-bottom: 2.5vh;
        /* background-color: blue; */
    }

    .info-btn {
        font-size: 1.8vh;
        margin-bottom: 1vh;
    }

    #main-info-cont span:nth-child(3) {
        margin-left: auto
    }

    #main-info-cont span:nth-child(3) a {
        font-size: 1.8vh;
    }



    #info-timesign-cont {
        width: 100%;
        /* background-color: black; */
        font-size: 1vh;
        line-height: 2vh;
    }



    #footer-jap {
        /* background-color: pink; */
        /* width: 100%; */
        width: 150%;
        height: 20vh;
        bottom: -3vh;
        font-size: 15vw;
        /* font-family: var(--ff-jap);
        font-size: 15vw;
        text-align: center;
        color: var(--clr-jap);
        position: relative;
        bottom: -5vh; */
    }

    /**/
    .splash-cards {
        border-radius: 5vh;
    }

    .splash-cards::before {
        border-radius: 5vh;
    }

    #home-wrap {
        height: 100svh;
    }

    #mqindicator {
        background-color: purple;
    }

    .cursor {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #projArea_Carousel_Block {
        top: 5vh;
    }
    
    #projArea {
        width: 100%;
        /* background-color: yellow; */
    }

    #titleBelt {
        height: 15vh;
        /* background-color: purple; */
    }

    .ptitle {
        font-size: 18vh;
        top: 11.9vmax;
        /* background-color: purple; */
    }

    #attrBelt {
        height: 1.5vh;
    }

    .pAttr {
        font-size: 1.6vh;
        height: 1.5vh;
        /* background-color: purple; */
    }

    #cardCarousel {
        width: 80vw;
        height: 50vh;
    }

    .project {
        border-radius: 5vh;
    }

    #mobile-menu-icon {
        opacity: 1;
        pointer-events: auto;
        display: flex;
    }

    /*Unnecessary below*/

    #home-logo-btn {
        /* background-color: purple; */
        top: 5vh;
        width: 15vh;
        height: 4vw;
        opacity: 0;
        pointer-events: none;
        display: none;
    }
    
    .logo-a {
        background-size: 2.5vw;
        /* background-color: black; */
    }

    #home-logo-c {
        height: 1.5vw;
        font-size: 1.3vw;
        /* background-color: blue; */
    }

    #home-logo-d {
        height: 1.8vw;
        font-size: 1.2vw;
        /* background-color: red; */
    }

    #home-catalog-btn {
        width: auto;
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #home-catalog-cont a {
        font-size: 1.5vw;
    }

    .nav-line {
        height: 0.07vw;
    }

    #home-progress {
        width: 4vw;
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #home-foot-nav {
        width: 12vw;
        height: 5vh;
        opacity: 0;
        pointer-events: none;
        display: none;
        /* background-color: purple; */
    }

    #home-foot-nav a {
        font-size: 1.5vw;
    }

    #home-scsw-illu {
        opacity: 0;
        pointer-events: none;
        display: none;
    }


    /*CATALOG*/
    :root {
        --catCarouselY: -148; /**/
    }

    #card-view-nav {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #catalog-carousel {
        /* background-color: black; */
        top: 55%;
        height: 161vh;
        gap: 12vh;
    }

    .catalog-project {
        /* background-color: pink; */
        gap: 3vh;
    }

    .cproj-title {
        /* background-color: green; */
        font-family: var(--ff-primary);
        font-size: 20vh;
        justify-content: center;
    }

    .cproj-desc {
        /* background-color: black; */
        font-size: 1.4vh;
        justify-content: center;
    }

    #cproj-3d {
        width: 100vw;
        height: 40vh;
        top: 60%;
        left: 50%;
        margin: -20vh 0 0 -50vw;
        /* background-color: purple; */
    }


    /* PROJECT VIEW */
    #pmTitle {
        font-size: 16vw;
        /* background-color: pink; */
    }

    #pmClose {
        /* background-color: blue; */
    }

    #pmXsvg {
        width: 100%;
        height: 100%;
        stroke-width:3;
    }

    #pmClose-lbl {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #pmInfo-cont {
        width: 65vw;
        margin-bottom: 20vh;
    }

    #pmAttr-cont {
        /* background-color: rosybrown; */
    }

    .pm-m-cont {
        height: 4vw;
        width: 20vw;
        /* background-color: red; */
    }

    #pmType-lbl {
        font-size: 1.2vw;
        /* background-color: blue; */
    }

    #pmType-txt {
        font-size: 1.6vw;
    }

    #pmRole-lbl {
        font-size: 1.2vw;
    }

    #pmRole-txt {
        font-size: 1.6vw;
    }

    #pmCompleted-lbl {
        font-size: 1.2vw;
    }

    #pmCompleted-txt {
        font-size: 1.6vw;
    }

    #pmExplore-lbl {
        font-size: 1.2vw;
    }

    #pmExplore-txt {
        font-size: 1.6vw;
        /* background-color: green; */
    }

    #pmExplore-arrow-cont {
        width: 2vw;
        /* background-color: blue; */
    }

    .pmExplore-arrow {
        width: clamp(1vw, 2vw, 2vw);
    }

    #pmAwards-lbl {
        font-size: 1.2vw;
    }

    #pmAwards-txt {
        font-size: 1.6vw;
    }

    #pmAwards-cont {
        width: 20vw;
    }

    #pmDesc {
        font-size: 2vw;
        line-height: 2.8vw;
        /* background-color: black; */
        width: 100%;
    }

    #pmNavRail-cont {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #pmImages-cont {
        /* background-color: red; */
        gap: 15vh;
    }

    .pmImages-shot {
        width: 85vw;
    }
}




/* Desktop / laptop medium */
@media (min-width: 769px) and (max-width: 1023px) and (hover: hover) and (pointer: fine) {
    #mqindicator {
        background-color: brown;
    }

    #projArea_Carousel_Block {
        top: 6.5vh;
    }

    #attrBelt {
        height: 1.5vh;
        /* background-color: purple; */
    }

    .pAttr {
        top: 20%;
        font-size: 1.5vh;
        height: 1.5vh;
    }
}

/* Tablet landscape - touch X */ 
@media (min-width: 769px) and (max-width: 1023px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    /*
    TEST WITH:
    800 × 1280
    820 × 1180
    834 × 1194
    960 × 600 (generic responsive test)
    1023 × 700 (upper breakpoint test)
    */

    #mqindicator {
        background-color: pink;
    }

    /*ABOUT*/
    #abt-logo-btn {
        /* background-color: purple; */
        width: 11vw;
        height: 4vw;
    }

    #abt-logo-c {
        height: 1vw;
        font-size: 0.9vw;
        /* background-color: blue; */
    }

    #abt-logo-d {
        height: 1.2vw;
        font-size: 0.8vw;
        /* background-color: red; */
    }

    #abt-backToTop {
        width: 8vw;
        height: 8vw;
    }

    #abt-sec1-sticky {
        width: auto;
        height: 125vh;
        position: relative;
        top: 25vh;
        /* background-color: red; */
    }

    #abt-sec1-title {
        font-size: 12vw;
    }

    #abt-sec1-desc {
        width: 65vw;
        font-size: 1.3vw;
        line-height: 1.7vw;
    }

    #abt-sec1-stickyrw {
        height: 120vh;
        right: 11vw;
        top: 30vh; /*20*/
        /* background-color: purple; */
    }

    #abt-sec1-rw {
        font-size: 1vw;
        /* background-color: red; */
    }

    #abt-sec1-rwcont {
        gap: 0.8vw;
    }

    #abt-sec1-arrow {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #abt-sec1-rwproj {
        font-size: 3.3vw;
    }


    #abt-sec2-contents {
        width: 50vh;
        height: 35vh;
        gap: 3vh;
        /* background-color: violet; */
    }

    #abt-sec2-lbl {
        font-size: 1vw;
    }

    #abt-sec2-titlecont {
        font-size: 1.7vw;
    }

    #abt-sec2-desc {
        font-size: 1vw;
    }

    #sec2-wrapper {
        width: 0.8vw;
        /* background-color: violet; */
    }


    #abt-sec-3 {
        /* background-color: pink; */
    }

    #sec3-title {
        font-size: 1vw;
    }

    #sec3-cert-cont {
        gap: 0vh;
        width: 80vw;
        height: 28vh;
        /* background-color: violet; */
    }

    .sec3-certificate {
        width: 13vw;
        height: auto;
        aspect-ratio: 320/448;
        filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));
    }


    
    #abt-footer {
        height: 80vh;
        /* margin-top: 7vh; */
        /* background-color: black; */
    }

    #footer-tronfo-cont {
        height: 50vh;
        /* background-color: green; */
    }

    #footer-intro-overview {
        font-size: 3.2vh;
    }

    /* 
    #footer-intro {
        background-color: indianred;
    }

    #footer-intro-overview {
        background-color: green;
    }

    #footer-intro-copyright {
        background-color: darkgoldenrod;
    }

    #footer-info {
        background-color: purple;
    }

    #main-info-cont {
        background-color: brown;
    }

    .info-cont {
        background-color: red;
    }

    #footer-jap {
        background-color: yellow;
    } */

    /***/

    .cursor {
        opacity: 0;
        pointer-events: none;
        display: none;
    }
    
    #home-scsw-illu {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #home-logo-btn {
        /* background-color: purple; */
        top: 5vh;
        width: 19vh;
        height: 3vw;
    }
    
    .logo-a {
        background-size: 1.8vw;
        /* background-color: black; */
    }

    #home-logo-c {
        height: 1vw;
        font-size: 0.9vw;
        /* background-color: blue; */
    }

    #home-logo-d {
        height: 1.3vw;
        font-size: 0.8vw;
        /* background-color: red; */
    }

    #home-catalog-btn {
        width: auto;
    }

    #home-catalog-cont a {
        font-size: 0.9vw;
    }

    .nav-line {
        height: 0.07vw;
    }

    #home-progress {
        width: 3vw;
    }

    #home-foot-nav {
        width: 8vw;
        height: auto;
        /* background-color: purple; */
    }

    #home-foot-nav a {
        font-size: 0.9vw;
    }

    #projArea_Carousel_Block {
        top: 6.5vh;
    }
    
    #projArea {
        width: 100%;
        /* background-color: grey; */
    }
    
    #titleBelt {
        height: 18vh;
        /* background-color: purple; */
    }

    .ptitle {
        font-size: 18vh;
        top: 11.9vmax;
        /* background-color: purple; */
    }

    #attrBelt {
        height: 1.5vh;
    }

    .pAttr {
        font-size: 1.4vh;
        height: 1.5vh;
        /* background-color: purple; */
    }

    /*******CATALOG VIEW**********/
    :root {
        --catCarouselY: -183; /**/
    }

    #card-view-nav .cvtext {
        font-size: 1vw;
    }

    .catalog-project {
        /* background-color: pink; */
        gap: 0.1vh; 
    }

    .cproj-title {
        font-size: 12vw;
    }

    .cproj-desc {
        /* background-color: black; */
        font-size: 1vw;
    }

    #cproj-3d {
        /* background-color: #ec2324; */
        width: 100vw;
        height: 30vh;
        /* top: 50%; */
        left: 20%;
    }

    /*PROJECT VIEW*/
    #pmTitle {
        font-size: 15vw;
    }

    #pmAttr-cont {
        /* background-color: rosybrown; */
    }

    .pm-m-cont {
        height: 2.5vw;
        gap: 0.6vh;
        /* background-color: red; */
    }

    #pmType-lbl {
        font-size: 0.8vw;
        /* background-color: blue; */
    }

    #pmType-txt {
        font-size: 1vw;
        /* background-color: gray; */
    }

    #pmRole-lbl {
        font-size: 0.8vw;
    }

    #pmRole-txt {
        font-size: 1vw;
    }

    #pmCompleted-lbl {
        font-size: 0.8vw;
    }

    #pmCompleted-txt {
        font-size: 1vw;
    }

    #pmExplore-lbl {
        font-size: 0.8vw;
    }

    #pmExplore-txt {
        font-size: 1vw;
        /* background-color: green; */
    }

    #pmExplore-arrow-cont {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #pmAwards-lbl {
        font-size: 0.8vw;
    }

    #pmAwards-txt {
        font-size: 1vw;
    }

    #pmDesc {
        font-size: 1.5vw;
        line-height: 1.8vw;
        margin-top: 6vh;
        /* background-color: black; */
        width: 100%;
    }

    #pmClose-lbl {
        font-size: 1vw;
        /* background-color: lavender; */
    }
}

/* Tablet portrait - touch X */  
@media (min-width: 769px) and (max-width: 1023px) and (orientation: portrait) and (hover: none) and (pointer: coarse) { 
    /*
    TEST THIS:
    800 × 1280 (most Android tablets)
    820 × 1180 (iPad / iPad Air)
    834 × 1194 (11-inch iPad Pro)
    900 × 1400 (generic large tablet)
    1023 × 1365 (upper breakpoint)
    */

    /**ABOUT**/
    #abt-backToTop {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #abt-logo-btn {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #abt-sec1-centerpc { 
        top: 25vh;
    }

    #abt-sec1-title {
        font-size: 13vw;
    }

    #abt-sec1-desc {
        width: 85vw;
        font-size: 3vw;
        line-height: 4.5vw;
        text-align: justify;
    }

    #abt-sec1-stickyrw {
        height: 102vh;
        /* background-color: purple; */
    }

    #abt-sec1-rwcont {
        height: 10vw;
        top: 75vh;
        /* background-color: red; */
    }

    #abt-sec1-rwproj {
        font-size: 6vw;
    }

    #abt-sec1-rw {
        font-size: 2vw;
    }

    #abt-sec1-arrow {
        opacity: 0;
        pointer-events: none;
        display: none;
    }



    #abt-sec-2 {
        /* width: 10%; */
        flex-flow: column nowrap;
    }

    #abt-sec2-leftpanel {
        width: 100%;
        height: 50%;
    }

    #abt-sec2-contents {
        width: 40vmax;
        gap: 2.5vh;
        /* background-color: red; */
    }

    #abt-sec2-lbl {
        font-size: 2.5vw;
    }

    #abt-sec2-titlecont {
        font-size: 3vw;
    }

    #sec2-wrapper {
        /* background-color: red;  */
        width: 1.5vw;
        height: 2.8vw;
    }

    #sec2-title-wrapper {
        height: 2.9vw;
        /* background-color: red; */
    }

    #abt-sec2-desc {
        font-size: 1.5vmax;
    }

    #abt-sec2-rightpanel {
        width: 100%;
        height: 50%;
    }
    

    #abt-sec-3 {
        height: auto;
        min-height: 100vh;
        justify-content: flex-start;
        padding: 10vh 0;
        gap: 5vh;
        /* overflow: hidden; */
    }

    #sec3-title {
        font-size: 2.5vw;
        top: -100%;
    }

    #sec3-desc {
        font-size: 5.8vw;
        /* background-color: pink; */
    }

    #sec3-cert-cont {
        width: 100%;
        height: auto;
        flex-flow: row wrap;
        justify-content: center;
        gap: 5vh;
        opacity: 1;
        align-items: center;
        /* background-color: pink; */
    }

    .sec3-certificate {
        width: 50vw;
        height: auto;
        aspect-ratio: 320/448;
        filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));
    }

    .cert-overlay {
        font-size: 3vw;
    }

    .cert-overlay > h3 { /*Platform*/
        font-size: 3vw;
        margin-top: 5vw;
    }





    #abt-footer {
        height: 70vh;
        margin-top: -4vh;
        flex-flow: column nowrap;
    }

    #footer-tronfo-cont {
        /* background-color: gray; */
        height: auto;
        flex-flow: column nowrap;
    }


    #footer-intro {
        width: 85%;
        height: auto;
        gap: 2vh;
        /* background-color: black; */
    }

    #footer-intro-overview {
        width: 100%;
        height: auto;
        /* background-color: green; */
        font-size: 3vh;
    }

    #footer-intro-copyright {
        opacity: 0;
        pointer-events: none;
        display: none;
    }





    #footer-info {
        width: 85%;
        height: auto;
        margin-top: 4vh;
        gap: 3vh;
        /* background-color: purple; */
    }

    #main-info-cont {
        width: 100%;
        height: 30vh;
        flex-flow: column wrap;
        justify-content: flex-start;
        gap: 5vh;
        /* background-color: brown; */
    }


    .info-cont {
        width: fit-content;
        height: auto;
        /* column-gap: 10vw; */
        /* background-color: red; */
    }

    .info-lbl {
        font-size: 1vh;
        margin-bottom: 2.5vh;
        /* background-color: blue; */
    }

    .info-btn {
        font-size: 1.8vh;
        margin-bottom: 1vh;
    }

    #main-info-cont span:nth-child(3) {
        margin-left: auto
    }

    #main-info-cont span:nth-child(3) a {
        font-size: 1.8vh;
    }



    #info-timesign-cont {
        width: 100%;
        /* background-color: black; */
        font-size: 1vh;
        line-height: 2vh;
    }



    #footer-jap {
        /* background-color: pink; */
        /* width: 100%; */
        width: 150%;
        height: 20vh;
        bottom: -3vh;
        font-size: 15vw;
        /* font-family: var(--ff-jap);
        font-size: 15vw;
        text-align: center;
        color: var(--clr-jap);
        position: relative;
        bottom: -5vh; */
    }

    /**/

    #home-wrap {
        height: 100svh;
    }

    .splash-cards {
        border-radius: 5vh;
    }

    .splash-cards::before {
        border-radius: 5vh;
    }

    #mqindicator {
        background-color:aqua;
    }

    #mobile-menu-icon {
        opacity: 1;
        pointer-events: auto;
        display: flex;
    }

    .cursor {
        opacity: 0;
        pointer-events: none;
        display: none;
    }
    
    #home-logo-btn {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #home-catalog-btn {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #home-scsw-illu {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #projArea_Carousel_Block {
        top: 6vh;
    }

    #projArea {
        width: 100%;
        /* background-color: yellow; */
    }

    #titleBelt {
        height: 15vh;
        /* background-color: purple; */
    }

    .ptitle {
        font-size: 18vh;
        top: 11.9vmax;
        /* background-color: purple; */
    }

    #attrBelt {
        height: 1.5vh;
    }

    .pAttr {
        font-size: 1.6vh;
        height: 10vh;
        line-height: 0.8;
        /* background-color: purple; */
    }

    #cardCarousel {
        width: 80vw;
        height: 50vh;
    }

    .project {
        border-radius: 5vh;
    }

    #home-progress {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #home-foot-nav {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    /*CATALOG*/
    :root {
        --catCarouselY: -169; /**/
    }
    
    #card-view-nav {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #catalog-carousel {
        /* background-color: black; */
        top: 55%;
        height: 161vh;
        gap: 15vh;
    }

    .catalog-project {
        /* background-color: pink; */
        gap: 3vh;
    }

    .cproj-title {
        /* background-color: green; */
        font-family: var(--ff-primary);
        font-size: 17vh;
        justify-content: center;
    }

    .cproj-desc {
        /* background-color: black; */
        font-size: 1.4vh;
        justify-content: center;
    }

    #cproj-3d {
        width: 100vw;
        height: 40vh;
        top: 60%;
        left: 50%;
        margin: -20vh 0 0 -50vw;
        /* background-color: purple; */
    }

    /* PROJECT VIEW*/ 
    #pmTitle {
        font-size: 16vw;
        /* background-color: pink; */
    }

    #pmClose {
        /* background-color: blue; */
    }

    #pmXsvg {
        width: 100%;
        height: 100%;
        stroke-width:3;
    }

    #pmClose-lbl {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #pmInfo-cont {
        width: 65vw;
        margin-bottom: 20vh;
    }

    #pmAttr-cont {
        /* background-color: rosybrown; */
    }

    .pm-m-cont {
        height: 4vw;
        width: 20vw;
        /* background-color: red; */
    }

    #pmType-lbl {
        font-size: 1.2vw;
        /* background-color: blue; */
    }

    #pmType-txt {
        font-size: 1.6vw;
    }

    #pmRole-lbl {
        font-size: 1.2vw;
    }

    #pmRole-txt {
        font-size: 1.6vw;
    }

    #pmCompleted-lbl {
        font-size: 1.2vw;
    }

    #pmCompleted-txt {
        font-size: 1.6vw;
    }

    #pmExplore-lbl {
        font-size: 1.2vw;
    }

    #pmExplore-txt {
        font-size: 1.6vw;
        /* background-color: green; */
    }

    #pmExplore-arrow-cont {
        width: 2vw;
        /* background-color: blue; */
    }

    .pmExplore-arrow {
        width: clamp(1vw, 2vw, 2vw);
    }

    #pmAwards-lbl {
        font-size: 1.2vw;
    }

    #pmAwards-txt {
        font-size: 1.6vw;
    }

    #pmAwards-cont {
        width: 20vw;
    }

    #pmDesc {
        font-size: 2vw;
        line-height: 2.8vw;
        /* background-color: black; */
        width: 100%;
    }

    #pmNavRail-cont {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #pmImages-cont {
        /* background-color: red; */
        gap: 15vh;
    }

    .pmImages-shot {
        width: 85vw;
    }
}




/* Mobile landscape X */ 
@media (max-width: 768px) and (orientation: landscape) { 
    /* 
    TEST THIS:
    568 × 320
    667 × 375
    732 × 412
    736 × 414
    740 x 360
    768 × 432 (right at your breakpoint)
    */
    #mqindicator {
        background-color: white;
    }

    /*ABOUT*/
    #abt-logo-btn {
        /* background-color: purple; */
        width: 11vw;
        height: 4vw;
    }

    #abt-logo-c {
        height: 1vw;
        font-size: 0.9vw;
        /* background-color: blue; */
    }

    #abt-logo-d {
        height: 1.2vw;
        font-size: 0.8vw;
        /* background-color: red; */
    }

    #abt-backToTop {
        width: 8vw;
        height: 8vw;
        font-size: 1.5vh;
    }

    #abt-sec1-sticky {
        width: auto;
        height: 125vh;
        position: relative;
        top: 20vh;
        /* background-color: red; */
    }

    #abt-sec1-centerpc { 
        top: 15vh;
    }

    #abt-sec1-title {
        font-size: 12vw;
    }

    #abt-sec1-desc {
        width: 65vw;
        font-size: 1.3vw;
        line-height: 1.7vw;
    }

    #abt-sec1-stickyrw {
        height: 85vh;
        right: 15vw;
        top: 55vh; /*20*/
        /* background-color: purple; */
    }

    #abt-sec1-rw {
        font-size: 1vw;
        /* background-color: red; */
    }

    #abt-sec1-rwcont {
        gap: 0.8vw;
    }

    #abt-sec1-arrow {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #abt-sec1-rwproj {
        font-size: 3.3vw;
    }

    #abt-sec2-contents {
        width: 50vh;
        height: 35vh;
        gap: 3vh;
        /* background-color: violet; */
    }

    #abt-sec-2 {
        
    }

    #abt-sec2-lbl {
        font-size: 1vw;
    }

    #abt-sec2-titlecont {
        font-size: 1.7vw;
    }

    #abt-sec2-desc {
        font-size: 1vw;
    }

    #sec2-title-wrapper {
        height: 3.5vh;
        /* background-color: pink; */
    }

    #sec2-wrapper {
        width: 0.8vw;
        height: 3.5vh;
        /* background-color: yellow; */
    }


    #abt-sec-3 {
        /* background-color: pink; */
    }

    #sec3-title {
        font-size: 1vw;
    }

    #sec3-cert-cont {
        gap: 0vh;
        width: 80vw;
        height: 28vh;
        /* background-color: violet; */
    }

    .sec3-certificate {
        width: 13vw;
        height: auto;
        aspect-ratio: 320/448;
        filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));
    }


    
    #abt-footer {
        height: 80vh;
        /* margin-top: 7vh; */
        /* background-color: black; */
    }

    #footer-tronfo-cont {
        height: 50vh;
        /* background-color: green; */
    }

    #footer-intro-overview {
        font-size: 3.2vh;
    }

    /* 
    #footer-intro {
        background-color: indianred;
    }

    #footer-intro-overview {
        background-color: green;
    }

    #footer-intro-copyright {
        background-color: darkgoldenrod;
    }

    #footer-info {
        background-color: purple;
    }

    #main-info-cont {
        background-color: brown;
    }

    .info-cont {
        background-color: red;
    }

    #footer-jap {
        background-color: yellow;
    } */

    /***/

    .cursor {
        opacity: 0;
        pointer-events: none;
        display: none;
    }
    
    #home-scsw-illu {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #home-logo-btn {
        /* background-color: green; */
        top: 5vh;
        width: 25vh;
        height: 3vw;
    }

    .logo-a {
        background-size: 1.8vw;
        /* background-color: black; */
    }

    #home-logo-c {
        height: 1vw;
        font-size: 0.9vw;
        /* background-color: blue; */
    }

    #home-logo-d {
        height: 1.3vw;
        font-size: 0.8vw;
        /* background-color: red; */
    }

    #home-catalog-btn {
        width: auto;
        /* background-color: pink; */
        height: 7vh;
    }

    #home-catalog-cont a {
        font-size: 0.9vw;
    }

    .nav-line {
        height: 0.13vw;
    }

    #home-progress {
        width: 5vw;
        gap: 2.5vh;
    }

    #home-foot-nav {
        width: 8vw;
        height: auto;
        /* background-color: purple; */
    }

    #home-foot-nav a {
        font-size: 0.9vw;
    }

    #projArea_Carousel_Block {
        top: 6vh;
    }
    
    #projArea {
        width: 100%;
        /* background-color: grey; */
    }
    
    #titleBelt {
        height: 18vh;
        /* background-color: purple; */
    }

    .ptitle {
        font-size: 20vh;
        top: 12.5vmax;
        /* background-color: purple; */
    }

    #attrBelt {
        height: 1.5vh;
    }

    .pAttr {
        font-size: 1.4vh;
        height: 2vh;
        top: 25%;
        /* background-color: yellow; */
    }

    /*******CATALOG VIEW**********/
    #card-view-nav {
        top: 6.9vh;
    }

    #card-view-nav .cvtext {
        font-size: 0.9vw;
    }

    .cproj-desc {
        /* background-color: black; */
        font-size: 1vw;
    }

    #cproj-3d {
        /* background-color: #ec2324; */
        width: 100vw;
        height: 35vh;
        /* top: 50%; */
        left: 20%;
    }

    /*PROJECT VIEW*/
    #pmTitle {
        font-size: 15vw;
    }

    #pmAttr-cont {
        /* background-color: rosybrown; */
    }

    .pm-m-cont {
        height: 2.5vw;
        gap: 0.6vh;
        /* background-color: red; */
    }

    #pmType-lbl {
        font-size: 0.8vw;
        /* background-color: blue; */
    }

    #pmType-txt {
        font-size: 1vw;
        /* background-color: gray; */
    }

    #pmRole-lbl {
        font-size: 0.8vw;
    }

    #pmRole-txt {
        font-size: 1vw;
    }

    #pmCompleted-lbl {
        font-size: 0.8vw;
    }

    #pmCompleted-txt {
        font-size: 1vw;
    }

    #pmExplore-lbl {
        font-size: 0.8vw;
    }

    #pmExplore-txt {
        font-size: 1vw;
        /* background-color: green; */
    }

    #pmExplore-arrow-cont {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #pmAwards-lbl {
        font-size: 0.8vw;
    }

    #pmAwards-txt {
        font-size: 1vw;
    }

    #pmDesc {
        font-size: 1.5vw;
        line-height: 1.8vw;
        margin-top: 6vh;
        /* background-color: black; */
        width: 100%;
    }

    #pmClose-lbl {
        font-size: 1vw;
        /* background-color: lavender; */
    }
}

/* Mobile / small tablet portrait X */ 
@media (min-width: 479px) and (max-width: 768px) and (orientation: portrait) { 
    /*
    479 × 800   ← Shortest common phone
    479 × 1040  ← Tall phone
    540 × 960
    600 × 1024
    768 × 1024  ← iPad portrait
    768 × 1366  ← iPad Pro portrait
    */

    /**ABOUT**/
    #abt-backToTop {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #abt-logo-btn {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #abt-sec1-centerpc { 
        top: 25vh;
    }

    #abt-sec1-title {
        font-size: 13vw;
    }

    #abt-sec1-desc {
        width: 85vw;
        font-size: 3vw;
        line-height: 4.5vw;
        text-align: justify;
    }

    #abt-sec1-stickyrw {
        height: 102vh;
        /* background-color: purple; */
    }

    #abt-sec1-rwcont {
        height: 10vw;
        top: 75vh;
        /* background-color: red; */
    }

    #abt-sec1-rwproj {
        font-size: 6vw;
    }

    #abt-sec1-rw {
        font-size: 2vw;
    }

    #abt-sec1-arrow {
        opacity: 0;
        pointer-events: none;
        display: none;
    }



    #abt-sec-2 {
        /* width: 10%; */
        flex-flow: column nowrap;
    }

    #abt-sec2-leftpanel {
        width: 100%;
        height: 50%;
    }

    #abt-sec2-contents {
        width: 40vmax;
        gap: 2.5vh;
        /* background-color: red; */
    }

    #abt-sec2-lbl {
        font-size: 2.5vw;
    }

    #abt-sec2-titlecont {
        font-size: 3vw;
    }

    #sec2-wrapper {
        /* background-color: red;  */
        width: 1.5vw;
        height: 2.8vw;
    }

    #sec2-title-wrapper {
        height: 2.9vw;
        /* background-color: red; */
    }

    #abt-sec2-desc {
        font-size: 1.5vmax;
    }

    #abt-sec2-rightpanel {
        width: 100%;
        height: 50%;
    }
    

    #abt-sec-3 {
        height: auto;
        min-height: 100vh;
        justify-content: flex-start;
        padding: 10vh 0;
        gap: 5vh;
        /* overflow: hidden; */
    }

    #sec3-title {
        font-size: 2.5vw;
        top: -100%;
    }

    #sec3-desc {
        font-size: 5.8vw;
        /* background-color: pink; */
    }

    #sec3-cert-cont {
        width: 100%;
        height: auto;
        flex-flow: row wrap;
        justify-content: center;
        gap: 5vh;
        opacity: 1;
        align-items: center;
        /* background-color: pink; */
    }

    .sec3-certificate {
        width: 50vw;
        height: auto;
        aspect-ratio: 320/448;
        filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));
    }

    .cert-overlay {
        font-size: 3vw;
    }

    .cert-overlay > h3 { /*Platform*/
        font-size: 3vw;
        margin-top: 5vw;
    }





    #abt-footer {
        height: 70vh;
        margin-top: -4vh;
        flex-flow: column nowrap;
    }

    #footer-tronfo-cont {
        /* background-color: gray; */
        height: auto;
        flex-flow: column nowrap;
    }


    #footer-intro {
        width: 85%;
        height: auto;
        gap: 2vh;
        /* background-color: black; */
    }

    #footer-intro-overview {
        width: 100%;
        height: auto;
        /* background-color: green; */
        font-size: 3vh;
    }

    #footer-intro-copyright {
        opacity: 0;
        pointer-events: none;
        display: none;
    }





    #footer-info {
        width: 85%;
        height: auto;
        margin-top: 4vh;
        gap: 3vh;
        /* background-color: purple; */
    }

    #main-info-cont {
        width: 100%;
        height: 30vh;
        flex-flow: column wrap;
        justify-content: flex-start;
        gap: 5vh;
        /* background-color: brown; */
    }


    .info-cont {
        width: fit-content;
        height: auto;
        /* column-gap: 10vw; */
        /* background-color: red; */
    }

    .info-lbl {
        font-size: 1vh;
        margin-bottom: 2.5vh;
        /* background-color: blue; */
    }

    .info-btn {
        font-size: 1.8vh;
        margin-bottom: 1vh;
    }

    #main-info-cont span:nth-child(3) {
        margin-left: auto
    }

    #main-info-cont span:nth-child(3) a {
        font-size: 1.8vh;
    }



    #info-timesign-cont {
        width: 100%;
        /* background-color: black; */
        font-size: 1vh;
        line-height: 2vh;
    }



    #footer-jap {
        /* background-color: pink; */
        /* width: 100%; */
        width: 150%;
        height: 20vh;
        bottom: -3vh;
        font-size: 15vw;
        /* font-family: var(--ff-jap);
        font-size: 15vw;
        text-align: center;
        color: var(--clr-jap);
        position: relative;
        bottom: -5vh; */
    }

    /**/


    #home-wrap {
        height: 100svh;
    }

    #mqindicator {
        background-color: gray;
    }

    .splash-cards {
        border-radius: 5vh;
    }

    .splash-cards::before {
        border-radius: 5vh;
    }

    .cursor {
        opacity: 0;
        pointer-events: none;
        display: none;
    }
    
    #home-scsw-illu {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #mobile-menu-icon {
        opacity: 1;
        pointer-events: auto;
        display: flex;
    }

    #home-logo-btn {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #home-catalog-btn {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #projArea_Carousel_Block {
        top: 5vh;
    }

    #projArea {
        width: 100%;
        /* background-color: yellow; */
    }

    #titleBelt {
        height: 15vh;
        /* background-color: purple; */
    }

    .ptitle {
        font-size: 15vh;
        top: 11.9vmax;
        /* background-color: purple; */
    }

    #attrBelt {
        height: 1.5vh;
    }

    .pAttr {
        font-size: 1.6vh;
        height: 10vh;
        line-height: 0.8;
        /* background-color: purple; */
    }

    #cardCarousel {
        width: 80vw;
        height: 50vh;
    }

    .project {
        border-radius: 5vh;
    }

    #home-progress {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #home-foot-nav {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    /*CATALOG*/
    :root {
        --catCarouselY: -193; /**/
    }

    #card-view-nav {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #catalog-carousel {
        /* background-color: black; */
        top: 56%;
        height: 161vh;
        gap: 17.2vh;
    }

    .catalog-project {
        /* background-color: pink; */
        gap: 1vh;
    }

    .cproj-title {
        /* background-color: green; */
        font-family: var(--ff-primary);
        font-size: 13vh;
        justify-content: center;
    }

    .cproj-desc {
        /* background-color: black; */
        font-size: 1.4vh;
        justify-content: center;
    }

    #cproj-3d {
        width: 100vw;
        height: 30vh;
        top: 60%;
        left: 50%;
        margin: -20vh 0 0 -50vw;
        /* background-color: purple; */
    }

    /* PROJECT VIEW */
    #pmTitle {
        font-size: 20vw;
        /* background-color: pink; */
    }

    #pmClose {
        /* background-color: blue; */
    }

    #pmXsvg {
        width: 100%;
        height: 100%;
        stroke-width:3;
    }

    #pmClose-lbl {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #pmInfo-cont {
        width: 65vw;
        margin-bottom: 14vh;
    }

    #pmAttr-cont {
        /* background-color: rosybrown; */
    }

    .pm-m-cont {
        height: 5.5vw;
        width: 30vw;
        /* background-color: red; */
    }

    #pmType-lbl {
        font-size: 1.8vw;
        /* background-color: blue; */
    }

    #pmType-txt {
        font-size: 2.3vw;
    }

    #pmRole-lbl {
        font-size: 1.8vw;
    }

    #pmRole-txt {
        font-size: 2.3vw;
    }

    #pmCompleted-lbl {
        font-size: 1.8vw;
    }

    #pmCompleted-txt {
        font-size: 2.3vw;
    }

    #pmExplore-lbl {
        font-size: 1.8vw;
    }

    #pmExplore-txt {
        font-size: 2.3vw;
        /* background-color: green; */
    }

    #pmExplore-arrow-cont {
        opacity: 0;
        pointer-events: none;
        display: none;
        /* background-color: blue; */
    }

    #pmAwards-lbl {
        font-size: 1.8vw;
    } 

    #pmAwards-txt {
        font-size: 2.3vw;
    }

    #pmAwards-cont {
        width: 30vw;
    }

    #pmDesc {
        margin-top: 4vh;
        font-size: 2.8vw;
        line-height: 3.4vw;
        /* background-color: black; */
        width: 100%;
    }

    #pmNavRail-cont {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #pmImages-cont {
        /* background-color: red; */
        gap: 15vh;
    }

    .pmImages-shot {
        width: 85vw;
    }
}

/* Small mobile portrait X */ 
@media (max-width: 478px) and (orientation: portrait) { 
    /*
    TEST WITH:
    320 × 568
    360 × 800
    390 × 844
    430 × 932
    478 × 900
    */

    #home-wrap {
        height: 100svh;
    }

    #mqindicator {
        background-color: red;
    }

    .splash-cards {
        border-radius: 5vh;
    }

    .splash-cards::before {
        border-radius: 5vh;
    }
    
    .cursor {
        opacity: 0;
        pointer-events: none;
        display: none;
    }
    
    #home-scsw-illu {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #mobile-menu-icon {
        opacity: 1;
        pointer-events: auto;
        display: flex;
    }

    #home-logo-btn {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #home-catalog-btn {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #projArea_Carousel_Block {
        top: 5vh;
    }

    #projArea {
        width: 100%;
        /* background-color: yellow; */
    }

    #titleBelt {
        height: 15vh;
        /* background-color: purple; */
    }

    .ptitle {
        font-size: 14vh;
        top: 11.9vmax;
        /* background-color: purple; */
    }

    #attrBelt {
        height: 1.5vh;
        /* background-color: white; */
    }

    .pAttr {
        font-size: 1.6vh;
        height: 10vh;
        line-height: 0.9;
        /* background-color: purple; */
    }

    #cardCarousel {
        width: 80vw;
        height: 50vh;
    }

    .project {
        border-radius: 5vh;
    }

    #home-progress {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #home-foot-nav {
        opacity: 0;
        pointer-events: none;
        display: none;
    }


    /*CATALOG*/
    :root {
        --catCarouselY: -191; /**/
    }

    #card-view-nav {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #catalog-carousel {
        /* background-color: black; */
        top: 60%;
        height: 161vh;
        gap: 15.5vh;
    }

    .catalog-project {
        /* background-color: pink; */
        gap: 0.1vh;
        height: 17vh;
    }

    .cproj-title {
        /* background-color: green; */
        font-family: var(--ff-primary);
        font-size: 12vh;
        justify-content: center;
    }

    .cproj-desc {
        /* background-color: black; */
        font-size: 1.4vh;
        justify-content: center;
    }

    #cproj-3d {
        width: 100vw;
        height: 25vh;
        top: 64%;
        left: 50%;
        margin: -20vh 0 0 -50vw;
        /* background-color: purple; */
    }

    /* PROJECT VIEW */
    #pmTitle {
        font-size: 20vw;
        /* background-color: pink; */
    }

    #pmClose {
        width: 5vw;
        /* background-color: blue; */
    }

    #pmXsvg {
        width: 100%;
        height: 100%;
        stroke-width:3;
    }

    #pmClose-lbl {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #pmInfo-cont {
        width: 65vw;
        margin-bottom: 14vh;
    }

    #pmAttr-cont {
        /* background-color: rosybrown; */
    }

    .pm-m-cont {
        height: 6vw;
        width: 30vw;
        /* background-color: red; */
    }

    #pmType-lbl {
        font-size: 1.8vw;
        /* background-color: blue; */
    }

    #pmType-txt {
        font-size: 2.3vw;
    }

    #pmRole-lbl {
        font-size: 1.8vw;
    }

    #pmRole-txt {
        font-size: 2.3vw;
    }

    #pmCompleted-lbl {
        font-size: 1.8vw;
    }

    #pmCompleted-txt {
        font-size: 2.3vw;
    }

    #pmExplore-lbl {
        font-size: 1.8vw;
    }

    #pmExplore-txt {
        font-size: 2.3vw;
        /* background-color: green; */
    }

    #pmExplore-arrow-cont {
        opacity: 0;
        pointer-events: none;
        display: none;
        /* background-color: blue; */
    }

    #pmAwards-lbl {
        font-size: 1.8vw;
    } 

    #pmAwards-txt {
        font-size: 2.3vw;
    }

    #pmAwards-cont {
        width: 30vw;
    }

    #pmDesc {
        margin-top: 4vh;
        font-size: 2.8vw;
        line-height: 3.4vw;
        /* background-color: black; */
        width: 100%;
    }

    #pmNavRail-cont {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #pmImages-cont {
        /* background-color: red; */
        gap: 15vh;
    }

    .pmImages-shot {
        width: 85vw;
    }

    
    /**ABOUT**/
    #abt-backToTop {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #abt-logo-btn {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #abt-sec1-centerpc { 
        top: 32vh;
    }

    #abt-sec1-title {
        font-size: 13vw;
    }

    #abt-sec1-desc {
        width: 85vw;
        font-size: 3vw;
        line-height: 4.5vw;
        text-align: justify;
    }

    #abt-sec1-stickyrw {
        height: 102vh;
        /* background-color: purple; */
    }

    #abt-sec1-rwcont {
        height: 10vw;
    }

    #abt-sec1-rwproj {
        font-size: 6vw;
    }

    #abt-sec1-rw {
        font-size: 2vw;
    }

    #abt-sec1-arrow {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #abt-sec-2 {
        /* width: 10%; */
        flex-flow: column nowrap;
    }

    #abt-sec2-leftpanel {
        width: 100%;
        height: 45%;
    }

    #abt-sec2-contents {
        width: 40vh;
        gap: 2.5vh;
        /* background-color: red; */
    }

    #abt-sec2-lbl {
        font-size: 2.5vw;
    }

    #abt-sec2-titlecont {
        font-size: 3vw;
    }

    #sec2-wrapper {
        /* background-color: red;  */
        width: 1.5vw;
        height: 2.8vw;
    }

    #sec2-title-wrapper {
        height: 2.9vw;
        /* background-color: red; */
    }

    #abt-sec2-desc {
        font-size: 2.5vw;
    }

    #abt-sec2-rightpanel {
        width: 100%;
        height: 55%;
    }

    #abt-sec-3 {
        height: auto;
        min-height: 100vh;
        justify-content: flex-start;
        padding: 10vh 0;
        gap: 5vh;
        /* overflow: hidden; */
    }

    #sec3-title {
        font-size: 2.5vw;
        top: -100%;
    }

    #sec3-desc {
        font-size: 5.8vw;
        /* background-color: pink; */
    }

    #sec3-cert-cont {
        width: 100%;
        height: auto;
        flex-flow: row wrap;
        justify-content: center;
        gap: 5vh;
        opacity: 1;
        align-items: center;
        /* background-color: pink; */
    }

    .sec3-certificate {
        width: 50vw;
        height: auto;
        aspect-ratio: 320/448;
        filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));
    }

    .cert-overlay {
        font-size: 3vw;
    }

    .cert-overlay > h3 { /*Platform*/
        font-size: 3vw;
        margin-top: 5vw;
    }

    #abt-footer {
        height: 70vh;
        margin-top: -4vh;
        flex-flow: column nowrap;
    }

    #footer-tronfo-cont {
        /* background-color: gray; */
        height: auto;
        flex-flow: column nowrap;
    }


    #footer-intro {
        width: 85%;
        height: auto;
        gap: 2vh;
        /* background-color: black; */
    }

    #footer-intro-overview {
        width: 100%;
        height: auto;
        /* background-color: green; */
        font-size: 3vh;
    }

    #footer-intro-copyright {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    #footer-info {
        width: 85%;
        height: auto;
        margin-top: 4vh;
        gap: 3vh;
        /* background-color: purple; */
    }

    #main-info-cont {
        width: 100%;
        height: 30vh;
        flex-flow: column wrap;
        justify-content: flex-start;
        gap: 5vh;
        /* background-color: brown; */
    }

    .info-cont {
        width: fit-content;
        height: auto;
        /* column-gap: 10vw; */
        /* background-color: red; */
    }

    .info-lbl {
        font-size: 1vh;
        margin-bottom: 3vh;
        /* background-color: blue; */
    }

    .info-btn {
        font-size: 1.8vh;
        margin-bottom: 1vh;
    }

    #main-info-cont span:nth-child(3) {
        margin-left: auto
    }

    #main-info-cont span:nth-child(3) a {
        font-size: 1.8vh;
    }

    #info-timesign-cont {
        width: 100%;
        /* background-color: black; */
        font-size: 1vh;
        line-height: 2vh;
    }

    #footer-jap {
        /* background-color: pink; */
        /* width: 100%; */
        width: 150%;
        height: 20vh;
        bottom: -3vh;
        font-size: 15vw;
        /* font-family: var(--ff-jap);
        font-size: 15vw;
        text-align: center;
        color: var(--clr-jap);
        position: relative;
        bottom: -5vh; */
    }

}

#mqindicator {
    position: fixed;
    width: 2vw;
    height: 4vh;
    /* background-color: black; */
    z-index: 99;
}