.content {
    font-family: "Inter", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #111111;
    padding-left: 0.25em;
}

@media only screen and (max-width: 767px) {
    .content {
        font-size: 1rem !important;
        padding-left: 0.25em;
    }
}

.outer {
    overflow: hidden  !important;
    transform: rotate(-2deg);
    background-color: yellow;
    position: relative;
    padding-top: 0.4%;
    padding-bottom: 0.4%;
    width: 110%;
    margin-left: -5%;
    
}

.outer div {
    display: inline-block;
}

.loop {
    white-space: nowrap;
    animation: loop-anim 35s linear infinite;

}

@media only screen and (max-width: 767px) {
    .loop {
        animation: loop-anim 35s linear infinite;
    }
}

@keyframes loop-anim {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -50% 
    }
}

.content2 {
    font-family: "Inter", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    padding-left: 0.25em;
}

@media only screen and (max-width: 767px) {
    .content2 {
        font-size: 1rem !important;
        padding-left: 0.25em;
    }
}

.outer2 {
    overflow: hidden  !important;
    transform: rotate(-2deg);
    background-color: #2d2d2d;
    position: relative;
    padding-top: 0.4%;
    padding-bottom: 0.4%;
    width: 110%;
    margin-left: -5%;
    
}

.outer2 div {
    display: inline-block;
}

.loop2 {
    white-space: nowrap;
    animation: loop-anim 35s linear infinite;
    animation-direction: reverse;
}

@media only screen and (max-width: 767px) {
    .loop2 {
        animation: loop-anim 35s linear infinite;
			animation-direction: reverse;
    }
}

@keyframes loop-anim {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -50%
    }
}