/*.section1{
    transform: translateX(-100px);
    opacity: 0;
}

.section1:hover{
    transform: translateX(0px);
    opacity: 1;
    transition: opacity 0.5s, height 2s, transform 1s;
}*/

.stopAnimation{
    opacity: 1 !important;
    animation: none !important;
}

.space1 {
    animation: fromLeft 1s, fadeIn 0.8s;

    .name{
        animation-play-state: running;
    }

    .t1{
        animation-play-state: running;
    }
    .t2{
        animation-play-state: running;
    }
    .t3{
        animation-play-state: running;
    }
    .t4{
        animation-play-state: running;
    }

    animation-fill-mode: forwards;
}

.space4 {
    animation: fromBottom 0.6s, fadeIn 0.1s;

    .contact{
        animation-play-state: running;
    }

    .sideInfo{
        animation-play-state: running;
    }

    animation-fill-mode: forwards;
}

.name{
    opacity: 0;

    animation: fromLeft 1s, fadeIn 0.8s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

.t1{
    opacity: 0;

    @media screen and (max-width:768px){
        animation: fromBottom 1s, fadeIn 0.8s;
        animation-delay: 0.5s;
        animation-fill-mode: forwards;
        animation-play-state: paused;
    }

    animation: fromLeft 1s, fadeIn 0.8s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

.t2{
    opacity: 0;

    @media screen and (max-width:768px){
        animation: fromBottom 1s, fadeIn 0.8s;
        animation-delay: 0.6s;
        animation-fill-mode: forwards;
        animation-play-state: paused;
    }

    animation: fromLeft 1s, fadeIn 0.8s;
    animation-delay: 0.6s;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

.t3{
    opacity: 0;

    @media screen and (max-width:768px){
        animation: fromBottom 1s, fadeIn 0.8s;
        animation-delay: 0.7s;
        animation-fill-mode: forwards;
        animation-play-state: paused;
    }

    animation: fromLeft 1s, fadeIn 0.8s;
    animation-delay: 0.7s;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

.t4{
    opacity: 0;

    @media screen and (max-width:768px){
        animation: fromBottom 1s, fadeIn 0.8s;
        animation-delay: 0.8s;
        animation-fill-mode: forwards;
        animation-play-state: paused;
    }

    animation: fromLeft 1s, fadeIn 0.8s;
    animation-delay: 0.8s;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

.contact {
    opacity: 0;

    animation: fromBottom 0.3s, fadeIn 0.8s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

.sideInfo {
    opacity: 0;

    animation: fromBottom 0.5s, fadeIn 1s;
    animation-delay: 0.6s;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

.message{
    transform: translateY(100px);
    
    animation: fromBottom 1s;
    animation-delay: 3s;
    animation-fill-mode: forwards;
}

@keyframes fromLeft{

    from {
        transform: translateX(-100px);
    }

    to {
        transform: translateX(0px);
    }
}

@keyframes fromBottom{

    from {
        transform: translateY(130px);
    }

    to {
        transform: translateY(0px);
    }
}

@keyframes fadeIn{

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}