for this code please make it work in smaller screen while also have the animation please help $.$main$1\{$

height: $100\%$;

width: $100\%$;

display: flex;

align$-$items: center;

justify$-$content: center;

text$-$align: center;

$\}$

$.$roller$1\{$

height: $4\mathrm{.}125$rem;

line$-$height: $4$rem;

position: relative;

margin$-$bottom: $30$px;

overflow: hidden;

width: $100\%$;

display: flex;

justify$-$content: center;

align$-$items: center;

color: #E$36414$;

$\}$

#spare$-$time $\{$

font$-$size: $1$rem;

font$-$style: italic;

letter$-$spacing: $1$rem;

margin$-$top: $0$;

$\}$

#rolltext $\{$

margin$-$top: $6$px;

$\}$

$.$roller$1$ #rolltext $\{$

position: absolute;

top: $0$;

animation: slide $5$s infinite;

$\}$

@keyframes slide $\{$

$0\%\{$

top: $0$;

$\}$

$25\%\{$

top: $-4$rem;

$\}$

$50\%\{$

top: $-8$rem;

$\}$

$72\mathrm{.}5\%\{$

top: $-12\mathrm{.}25$rem;

$\}$

$\}$

@media screen and $($max$-$width: $600$px$)\{$

$.$main$1$ h$1\{$

text$-$align: center;

text$-$transform: uppercase;

color: #F$1$FAEE;

font$-$size: $2\mathrm{.}125$rem;

$\}$