@media (min-width: 0px) {
    #slogan {
        margin-top: 100px;
        font-size: 2rem;
    }
    #pDelta {
        font-size: 2rem;
    }
}

/*=================================================================================================*/
@media (min-width: 992px) {
    #slogan {
        margin-top: 150px;
        font-size: 3rem;
    }
    #pDelta {
        font-size: 3rem;
    }
}

/*====================================================================================*/

#slogan {

    color: #c5c4c4;
    animation: textShadow 1s forwards 2700ms;
}
@keyframes textShadow {
    0% {
        text-shadow: 0 0 0 black;
    }
    100%{
        text-shadow: 4px 4px 7px black;
    }

}

.sloganColor {
    color: white;
}

#pDelta {
    font-weight: bold;
    text-align: center;
}

#pWith {
    color: white;
    font-size: 30px;
}



.appear {
    opacity: 0;
    animation: appear 2s ease-out 1s forwards;
}



.exp-content {
    opacity: 1;
    padding-top: unset;
}

.title {
    font-weight: bold;
    color: var(--text-info-2);
    margin-bottom: 0;
}