@keyframes slide-in-from-left {
        0% {
            transform: translateX(-100vw);
            opacity: 0;
        }
        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }
    .slide-in-from-left {
        animation: slide-in-from-left 0.5s ease-out forwards;
    }

@keyframes slide-in-from-right {
        0% {
            transform: translateX(100vw);
            opacity: 0;
        }
        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }
    .slide-in-from-right {
        animation: slide-in-from-right 1s ease-out forwards;
    }
@keyframes slide-in-from-top {
        0% {
            transform: translateY(-100%);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }
    .slide-in-from-top {
        animation: slide-in-from-top 0.5s ease-out forwards;
    }

@keyframes slide-out {
        0% {
            opacity: 1;
            transform: translateX(0);
            display: flex;
        }
        100% {
            opacity: 0;
            transform: translateX(100vw);
            display: hidden;
        }
    }
    .slide-out {
        animation: slide-out .25s ease-out forwards;
    }

@keyframes pop {
        0% {
            opacity: 0;
            transform: translateY(0), scale(1);
        }
        50%{
            opacity: 1;
            transform: translateY(-200%) scale(1.05);
            
        }
        100% {
            opacity: 1;
            transform: translateY(0), scale(1);
            
        }
    }
    .pop {
        animation: pop 0.25s ease-in-out;
    }

@keyframes slide-out-and-fade {
        0% {
            opacity: 1;
            transform: translateX(0);
            display: flex;
        }
        100%{
            opacity: 0;
            transform: translateX(30vw);
            display: none;
        }
    }
    .slide-out-and-fade {
        animation: slide-out-and-fade 1s ease-in-out forwards;
    }
@keyframes slide-in-and-fade {
        0% {
            opacity: 0;
            transform: translateX(-30vw);
            display: flex;
        }
        100%{
            opacity: 1;
            transform: translateX(0);
            display: flex;
        }
    }
    .slide-in-and-fade {
        animation: slide-in-and-fade 1s ease-in-out forwards;
    }

.project-image-preview{
    transition: transform 0.5s ease-in-out;
}

.project-image-preview:hover{
    transform: scale(1.05);
}


@keyframes toast-slide-in-and-out {
    0%{ 
        transform: translateY(100%) translateX(-50%); 
        opacity: 0;
    }
    10%{ /*.25 seconds*/
        transform: translateY(-20%) translateX(-50%); 
        opacity: .95;
    } 
    90%{ /*2.25 seconds seconds*/
        transform: translateY(-20%) translateX(-50%); 
        opacity: .95;
    }
    100%{ 
        transform: translateY(100%) translateX(-50%);
        opacity:0;
    }
}

@keyframes toast-spam-wobble{
    0%{
        transform: translateY(-20%) translateX(-50%)
        rotate(0deg);
    }
    25%{
        transform: translateY(-20%) translateX(-50%)
        rotate(1deg);
    }
    50%{
        transform: translateY(-20%) translateX(-50%)
        rotate(-1deg);
    }
    75%{
        transform: translateY(-20%) translateX(-50%)
        rotate(1deg);
    }
    100%{
        transform: translateY(-20%) translateX(-50%)
        rotate(0deg);
    }
}

.toast{
    left: 50%;
    transform: 
        translateX(-50%)
        translateY(100%);
}

.toast.is-visible {
    animation: toast-slide-in-and-out 2.5s ease-in-out forwards;
}


.toast.angry{
    animation: toast-spam-wobble 0.25s infinite;
    transform-origin: center center;
}

.toast.is-visible.angry {
    animation:
        toast-slide-in-and-out 2.5s ease-in-out forwards,
        toast-spam-wobble 0.25s infinite;
}

.hidden, 
.hidden.slide-in-from-left-target h2, 
.hidden.slide-in-from-left-target div{
    display: none;
}

html{
    scroll-behavior: smooth;
}

.card-title{
    scroll-margin-top: 5vh;
}

.is-fixed {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

@keyframes slide-accross-screen-1{
    from{
        transform: translateX(-50%)
    }
    to{
        transform: translateX(50%)
    }
}
@keyframes slide-accross-screen-2{
    from{
        transform: translateX(-150%)
    }
    to{
        transform: translateX(-50%)
    }
}

#graphic-1{
    animation: slide-accross-screen-1 40s linear infinite;
}

#graphic-2{
    animation: slide-accross-screen-2 40s linear infinite;
}