@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');


html {
  scroll-padding-top: 80px;
}

*{
    font-family: "Work Sans", sans-serif;
}

.project-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.project-card:hover {
    transform: translateY(-5px);
}

.project-modal {
    transition: all 0.3s ease;
}

.logo{
    width: 5vw;
    height: auto;
}


.text-emerald-flow {
    background: linear-gradient(
        to right, 
        #059669 0%, 
        #34d399 25%, 
        #60a5fa 50%, 
        #34d399 75%, 
        #059669 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: flow 4s linear infinite;
}

.animate-reveal-diagonal {
    opacity: 0;
    transform: translateY(110%) rotate(3deg);
    transform-origin: left top;
    animation: revealDiagonal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes flow {
    to { background-position: 200% center; }
}

@keyframes revealDiagonal {
    0% { 
        opacity: 0;
        transform: translateY(110%) rotate(3deg);
    }
    100% { 
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
}


.profil{
    height: auto;
    width: 10vw;
}

.items-center{
    justify-content: space-evenly;
}


@media (max-width: 540px) {

    .profil{
        width: 20vw;
    }

}