.hero{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    min-height: 100vh;
    width: 100vw;
    background: linear-gradient(45deg, grey 33.3%, rgb(209, 147, 34) 33.3%, black);
    display: grid;
    place-items: center;
}
@keyframes slogan {
    from {transform:  translateY(5rem);}
    to {transform: translateY(-1.5rem);opacity: 1;}
}
@keyframes slogan2 {
    from {transform: translateY(-1.5rem);}
    to {transform: translateY(1.5rem);}
}
.slogan{
    position: absolute;
    text-align: center;
    width: clamp(50vw, 70vw, 90vw);
    color: rgb(0, 0, 0);
    opacity: 0;
    animation: slogan 3s cubic-bezier(0, 0, 0.2, 1) forwards;
}
.sloganText{
    font-size: 3.7rem;
    font-weight: bold;
    color: rgb(0, 0, 0);
}
@media screen and (max-width: 600px){
    .sloganText{
        font-size: 2.5rem;
    }
}
.slogan p {
    transform: translateY(-1.5rem);
    animation: slogan2 3s infinite 3s ease-in-out alternate;
}
.slogan p:last-child{animation-delay: calc(3s + 300ms);}