* {
  box-sizing: border-box;
}

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

:root {
     --bgColor: #E6E6E6;
     --selectedColor:lawngreen;
     --highlighted-txtColor:#838383;
     --blurColor_start: rgba(255, 255, 255, 0.1);
     --blurColor_middle: rgba(255, 255, 255, 0.05);
     --blurColor_end: rgba(255, 255, 255, 0);
     --bigTxtSize: 3vw;
     --black: #000;
     --white: #fff;
     --underLine: 1px solid #000;
     --textFont:"ppneuemontreal", sans-serif;
     --fontWeight: 300;
}

body {
    background-color: var(--bgColor);
    margin: 0;
    padding-left:4vw;
    padding-right:4vw;
    padding-top: 1vh;
    color: var(--black);

}

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: black;
}

a:hover{
    text-decoration:none;

}

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

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


.highlighted-txt{
    font-family: var(--textFont);
    color:var(--highlighted-txtColor);
}

/*-------------------nav----------------------*/

 nav {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    justify-content: space-between;
    margin-bottom: 7vh;
    padding-top: 3vh;
    padding-bottom: 1vh;
    border-bottom: 2px solid var(--black);
    position: sticky;     
    top: 0;             
    left: 0;             
    width: 100%;       
    background: linear-gradient(
        to bottom, 
        var(--blurColor_start),
        var(--blurColor_middle),
        var(--blurColor_end));
    z-index: 1000; 
}

.logo{
    font-family: var(--textFont);
    font-size: 2vw;
    display: inline-flex;
    align-items: center;
    justify-content: center; 
    border:none;
    background-color: var(--black);
    padding:1.2vw;
    border-radius: 50%;
    width:3vw;
    height:3vw;
    color: var(--white);  
}

.logo a{
    color: white;
    text-decoration: none;

}

.logo:hover{
    border:none;
    background-color: var(--highlighted-txtColor);
}

.logo:hover a{
    color: var(--white);  
}

.link {
    color: black;
    text-decoration: none;
}


nav p {
    font-size: 2.5vw;
    transition: ease 0.1s;
    letter-spacing: 0;
}

nav p a:hover{
    color:var(--highlighted-txtColor);
}

.info{
     text-align: center;
     text-decoration: none;
     display: inline-block;
     border: 2px solid var(--black);
     width:10%;
     border-radius: 100px;
     padding-left: 1vw;
     padding-right: 1vw;
}
.info:hover{
    border: 2px solid var(--highlighted-txtColor);
}


/*nav p:hover{
     letter-spacing: 0.1vw;
}*/



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

.intro {
 margin-bottom: 10vw;
}

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

}

.highlighted-txt {
    font-family: var(--textFont);
    color:var(--highlighted-txtColor);
     /* background: linear-gradient(
        90deg,
        var(--black) 0%,
        var(--highlighted-txtColor) 50%,
        var(--black) 100%
      );
      background-size: 100% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      font-weight: 600;*/
    }
  
 

/*.fade-in {
  opacity: 0;
  animation: fadeIn 2s linear forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}*/



/******** name in circles *******/
/* .name {
display: inline-flex;
align-items: center;
justify-content: center; 
border:none;
background-color: var(--black);
padding:1.2vw;
border-radius: 50%;
width:3.6vw;
height:3.6vw;
color: var(--white);
font-size: 3vw;      
} 

.s {
    display: inline-flex;
    border-bottom: var(--underLine);
    line-height: 1em;
    transform: translateY(-2px);
}

.h{
    display: inline-flex;
    border-bottom: var(--underLine);
    line-height: 1em;
    transform: translateY(5px);
}

.a{
    display: inline-flex;
    border-bottom: var(--underLine);
    line-height: 1em;
}

.o{
    display: inline-flex;
    border-bottom: var(--underLine);
    line-height: 1em;
    transform: translateY(-5px);
}

.w{
    display: inline-flex;
    border-bottom: var(--underLine);
    line-height: 1em;
    transform: translateY(4px);
}

.e{
    display: inline-flex;
    border-bottom: var(--underLine);
    line-height: 1em;
    transform: translateY(-7px);
}

.n{
    display: inline-flex;
    border-bottom: var(--underLine);
    line-height: 1em;
}

.l{
    display: inline-flex;
    border-bottom: var(--underLine);
    line-height: 1em;
    transform: translateY(6px);
}


.i{
    display: inline-flex;
    border-bottom: var(--underLine);
    line-height: 1em;
}

.a2{
    display: inline-flex;
    border-bottom: var(--underLine);
    line-height: 1em;
    transform: translateY(-6px);
}

.n2{
    display: inline-flex;
    border-bottom: var(--underLine);
    line-height: 1em;
    transform: translateY(7px);
}

.g{
    display: inline-flex;
    border-bottom: var(--underLine);
    line-height: 1.5em;
}

*/



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

.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);
    border-bottom: 2px solid #000; 

}



ul{
    margin:0;
    padding: 0;
}

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

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

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

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

li a{
    text-decoration: none;
    color:#000;
    font-size: 2.5vw;
}

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


/*.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;
}




/*-----------------footer----------------*/

footer{
    padding-top: 15vh;
    margin-bottom: 15vh;
    display: flex;
    justify-content: space-between;
}


footer p {
 font-family:var(--textFont);
 font-weight: var(--fontWeight);
 font-size: 2.5vw;
 padding: 0;
 margin: 0;
 word-spacing: 0.01rem;
 color:#000;

}


/*-----------------experiments----------------*/

.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){


nav {
    margin-bottom: 3vh;
    padding-bottom: 1vh;
    border-bottom: 1px solid var(--black);
}


.logo{
    width: 6.5vw;
    height: 6.5vw;
}

.logo a {
    text-align: center;
    font-size: 3.5vw;
}


nav p {
    font-size: 5vw;
}

.info{
     border: 1px solid var(--black);
     width:20%;
}

.info:hover{
    border:1px solid var(--highlighted-txtColor);
}

.intro p {
    font-size: 5vw;
}

footer p{
    font-size: 5vw;
}


ul{
    margin:0;
    padding: 0;
}


li a{

    font-size: 4.5vw;
}


/*ul li:hover{
    background-color: var(--selectedColor);
}*/

.content{
    border-bottom: 1px solid #000; 

}


.year, .project-name, .project-type {
    padding-bottom: 0.5vh;
    padding-top: 1vh;
}

.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;
}



footer{
      padding-top: 6vh;
      margin-bottom: 5vh;
}



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


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



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

}