#logo-dragao {
    max-height: 29vh;
}

.top-down-animation {
    animation-name: topDownAnimation;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.down-top-animation {
    animation-name: downTopAnimation;
    animation-duration: 2.2s;
    animation-fill-mode: forwards;
}

@keyframes topDownAnimation {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: scaleX(-1) translate(45vmin, -30vmin);
        opacity: 0;
    }
    75% {
        transform: translate(80vw, 70vh) scaleX(-1) rotate(30deg);
        opacity: 0;
    }
    100% {
        transform: translate(55vw, 65vh) scaleX(-1) rotate(30deg);
        opacity: 1;
    }
}

@keyframes downTopAnimation {
    0% {
        transform: translate(55vw, 65vh) scaleX(-1) rotate(30deg);
    }
    50% {
        transform: translate(80vw, 70vh) scaleX(-1);
    }
    80% {
        transform: translate(45vmin, -30vmin) scaleX(-1);
    }

    95% {
        transform: translate(0, 0) scaleX(-1);
    }

    100% {
        transform: translate(0, 0);
    }
}

@media only screen and (max-width: 1100px) {
    .dragao {
        flex-direction: column-reverse;
    }

    .dragao h2 {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .project {
        align-self: center;
    }
}