/* universal css */
:root{
    --main--most--color: rgb(26, 254, 152);
    --main--mono-font: SFMono-Regular , Consolas ,"Liberation Mono" , Menlo , Courier , monospace;
    --main-arial-font: Helvetica , Arial , sans-serif , serif;
    font-size: 20px;
}
html{
    width: 100%;
    overflow-x: hidden;
}

/* scrollbar */
.html-scroller{ /* Firefox */
    scrollbar-color: rgb(155, 155, 155) #060036 ; /* thumb and track color */
    scrollbar-width: thin;
}
/*html*/::-webkit-scrollbar{
    width: .4rem;
}
/*html*/::-webkit-scrollbar-track{
    display: none;
}
/*html*/::-webkit-scrollbar-track-piece{
    background-color: rgb(1, 1, 34);
}
/*html*/::-webkit-scrollbar-thumb{
    background: rgb(67, 71, 87); 
    border-radius: .2rem;
}
/* scrollbar */

/* underline effect when hover specific word */
.underline-box{
    display: inline-block;
    font-size: 1rem; line-height: 1.2rem;
    color: rgb(0, 255, 200);
    position: relative;
    cursor: pointer;
}
.underline-box:after{
    content:"";
    height:1px; line-height: 1px; width: 0%;
    background-color: rgb(0, 255, 200, .8);
    position: absolute; bottom: 0; left: 0;
    transition: width .5s;
}
.underline-box:hover:after{
    width:100%;
}

body{
    margin:0;padding:0;
    overflow-x: hidden;
    min-width:0px;
    background-color: rgb(1, 1, 34);
    scrollbar-width: none;
}
.body-hideScrollbar{
    overflow: hidden;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
    box-sizing: border-box;
}

ol{
    list-style-type: none;
    padding:0; margin:0;
}
li{
    cursor: pointer;
}
ul{
    list-style-type: none;
    padding:0;
}
*{
    margin:0; padding:0;
}
a{
    text-decoration: none;
}

.opacity0{ /* reveal effect in js */
    visibility: hidden !important;
    opacity: 0 !important;
}
.click-button{
    color: var(--main--most--color);
    border: 1.5px solid var(--main--most--color); border-radius: 5px;
    cursor: pointer;
    transition: background-color .5s, color .5s;
    display: inline-block;
}
.click-button:hover{
    background-color: rgb(127, 255, 212, .3);
    color: white;
}/* click link button*/
.main > section{
    font-size: 1.2em;
    margin: 85px 0 0 0; padding: 60px 0;
    color:rgb(195, 196, 195);
}
.main > section h2{
    display: flex; align-items: flex-end;
    width: 100%; 
    padding: 10px 0 20px 0;
    color: white;
}
.main > section h2 div{
    font-size: 1.7rem;
    line-height: 1.7rem;
    white-space: nowrap;
}
.main > section h2:before{
    counter-increment: parts;
    content: "0" counter(parts) ".";
    font-size: 1.4rem; line-height: 1.4rem;
    margin-right: 15px;
    font-family: var(--main--mono-font); font-weight: 100; color: var(--main--most--color);
}
.after-h2{
    display: block;
    height: 1.7rem; width: 100%;
    margin: 0 0 0 20px;
    position: relative;
}
.after-h2-line{
    display: block;
    height: 2px; width: 100%;
    position: absolute; top: 50%; transform: translateY(-50%);
    border-radius: 1px;
    background-color: rgb(9, 77, 54);
}
/* universal css */
/* ------------------------- loading-interface ----------------------------- */
.loading-interface{
    height: 100%; width: 100%;
    background-color: rgb(1, 1, 34);
    position: fixed; z-index: 100000;
}

.loading-anime{
    height: 150px; width: 150px;
    position: relative;
    top: 50%; left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.loading-path{
    stroke: rgb(26, 254, 152);
    stroke-width: 5;
    stroke-dasharray: 100; stroke-dashoffset: 1000;
    animation: offsetChange 5s linear normal infinite;
}
@keyframes offsetChange {
    100%{
        stroke-dashoffset: 0;
    }
}
/* ------------------------- loading-interface ----------------------------- */

/* ------------------------- Fixed elements ----------------------------- */

/* ------------------------- navBar ----------------------------------- */
/* nav + list_elements */ 
#nav{
    height: 80px; width: 100%;
    display: flex; 
    position: fixed; z-index: 50; 
    background-color: rgba(0, 6, 87, 0.616);
    box-shadow: 5px 0 15px black;
    transition: top .5s;
}
.nav-shown{ /* nav scroll up/down effect */
    top: 0;
}
.nav-hidden{ /* nav scroll up/down effect */
    top: -80px; 
}

#nav ol{
    display: flex; justify-content: flex-end; height: 80px;
    margin: 0 0 0 auto;
    counter-reset: item;
}

#nav li{
    font-size: 1rem; line-height: 80px;
    padding:0 10px; margin:0 10px;
    text-align: left;
    font-family: var(--main--mono-font);
}
#nav li::before{
    content:"0" counter(item) ".";
    counter-increment: item;
    margin-right: 5px;
    font-family: var(--main--mono-font); color: rgb(63, 240, 172);
}
#nav li a{
    transition: color .5s;
    color: white;
    user-select: none;
}
#nav li:hover a{
    color:rgb(63, 240, 172);
}

/* nav_list elements */
#svg{
    position: relative;
    transition: top .75s, opacity .75s;
    margin: 0 0 0 1.5%;
}
path{
    stroke:aqua;
    stroke-width:2.5;
    fill: transparent; cursor: pointer;
    transition: fill .5s;
}
svg:hover path[d="M 22.5 2.5 L 2.5 12.5 L 2.5 42.5 L 22.5 52.5 L 42.5 42.5 L 42.5 12.5 Z"]{
    fill:rgba(0, 255, 128, 0.247);
}
#Skill{
    position: relative;
}
#Experience{
    position: relative;
}
#Project1{
    position: relative;
}
#Contact{
    position: relative;
}
#resume{
    font-size: 1rem; line-height: 2.5rem; height:2.5rem; 
    padding:0 .5rem; margin:15px; 
    position: relative;
}
/* nav_list elements */

.nav-list-beforeAnime{ /* reveal nav-list elements effect */
    top: -50%; opacity: 0;
}
.nav-list-anime{ /* reveal nav-list elements effect */
    top: 0; opacity: 1;
    transition: top .75s, opacity .75s;
}
/* nav list */ 

/* Responive nav list*/
/* 1. clicks list-button */
#list-button{
    display: none; box-sizing: content-box;
    height: 70px; width:80px;
    margin: 5px;
    position: absolute; right:0; z-index: 99;
    cursor: pointer;
}
.list-button-border{ /* list button border effect */
    border: 2px dashed var(--main--most--color);
}
.list-button-noborder{ /* list button border effect */
    border: 2px dashed rgba(0, 0, 0, 0);
}
/* List button: click + modify elements' css */

/* First modified element: list-box patetrn */
/* list-box */ 
#list-box{ 
    height:50px; width:50px;
    padding: 10px 15px;
    position: absolute;
    /* list pattern */
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: flex-end;
    /* list pattern */
    backface-visibility: hidden;
    visibility: visible;
}
#list-box:before{
    content: ""; 
    height: 3px; width: 100%; 
    display: block;
    background-color: var(--main--most--color);;
}
#list-box:after{
    content: "";
    height: 3px; width: 60%; 
    display: block;
    background-color: var(--main--most--color);
}
.list-box-origin{ /* original interface */
    transform: rotateX(0deg);
    transition: transform 0s;
}
.list-box-beforeModification{ /* hid effect */ 
    transition: transform .5s;
    transform: rotateX(180deg) rotate(0deg);
}
.list-box-afterModification{ /* shown effect */
    transition: transform .75s;
    transform: rotateX(0deg);
}
/* list-box */ 

/* pattern */
#list-middle{
    height: 3px; width:40px;
    line-height: 3px;
    background-color: var(--main--most--color);
}
/* pattern */
/* First modified element: list-box patetrn */

/* Second modified element : rotated-cross pattern */
#rotated-cross{
    height:70px; width:80px; 
    font-size:45px; line-height: 70px;
    position: absolute; z-index: 99;
    color: var(--main--most--color); text-align: center; 
    transition: .75s;
    backface-visibility:hidden; 
}
.rotated-cross-origin{ /* shown effect */
    transform:rotateX(180deg) rotate(0deg);
}
.rotated-cross-beforeModification{ /* hid effect */
    transform: rotateX(0deg) rotate(180deg);
}
/* Second modified element: rotated-cross pattern */
/* 1. clicks list-button */

/* 2. shows aside block: show nav_list responsively */
#aside-bar{
    width:40%; height: 100%;
    position: fixed; bottom:0; z-index:60;
    background-color: rgb(0, 18, 51);
    transition: right 1s; overflow-y: scroll;
}
.aside-bar-origin{ /* scroll right/left effect */
    right: -100%;
}
.aside-bar-beforeModification{ /* scroll right/left effect */
    right: 0; 
}#aside-bar ul{
    width: 100%;
    box-sizing: border-box;
    padding: 80px 0 0 0;
    position: absolute; z-index: 10; right: 0;
    counter-reset: no_;
}
#aside-bar ul > li{
    height: 4rem; 
    margin-left: auto;
    text-align: right;
    font-size: 1.25rem; line-height: 4rem; font-family: var(--main--mono-font); color: white;
    transition: color .25s;
} 
#aside-bar ul > li[class="click-button"]{
    height: 2.5rem; 
    margin: 10% 0;
    line-height: 2.5rem;
    position: relative;
    left: 50%; transform: translateX(-25%);
    text-align: center; 
    font-size: 1.25rem; font-family:var(--main-arial-font);
    box-sizing: border-box;
    transition: background-color .5s;
    padding: 0 15px;
    font-family: 'FontAwesome';
    box-sizing: content-box;
    letter-spacing: 1.5px;
}
#aside-bar ul > li[class="click-button"]:before{
    content:"";
    display: 'none';
}
#aside-bar ul > li[class="click-button"]:hover{
    color: white;
}
#aside-bar ul > li:hover{
    color: rgb(63, 240, 172);
}
#aside-bar ul > li > a{
    display: inline-block;
}   
#aside-bar ul li:before{
    content:"0" counter(no_) ".";
    counter-increment: no_;
    position: absolute; left:15px;
    font-family: var(--main--mono-font); color: rgb(63, 240, 172);
}
/* aside block: show nav_list responsively */
/* 2. shows aside block: show nav_list responsively */
/* ------------------------- navBar ----------------------------------- */

/* ------------------------- Media-icon-bar --------------------------- */
#social-media{
    height: 100%;
    position: fixed; z-index: 40;
}
.social-media-beforeAnimation{
    opacity: 0; top: 200px;
}
.social-media-afterAnimation{
    transition: opacity 1s, top 1s;
    opacity: 1; top: 0;
}
#social-media ol{
    display: flex; flex-direction: column;
    width: 50px; height: 100%;
    margin: auto;
    justify-content: flex-end;
}
#social-media ol:before{
    width:100%; height:100%;
    content:"";
}
#social-media ol:after{
    content:"";
    height:100%; width:1px;
    margin:20px auto;
    background-color: var(--main--most--color);
}
#social-media li{
    font-size: 1.4rem; line-height: 50px;
    width:50px; height:50px; 
    text-align: center;
    color: white;
    transition: color .5s;
}
#social-media li:hover{
    color:rgb(0, 187, 146);
    transform:translateY(-2.5px);
}
/* ------------------------- Media-icon-bar --------------------------- */

/* ------------------------- Arrow to top ----------------------------- */
#arrow{
    height: 3rem; width: 3rem;
    font-size: 2rem; line-height: 3rem;
    border-radius: 15px; 
    position: fixed; bottom: 1rem; right: 1rem; z-index: 99;
    text-align: center; color: white;
    background-color: rgb(39, 32, 82, .8); 
    cursor: pointer; transition: background-color .5s;
}
#arrow:hover{
    background-color: rgb(197, 186, 186, .5);
    color: black;
}
/* ------------------------- Arrow to top ------------------ */
/* ------------------------- Fixed Element ----------------- */

/* ------------------------- Main Content -------------------- */
#content{
    width: 1400px;
    position: relative;
    left: 50%; transform: translatex(-50%);
    padding: 5rem 7.5%;
}
.main{
    counter-reset: parts;
    font-family:var(--main-arial-font);
}
.main-filter{ /* Responsive effect: blur main content when aside bar scroll left*/
    filter: blur(4px);
}
/* ------------------------- Main Content -------------------- */

/* -------------------------- intro -----------------------------*/
#introduction{
    width: 100%;
}
#self{
    font-size: 1.5em; line-height: 50px; 
    font-family: var(--main--mono-font), Helvetica, sans-serif; color: white;
}
#name{
    font-size:8vh; 
    font-weight: bold; color: rgb(13, 241, 173);
}
#brief{
    font-size: 2.75rem; line-height: 3rem; 
    font-weight: bold; color: rgb(195, 196, 195);
}
#self-intro{
    width:60%;
    font-size: 1rem; line-height: 1.5rem; 
    padding: 1rem 0;
    color:grey;
}
#touch{
    font-size: 1.25em; line-height: 50px;
    padding: 0 15px; margin: 15px 0;
    position: relative;
    font-family: var(--main--mono-font);
}
/* -------------------------- intro ------------------------- */

/* --------------------------- skill ------------------------ */
#skill{
    width:100%;
    display:flex; flex-wrap: wrap;
}/*whole-container*/

/* Section 1: brief-intro */
#brief-intro{
    width: 55%;
    margin: 0 4.5% 0 0;
}
#brief-intro p{
    font-size:1rem; line-height:1.5rem;
    margin-bottom:15px;
}
#skill-title{
    color: white;
}
#skill-intro{
    color: white;
}
#skill ol{
    margin:20px 0;
    width:100%;
    display: flex; flex-wrap: wrap;
    margin-left:2.5%;
}
#skill li{
    width: 42%; 
    padding: 0 15px 0 0;
    box-sizing: border-box;
    display: flex;
    margin:5px 2%;
    font-size: 1rem; font-family: var(--main--mono-font);
    color:rgba(245, 244, 244, 0.493);
    cursor:text;
}
#skill li:before{
    content:"\f0da";
    font-family: FontAwesome;
    margin-right:10px;
    width: .75em;
    color:rgb(0, 255, 200);
}
/* Section 1: brief-intro */

/* Section 2: hald-person image */
#fig{
    display: flex; 
    width: 40%; 
    line-height: 25rem;
    justify-content: center; align-items: center;
}
#face-icon{
    width: 15rem; height:17.5rem;
    line-height: 17.5rem;
    border-radius: 5px;
    background: url("../Portfolio_image/istockphoto-671826218-612x612 (1).jpg");
    background-size: 100% 100%;
}
#face-icon:before{
    content: "";
    display: inline-block;
    width: 15rem; height: 17.5rem;
    border-radius: 5px;
    background-color: rgb(26, 254, 152, .25);
    transition: background-color .5s;
}
#face-icon:after{
    content: "";
    box-sizing: border-box;
    width: 15rem; height: 17.5rem;
    border: 2px solid var(--main--most--color); border-radius: 5px; 
    position: absolute; z-index: -1;
    transform: translateY(30px) translateX(-92.5%);
    transition: transform .25s;
}
#face-icon:hover:before{
    background-color: black;
    visibility: hidden;
}
#face-icon:hover:after{
    transform: translateY(20px) translateX(-95%);
}
/* Section 2: hald-person image */
/* --------------------------- skill ----------------------------- */

/* ------------------------- workplace experience ----------------------*/ 
#experience{
    width: 35rem;
    position: relative;
    left: 50%; transform: translateX(-50%);
    display: flex; flex-wrap: wrap;
    justify-content: space-between;
    /*responsive-box and fixed content > fixed width + % position/padding/margin*/
}/*whole-container*/

/* Section 1: company ol list */
#workplace{
    position: relative;
    float: left;
    width: 22%;  
}
#workplace-light{
    width: 2px; height: 2.5rem;
    background-color: aquamarine;
    position: absolute;
    top: 0; left: 0;
    transition: top .5s;
}
/*
#responsive-workplace-light{} ?
*/
#workplace ol li{
    padding: 0 15px;
    border-left: 2px solid rgb(128, 128, 128);
    font-size: .9rem; line-height: 2.5rem; font-family:var(--main--mono-font); 
    user-select: none;
}
.workplace-list-click{
    background-color: rgba(0, 6, 87, 0.616);
    color: rgb(127, 255, 212);
}
#workplace ol li:hover{
    background-color: rgba(0, 6, 87, 0.616);
}

/* Responsive: scrollbar */
.scroller{ /* Firefox */
    scrollbar-color: rgb(155, 155, 155) #363636 ; /* thumb and track color */
    scrollbar-width: thin;
}
#workplace::-webkit-scrollbar { /* chrome */
    height:.1rem;
}
#workplace::-webkit-scrollbar-thumb {
    background: rgb(184, 183, 183); 
    border-radius: 4px;
}
/* Responsive: scrollbar */
/* Section 1: company ol list */

/* Section 2: comapny details info */
#workplace-details-box{
    width: 76.5%; 
    left: 1.5%;
    position: relative;
}
.workplace-details{
    width: 100%; 
    padding: .8rem .5rem;
    box-sizing: border-box; 
    position: absolute;
    border: 2px dotted rgba(0, 0, 0, 0);
}
.workplace-details-click-border{
    border: 2px dotted rgb(26, 214, 152);
}
.workplace-details .company{
    font-size: 1rem; line-height: 1.5rem; 
    font-weight: 700; color: white;
}
.underline-color{
    display: inline-block;
    color: rgb(0, 255, 200);
}
.workplace-details .date{
    padding: 5px 0 10px 0;
    font-size: 1rem; line-height: 1rem; font-family: var(--main--mono-font);
    color: rgba(204, 204, 204, 0.884);
}
.duty{
    margin: 10px 0;
}
.duty > p{
    display: flex;
    font-size: .9rem; line-height: 1.2rem;
    margin:0 0 15px 0;
}
.duty > p:before{
    content: "\f0da";
    padding: 0 10px 0 10px;
    font-size: .9rem; font-family: FontAwesome;
    color: var(--main--most--color);
}
/*opacity 0s, 0*/
/*opacity 0.25s, 1*/
.show-workplace-details{
    transition: opacity 0.25s;
    opacity: 1;
    z-index: 1;
}
.hide-workplace-details{
    transition: opacity 0;
    opacity: 0;
    z-index: 0;
}
/**/
/* Section 2: comapny details info */
/* ----------------------- workplace-experience ---------------------*/

/* ----------------------- portfolio ----------------------------*/
/* section 1. Main */
#Project-container{
    margin:0 0 200px;
}
.Project-box{
    width:100%; 
    height:40vw;
    max-height: 400px;
    position: relative;
    margin: 70px 0 70px 0;
}

/* Section 1.1:  image */
.Project-box figure{
    width: 60%; height: 100%;
    line-height: 100%;
    position: absolute; top: 50%; transform: translateY(-50%);
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: -10px 10px 20px rgb(88, 88, 88);
}
.Project-box figure img{
    width: 100%; height: 100%;
    border-radius: 5px;
}
.Project-box figure:before{ /* effect: filter */
    content:"";
    width: 100%; height: 100%;
    position: absolute;
    border-radius: 5px;
    background-color: rgb(42, 83, 70, .5);
    transition: opacity .25s;
}
.Project-box figure:hover:before{
    content: "";
    opacity: 0;
    background-color: black;
}
/* Section 1.1:  image */

/* Section 1.2: Details of the Projects */
.Project-box .Project-details{
    width: 40%;
    display: flex; flex-direction: column;
    align-items: flex-end; justify-content: flex-end;
    position: absolute; right:0; top: 50%;  transform: translateY(-50%);
    text-align: end;
}
.Project-box .Project-details h4{
    display: flex; flex-direction: column;
    height: 3.5rem; 
    line-height: 1.5rem; font-size: 1.2rem; 
    color:rgb(255, 255, 255);
}
.Project-box .Project-details h4:before{
    content: "Featured ";
    font-size: 1rem;
    font-family: var(--main--mono-font); font-weight: 400; 
    color: var(--main--most--color); 
}
.Project-box .Project-details p{
    width:120%; height: 100%;
    padding:1.25rem 1rem;
    border-radius: 5px;
    font-size:1rem; line-height: 1.5rem; font-family:var(--main-arial-font);
    background-color:rgb(19, 15, 51);
    box-shadow: -10px 10px 15px black;
}
/* general list css */ 
.Project-box .Project-details ul{
    line-height: 1.5rem;
    margin: .5rem 0;
}
.Project-box .Project-details li{
    padding: 0 .5rem;
}
/* general list css */ 
.Project-box .Project-details ul.tools{
    color: white;
    white-space: nowrap;
}
.Project-box .Project-details ul.tools li{
    display: inline-block;
    font-size: 1rem; line-height: 30px;
    padding: 0 10px;
    font-family: var(--main--mono-font);
    cursor: text;
}
.Project-box .Project-details ul.source-link{
    margin: 0 0 10px;
    color:rgb(189, 189, 189);
}
.Project-box .Project-details ul.source-link li{
    font-size:1.2rem;
    cursor: pointer;
    transition: color .25s;
}
.Project-box .Project-details ul.source-link li:hover{
    color:white;
}
#Project-files-click-btn{
    font-size: 1rem; line-height: 1.7rem;
    padding: 5px 10px; margin: 0 0 10px 0;
}
/* class/es fo Js */
#firstProject{ 
    color: white;
}
#secondProject{
    color: white;
}
#thirdProject{ 
    color: white;
}
/* class/es fo Js */
/* Section 1.2: Details of the Projects */

/* alternative style of -box in even number*/
.Project-box-even > figure{
    box-shadow: 10px 10px 20px rgb(88, 88, 88);
    right:0;
}
.Project-box-even > main{
    left:0;
}
.Project-box-even > .Project-details{ /* modify css directly */
    align-items: flex-start;
}
.Project-box-even .Project-details h4{ /* modify css directly */
    text-align: start;
}
.Project-box-even .Project-details p{ /* modify css directly */
    text-align: start;
    box-shadow: 10px 10px 15px black;
}
/* alternative style of -box in even number*/
/* section 1. Main */

/* section 2. Small  */
#Noteworthy_proj h3{
    font-size: 1.5rem; 
    color: white; text-align: center;
}
#view-achieve{
    left: 50%; transform: translateX(-50%);
    margin: 20px 0;
}
#view-achieve a{
    color: rgb(0, 255, 200);
}
#Project-files-container{
    /* files-flow */
    display: grid; grid-gap: 20px; grid-row-gap: 30px;
    grid-template-columns: repeat(3, minmax(250px, 300px));
    grid-auto-rows: auto;
    grid-auto-flow: row;
    /* files-flow */
    position: relative;
    padding: 20px; margin: 10px 0;
    background-color: rgb(1, 1, 34);
    overflow: hidden;
    justify-content: center;
}

.Project-files-Parents{
    position: relative; 
    border-radius: 10px;
    transition: top .25s, transform .25s, box-shadow .5s
}
.Project-files-Parents:hover{
    transform: translateY(-10px);
    box-shadow: 0 6px 10px rgb(255, 255, 255);
}
.Project-files-up{ /* click effect */
    transform: translateY(-10px);
    box-shadow: 0 6px 10px rgb(255, 255, 255);
}
.Project-files{
    height: 100%;
    padding: 20px;
    position: relative;
    border-radius: 10px; box-sizing: border-box;
    background-color: rgb(7, 5, 70);
    cursor: pointer;
}
.Project-files-transform{ /* class for javascript*/
    transition: top .25s, transform .25s, box-shadow .5s
}
.after-showing-all-files{ /* class for javascript*/
    transition: top .75s, transform 1s, box-shadow 0s, opacity 1.5s;
}
.Project-files-displayNone{
    position: relative;
}
.Project-files-absolute{ /* class for javascript*/
    position: absolute;
    z-index:-1;
}
.Project-files-relative{ /* class for javascript*/
    position: relative;
}
.Project-files-opacity{ /* class for javascript*/
    opacity: 0;
    top: 25%;
}
.Project-files-opacity-change{ /* class for javascript*/
    opacity: 1;
    top: 0; 
}

/* -header */
.Project-header-box{
    display: flex; flex-direction: column;
    height: auto; line-height: 60px;
    position: relative;
}
.Project-icon{
    height: 50px;
    display: flex;
} 
.Project-icon .fa-folder-o{
    width: 30%; height: 50px;
    font-size: 2rem; font-weight: 100;
    color: var(--main--most--color);
}
.Project-icon > ul{
    height: 50px; width: 70%;
    line-height: 50px;
    text-align: end;
}
.Project-icon > ul li{
    width:24px;
    display: inline-block; vertical-align: middle;
    font-size:1.2rem; color:white; line-height: 1.5rem;
    margin-left:10px;
    transition: color .25s;
}
.Project-icon > ul li:hover{
    color: var(--main--most--color);
}
.Project-files h4{
    display: inline-block; align-self: start;
    font-size: 1rem; line-height:1.3rem;
    padding: 5px 12px; margin-top: auto; 
    box-sizing: border-box;
    transition: border .5s, color .25s;
}
.Project-files-border{
    border: 0px dashed rgba(0, 0, 0, 0);
}
.Project-files-border-trigg{
    border: 2px dashed var(--main--most--color);
}
.Project-files-h4-color{
    color:white;
}
.Project-files-h4-color-clicked{
    color: var(--main--most--color);
}
/* -header */

/* -details*/
.Project-files .Project-details-info{
    font-size: .9rem; line-height: 1.2rem;
    padding: 0 10px; margin: 15px 0;
}
.Project-files ul.Project-tools{
    padding: 10px 0;
    color: rgb(255, 255, 255, .3); font-family: var(--main--mono-font);
}
.Project-files ul.Project-tools li{
    display: inline-block; 
    font-size: .75rem; line-height: 1.2rem; 
    margin: 0 2.5px 0 0; 
    cursor: text;
}
/* -details */
#show-hidden{
    font-size:1rem; line-height:2rem;
    padding:10px;
    position: relative;
    left:50%; transform: translateX(-50%);
}

/* class/es for JS*/
#Noteworthy_title{
    color: white;
}
#one{
    color: white;
}
#two{
    color: white;
}
#three{
    color: white;
}
#four{
    color: white;
}
#five{
    color: white;
}
#six{
    color: white;
}
/* class/es for JS*/
/* classes for javascript*/
/* ------------------------- Portfolio ---------------------------------*/

/* -------------------------- Contact ---------------------------------- */
#contact{
    text-align: center;
}
#contact h2{
    font-family: var(--main--mono-font);
    font-weight: 100; color: var(--main--most--color);
    font-size: 1rem; line-height: 1rem; height: 1rem;
    justify-content: center;
}
#contact h2:before{
    font-size: 1rem; line-height: 1rem; height: 1rem;
}
#content h2:after{
    content: "";
    display: none;
}
#get-in-touch-h2{
    font-size: 2rem;
    color: rgb(210, 226, 226); font-weight: 700;
}
#get-in-touch{
    width: 600px;
    font-size: 1rem; line-height: 1.4rem;
    margin: 15px auto;
    color: rgb(139, 146, 146);
}
#say-hello{
    padding:1rem;
    font-size:1rem;
    margin:15px auto;
}
/* -------------------------- Contact ---------------------------------- */

/* -------------------------- footer ---------------------------------- */
footer{
    padding:50px 0;
    color:white; text-align: center;
}
#info-block{
    display: inline-block;
    padding: 10px 15px;
    box-sizing: border-box;
    transition: border .25s;
    cursor: pointer;
}
#info-block > div{
    text-align: center;
    line-height: 30px; font-size:13px;
    font-family: var(--main--mono-font);
}
.div-color0{
    color: rgb(202, 202, 202);
}
.div-color1{
    color: rgb(113, 255, 208);
}
.div-bordercolor0{
    border: 0px dashed rgb(0, 0, 0);
}
.div-bordercolor1{
    border: 2px dashed rgb(113, 255, 208);
}
/* Responsive case: show ul-list */
ul#app-list{
    display: flex;
    width:100%;
    padding: 5px 15px; margin: 20px 0;
    justify-content: center; align-items: center;
    box-sizing: border-box;
    display: none;
}
ul#app-list:before{
    content: "";
    height: 1px; width: 100%;
    margin: 0 25px;
    background-color: var(--main--most--color);
}
ul#app-list:after{
    content: "";
    height: 1px;width: 100%;
    margin: 0 25px;
    background-color: var(--main--most--color);
}
ul#app-list li{
    font-size: 28px;line-height: 40px;
    padding: 0 5px; margin: 0 5px;
    transition: transform .25s, color .25s;
}
ul#app-list li:hover{
    transform: translateY(-5px);
    color: rgb(0, 255, 200);
}
/* Responsive case: show ul-list */
/* -------------------------- footer ---------------------------------- */

/*---------------------------------*/
@media only screen and (max-width: 1450px){
    #content{
        width: 100%;
        position: relative;
        left: 0; transform: translateX(0);
    }
}
@media only screen and (max-width: 1100px){
    .Project-box figure{
        height: 35vw;
        line-height: 35vw;
    }
}
@media only screen and (max-width: 1045px){
    :root{
        font-size: 18px;
    }
    #self-intro{
        width:80%;
    }
    .main section h2 div{
        font-size:4vw; line-height: 4vw;
    }
    .main section h2:before{
        font-size: 3vw; line-height: 3vw;
    }
    .after-h2{
        height: 4vw;
    }
    #Noteworthy_proj{
        width: auto;
        left: 0; transform: translateX(0);
    }
    #Project-files-container{
        grid-template-columns: repeat(2, minmax(250px, 1fr));
    }
}
@media only screen and (max-width: 800px) {
    :root{
        font-size: 16px;
    }
    #nav ol{
        display: none;
    }
    #resume{
        display: none;
    }
    #list-button{
        display: block;
    }
    #name{
        font-size: 2rem;
        line-height: 3rem;
    }
    #brief{
        font-size: 7vw; line-height: 7vw;
    }
    #self-intro{
        width: 100%;
    }
    #brief-intro{
        width: 100%;
    }
    #fig{
        width: 100%;
    }
    #skill ol{
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }
    #skill li{
        width: 45%;
        padding: 0 0 0 10%;
    }
    #face-icon{
        margin: 30px 0;
    }
    #face-icon:after{
        transform: translateY(30px) translateX(-100%);
    }
    #face-icon:hover:after{
        transform: translateY(10px) translateX(-100%);
    }
    #social-media{
        display: none;
    }
    #experience{
        width:100%;
    }
    #workplace{
        width: 100%;
        height: 2.5rem; position: relative;
        overflow-x: scroll; overflow-y: hidden;
    }
    #workplace::-webkit-scrollbar {
        height: .4rem;
    }
    #workplace::-webkit-scrollbar-thumb{
        background-color: rgb(119, 120, 121);
    }
    #workplace::-webkit-scrollbar-track-piece{
        height: .4rem;
        background: rgb(48, 48, 49); 
        border-radius: 2px;
    }
    #workplace-light{
        width: 150px; height: 2px;
        top: auto; bottom:0; left:0;
        transition: left .5s;
        z-index: 10;
    }
    #response-workplace-light{
        top: auto;
        transition: left 0s;
    }
    #workplace ol{
        height: 2.5rem;
        white-space: nowrap;
        position: relative;
    }
    #workplace ol li{
        display: inline-block;
        width: 150px;
        box-sizing: border-box;
        border-left: none;
        text-align: center;
        margin: 0; 
    }
    #workplace-details-box{
        left: 0;
        margin: 5px 0;
        width: 100%;
    }
    .workplace-details{
        left: 0;
        margin: 20px 0;
    }
    #get-in-touch{
        width:100%;
    }
    ul#app-list{
        display: flex;
    }
}
@media only screen and (max-width: 700px){
    .Project-box{
        height: auto;
    }
    .Project-box .Project-details{
        position: relative;
    }
    .Project-box{
        width:100%;
    }
    .Project-box figure{
        box-shadow: 0 0 0 transparent;
        width: 100%; height: 100%; 
        left: 0;
    }
    .Project-box figure img{
        opacity: .3;
        height: 180%; width: 180%;
        transform: translateX(-12.5%);
    }
    .Project-box figure::before{
        content: "";
        height: 100%;
        background-color: rgb(42, 83, 70, .2);
    }
    .Project-box .Project-details{
        width:100%;
        justify-content: center; align-items: center;
        top: 0; transform: translateY(0%);
    }
    .Project-box .Project-details ul.tools{
        text-align: center; white-space: normal;
    }
    .Project-box .Project-details h4{
        text-align: center;
        justify-content: 'center';
    }
    .Project-box .Project-details p{
        width: 100%;
        text-align: center;
        box-shadow: 0 0 0 transparent;
    }
    #Project-files-container{
        grid-template-columns: repeat(1, minmax(250px, 1fr));
    }
} 
@media only screen and (max-width: 450px){
    .main section h2{
        align-items: center;
    }
    .main section h2 div{
        min-width: 50%;
        font-size: 1.2rem; line-height: 1.2rem;
        white-space: normal;
    }
    .main section h2:before{
        font-size: 1rem;
        line-height: 1rem;
    }
    .after-h2{
        height: 1rem;
    }
    #aside-bar{
        width: 60%;
    }
}
@media only screen and (max-width: 400px){
    :root{
        font-size: 14px;
    }
    .main > section{
        margin: 0;
    }
    #self{
        line-height: 1.5rem;
    }
    #touch{
        left: 50%; transform: translateX(-50%);
    }
    #skill ol{
        padding: 0;
        justify-content: flex-start;
    }
    #skill li{
        font-size: 1rem;
        width: 100%;
        padding: 0 5% 0 5%; 
    }
    .Project-files-Parents:hover{
        box-shadow: 0 0 0 transparent;
    }
    .Project-files-up{ 
        box-shadow: 0 0 0 transparent;
    }
    .Project-box .-details h4{
        font-size: 1rem;
        line-height: 2rem;
        height: 60px;
    }
    .Project-box .-details h4:before{
        font-size: 1rem;
    }
    .Project-box .-details p{
        width: 80%;
        text-align: center;
    }
    .Project-box .-details ul.tools{
        width:100%;
    }
    #Project-files-container{
        padding: 0;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
    .Project-icon .fa-folder-o{
        font-size: 35px;
    }
    .Project-icon > ul{
        line-height: 35px;
    }
}
@media only screen and (max-width: 300px){
    #content{
        padding: 120px 10%;
    }
    #aside-bar{
        width: 80%;
    }
}
/* ------------------------- responsive webpage -------------------------------------*/