#page-menu .menu li a.actuality.active {
    border-bottom: 5px solid #1e283c;
    font-size: 2.2rem;
    animation-name: active-menu;
    animation-duration: 3s;
}

@keyframes active-menu {
    from {
        border-bottom: 0 solid #1e283c;
        font-size: 1.3rem;
    }
    to {
        border-bottom: 5px solid #1e283c;
        font-size: 2.2rem;
    }
}

main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: calc(100% - 96px);
}

section#actually-project .project-title {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
    transform: scale(0.7);
    animation-fill-mode: forwards;
    font-size: 1.2rem;
    color: #111111;
    text-align: justify;
}

.flex-container:nth-of-type(2) .box:nth-of-type(1) {
    order: 1;
}

p.end-point {
    font-size: 1.1rem;
    color: orange;
}

p.what-is-purpose {
    font-size: 1rem;
    color: #006241;
}

p.slide-from-left {
    animation: linear;
    animation-name: run-laravel;
    animation-duration: 2s;
    position: relative;
}

p.slide-from-right {
    animation: linear;
    animation-name: run-angular;
    animation-duration: 2s;
    position: relative;
}

img.laravel-img {
    width: 40%;
}

.functions-container div#functions {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

div#functions img {
    width: 180px;
}

div#functions div {
    margin-bottom: 20px;
}

@-webkit-keyframes run-laravel {
    0% {
        left: 50%;
    }
    100% {
        left: 0;
    }
}

@-webkit-keyframes run-angular {
    0% {
        left: -50%;
    }
    100% {
        left: 0;
    }
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@media screen and (min-width: 768px) {
    section#actually-project .project-title {
        font-size: 1.6rem;
    }

    p.end-point {
        font-size: 1.4rem;
        color: orange;
    }

    p.what-is-purpose {
        font-size: 1.2rem;
    }

    .flex-container:nth-of-type(2) .box:nth-of-type(2) {
        order: 2;
    }

    .functions-container div#functions {
        flex-direction: row;
    }

    div#functions div {
        margin-bottom: 0;
    }

    div#functions img {
        width: 250px;
    }
}