* {
  box-sizing: border-box;
}

@font-face {
    font-family: 'ppneuemontreal';
    src :url(fonts/ppneuemontreal-medium.woff) format('woff');
    font-weight: medium;
}

@font-face {
    font-family: 'OxygenMono'; 
    src: url(fonts/OxygenMono-Regular) format('woff'); 
    font-weight: 400;
}



:root {
     --bgColor: #000;
     --selectedColor:lawngreen;
     --highlightedTxtColor:#838383;
     --txtColor: #fff;
     --bigTxtSize: 3.5vw;
     --bodyTxtSize:2.5vw;
     --navTxtSize: 2vw;
     --underLine: 1px solid #000;
     --textFont:"ppneuemontreal", sans-serif;
     --navFont:"Oxygen Mono", monospace;
     --fontWeight: 300;
/*-----------Mobile setting-------------*/
     --mobileNavtxtSize:4vw;
     --mobileBigTxtSize:6.6vw;
     --mobileBodyTxtSize:4.8vw;
}

body {
    background-color: var(--bgColor);
    margin: 0;
    padding-left:4vw;
    padding-right:4vw;
    color: var(--txtColor);

}

html{
    scroll-behavior: smooth;

}




.intro, .project-lists {
        transition: color 0.5s; 
    }


p{
    font-family: var(--textFont);
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    line-height: normal; 
}

a{
    font-family: var(--textFont);
    color: var(--txtColor);
}

a:hover{
    text-decoration:none;

}

p, span, div {
  user-select: none;
}

 /*::selection {
      background-color: var(--selectedColor);
    }*/


.highlighted-txt{
    font-family: var(--textFont);
    color:var(--highlightedTxtColor);
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    line-height: normal;
}





/*-------------------intro----------------------*/

.intro {
    margin-bottom: 4vh;
    padding-top: 4vh ;
    padding-bottom: 4vh;
    margin-bottom: 6vh;
}

.intro p {
    font-size: var(--bigTxtSize);
    font-weight: var(--fontWeight);
    padding: 0;
    margin: 0;
    word-spacing: 0.01rem;
    color:var(--txtColor);

}

.highlight-window {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  border-bottom: none;
  height: 1.2em; /* matches one line height */
}

.highlight-track {
  display: flex;
  flex-direction: column;
  animation: slideUp 6s ease-in-out infinite;
}

.highlighted-txt {
  display: block;
  white-space: nowrap;
  height: 1.2em;
  line-height: 1.2em;
  font-family: var(--textFont);
  color: var(--highlightedTxtColor);
}


@keyframes slideUp {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(0); }
  33%  { transform: translateY(-1.2em); }
  58%  { transform: translateY(-1.2em); }
  66%  { transform: translateY(-2.4em); }
  91%  { transform: translateY(-2.4em); }
  100% { transform: translateY(-3.6em); }
}


/*-----------------project-list----------------*/

ul{
    margin:0;
    padding: 0;
}

ul li{
    list-style: none;
     opacity: 100%;
}


.project-lists {
    position: relative;
    width: 100%;
    background-size: 192px, 108px;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.3s ease-in-out;
}

.content{
    vertical-align: baseline;
    display: grid;
    grid-template-columns: 0.5fr 1.5fr 1fr;
    grid-auto-rows: minmax(50px, 1fr);
    padding-top: 1.5vh;
    padding-bottom: 1.5vh;
    border-bottom: 0.1px solid var(--txtColor); 

}

.content:hover{
    color:var(--highlightedTxtColor);
}

.hover-image {
    position: absolute;
    pointer-events: none;
    max-width: 300px; 
    max-height: 300px; 
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
}

li a{
    text-decoration: none;
    color:-var(-txtColor);
    font-size: var(--bodyTxtSize);
}

.project-name{
    transition: ease 0.1s;
    letter-spacing: 0;
}

.year, .project-name, .project-type {
    font-family:var(--textFont);
    font-weight: var(--fontWeight);
    display: inline-block;
}


/*.project-name{
    position: relative;
    transition: ease 0.8s;
    left:0%;
}*/


/* ul li:hover .project-name {
     left: 20%;
     z-index: -1;
}*/


.project-type{
    display: flex;
    justify-content: flex-end;
}







/*-----------------sketches----------------*/

.ex-work{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 2vw;
    grid-row-gap: 3vh;

}

.ex-work img{
    max-width: 100%;
}

.ex-work video{
    grid-column: span 3;
    max-width: 100%;
    height: fit-content;
    margin: 0;
    padding: 0;
}

.wide-span{
    grid-column: span 3;
}


/*-----------------<moible>----------------*/

@media only screen and (max-width: 900px){



.intro p {
    font-size: var(--mobileBigTxtSize);
}

.intro{
    margin-bottom: 2vh;
}



ul{
    margin:0;
    padding: 0;
}


li a{

    font-size: var(--mobileBodyTxtSize);
}


.content{
    border-bottom: 0.5px solid var(--txtColor);
    padding-top: 1vh;
    padding-bottom: 0;
    margin: 0.5vh;
    grid-template-columns: 0.4fr 1.6fr;

}

/* hide project-type */
.project-type {
    display: none;
  }

.project-name {
    justify-self: end;
}

/*.wrapper{
    display: inline-block;
    width: 100%;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
}

.JLCC-name{
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    animation: scrollText 4s linear infinite;
}

@keyframes scrollText {
    0% {
        transform: translateX(50%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.JLCC-content{
    align-items: center;
}*/



.wide-span{
    grid-column: span 2;
}


/*-----------------<mobile>-Sketches----------------*/

.ex-work{
    grid-template-columns: 1fr 1fr;
     grid-row-gap: 1.5vh;
}


.ex-work video{
    grid-column: span 2;
}

/*----Do not delete the curly brasket---*/
}