* {
    margin: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
  
    --main-black: rgb(0, 0, 0);
}

@font-face {
    font-family: "Poppins";
    src:
    url("assets/fonts/Poppins-Regular.ttf");
}

@font-face {
    font-family: "HK";
    src: url("assets/fonts/hk-grotesk/WEB/HKGrotesk-Bold.woff");
}

@font-face {
    font-family: "HK-Medium";
    src: url("assets/fonts/hk-grotesk/WEB/HKGrotesk-Bold.woff");
}

@font-face {
    font-family: "HK-Regular";
    src: url("assets/fonts/hk-grotesk/WEB/HKGrotesk-Bold.woff");
}

body {
    font-family: "HK";
}
    
.negative {
    
    color: var(--main-white);
}

#nav-container {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    
}


nav {
    position:fixed;
    display: flex;
    list-style-type: none; 
    z-index: 20;
background-color: inherit;
width: 100vw;
left: 0;
padding-left: inherit;
    padding-right: inherit;

}

nav li {
    flex-direction: row;
    width: calc(100% / 3);
}

ul li a h2, ul li a span {
    font-size: 2rem;
    font-family: "HK";
    
}



nav li:nth-child(1) {
text-align: left;
}

nav li:nth-child(2) {
    text-align: center;
    }

    nav li:nth-child(3) {
        text-align: right;
        }

.landing-screen {
    
    padding-left: 2vw;
    padding-right: 2vw;
    background-color: inherit;
    font-size: inherit;
}

img {
    display: none;
}

.list-header {
    padding-left: 2vw;
    padding-right: 2vw;
    font-size: 1.2rem;
    padding-top: 5px;
    padding-bottom: 5px;
    position: sticky;
    font-family: "HK";
    color: var(--main-black);
    background-color: var(--main-white);
    border-bottom: 4px var(--main-black) solid;
    z-index: 99999;
}

.proyect-list {
    padding-left: inherit;
    padding-right: inherit;

}

.proyect-container {
    background-color: white;
    padding-top: 5vh;
    padding-bottom: 5vh;
   
 border-bottom: rgb(0, 0, 0) 4px solid;
    color: rgb(0, 0, 0);
    padding-left: inherit;
    padding-right: inherit;
    
    
}



.proyect-container:hover {
    background-color: var(--main-white);
    color: var(--main-black);
   
}

.two-grid {
    display:flex;
    flex-direction: row;
    position: relative;
} 

a span, a time {
    display: none;
}

.two-grid {

    flex-direction: column;
    text-align: center;
}

a {
    text-decoration: none;
    color: inherit;
    font-weight: 100;
}

.list-header {
    display: none;
}

.flowing-text {
    font-family: Poppings;
}

footer {
    background-color: black;
    padding: 0.5vh 1vw;
    text-align: center;
    color: rgb(255, 255, 255);
    
}

footer a, footer p {
    text-decoration: none;
   

  }


/*------------------ DESKTOP------------------------------*/

  @media only screen and (min-width: 768px) {
    
   
    header {
        
        background-color: var(--main-black);
        padding-left: 0;
        padding-right: 0;
        
    }
    
    nav {
        position: fixed;
        display: flex;
        width: 100%;
        justify-content: right;
        padding-right: 0;
        padding-left: 0;
        padding-top: 5px;
        padding-bottom: 5px;
        z-index: 10;
        list-style-type: none; 
        background-color: var(--main-black);
    }
    
    nav li  {
        flex-direction: row;
        font-size: 1rem;
        padding-left: 2vw;
        padding-right: 2vw;
    }
    
    body, h2 {
        
        font-weight: 100;
        font-family: Poppins;
    }
    
   
    
    
    
    a span, a time {
        display:block;
        text-decoration: none;
    }

    a {
        font-size: inherit;
    }
    
    
    .proyects-list {
        position: relative;
        width: 100vw;
        z-index: 1;
        height:200vh;
        
    }
    
    .two-grid {
        display:flex;
        flex-direction: row;
        position: relative;
        text-align: left;
        font-size: inherit;
        
        
    }
    
    .list-header {
        padding-left: 2vw;
        padding-right: 2vw;
        font-size: 1.5rem;
        
        position: sticky;
        top: 8vh;
        color: var(--main-black);
        background-color: var(--main-white);
     
        display:flex;
        
    }
    
    .list-header span {
    width: 40%;
    }
    
    .proyect-container {
        
        padding-left: 2vw;
        padding-right: 2vw;
        padding-top: 20px;
        padding-bottom: 20px;
        z-index: 8 ;    
        position: relative;
    }
    
    .proyect-container:hover {
        background-color: black;
        color: var(--main-white);
        z-index: 10;
        transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s;
    }
    
    .hover-image{
        display: none;
        position: absolute;
        top: 0;
             right: 2vw;
        width: auto;
        height: 40vh;
        
        
    }

    .hover-image-above {
        display: none;
        position: absolute;
        top: -225%;
        right: 2vw;
        width: auto;
        height: 40vh;
        
    }
    
    .proyect-container:hover .hover-image {
        display:flex;
    }

    .proyect-container:hover .hover-image-above {
        display: flex;
    }
    
    .proyect-name {
        width: 40%;
    }
    
    .proyect-category {
        width: 40%;
    }

    #thumbnail-type-morpher {
        width: 25vw;
        height: auto;
    }

    #thumbnail-smabs {
        width: 30vw;
        height: auto;
        top: -110%;
    }

    
footer {
    background-color: black;
    padding: 0.5vh 0;
    display: flex;
    color: rgb(255, 255, 255);
    
}

footer p {
    text-decoration: none;
    margin-left:2vw;
  }

  footer p a {
    margin: 0;
  }
   
    
    
     /* width */
     ::-webkit-scrollbar {
        width: 10px;
      }
      
      /* Track */
      ::-webkit-scrollbar-track {
        background: var(--main-white)
      }
       
      /* Handle */
      ::-webkit-scrollbar-thumb {
        background: #dfd8d8; 
        border-radius: 50px;
      }
      
      /* Handle on hover */
      ::-webkit-scrollbar-thumb:hover {
        background: #555; 
      }
  }