CSS question

I have a css code I added. How do I get this to only display on desktop and tablet, but not phone? Here's the code.

// Rotating Word 1 //

.rotating-words-1 span:nth-child(2) { 
    -webkit-animation-delay: 3s; 
    -moz-animation-delay: 3s; 
    -o-animation-delay: 3s; 
    -ms-animation-delay: 3s; 
    animation-delay: 3s; 
    color: #ffff00;
}

// Rotating Word 2 //

.rotating-words-1 span:nth-child(3) { 
    -webkit-animation-delay: 6s; 
    -moz-animation-delay: 6s; 
    -o-animation-delay: 6s; 
    -ms-animation-delay: 6s; 
    animation-delay: 6s; 
    color: #ffff00; 
}

// Rotating Word 3 //

.rotating-words-1 span:nth-child(4) { 
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s; 
    -o-animation-delay: 9s; 
    -ms-animation-delay: 9s; 
    animation-delay: 9s; 
    color: #ffff00;
}

// Rotating Word 4 //

.rotating-words-1 span:nth-child(5) { 
    -webkit-animation-delay: 12s; 
    -moz-animation-delay: 12s; 
    -o-animation-delay: 12s; 
    -ms-animation-delay: 12s; 
    animation-delay: 12s; 
    color: #ffff00;
}

// Rotating Word 5 //

.rotating-words-1 span:nth-child(6) { 
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s; 
    -o-animation-delay: 15s; 
    -ms-animation-delay: 15s; 
    animation-delay: 15s; 
    color: #ffff00;
}

// Rotating Words //

.rotating-words{
    display: inline;
    text-indent: 10px;
}

.rotating-words-1 span{
    position: absolute;
    opacity: 0;
    overflow: hidden;
    color: #6b969d;
    -webkit-animation: rotateWord 18s linear infinite 0s;
    -moz-animation: rotateWord 18s linear infinite 0s;
    -o-animation: rotateWord 18s linear infinite 0s;
    -ms-animation: rotateWord 18s linear infinite 0s;
    animation: rotateWord 18s linear infinite 0s;
}

// Rotating Animation Keys //

@-webkit-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); }
    5% { opacity: 1; -webkit-transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); }
    20% { opacity: 0; -webkit-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-moz-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -moz-transform: translateY(-30px); }
    5% { opacity: 1; -moz-transform: translateY(0px);}
    17% { opacity: 1; -moz-transform: translateY(0px); }
    20% { opacity: 0; -moz-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-o-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -o-transform: translateY(-30px); }
    5% { opacity: 1; -o-transform: translateY(0px);}
    17% { opacity: 1; -o-transform: translateY(0px); }
    20% { opacity: 0; -o-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -ms-transform: translateY(-30px); }
    5% { opacity: 1; -ms-transform: translateY(0px);}
    17% { opacity: 1; -ms-transform: translateY(0px); }
    20% { opacity: 0; -ms-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; transform: translateY(-30px); }
    5% { opacity: 1; transform: translateY(0px);}
    17% { opacity: 1; transform: translateY(0px); }
    20% { opacity: 0; transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
 

Also. How do I center it on the page? Thanks!

Wrap all code in this code

@media screen and (min-width:641px) {

paste all code here

}

Alternatively, how would I make the text smaller on mobile?

Just now, John2141 said:

Alternatively, how would I make the text smaller on mobile?

Which text?

Got it thanks. If I can get it to display correctly on mobile I would leave it.

The text that is used in the code to display on the page.

8 minutes ago, John2141 said:

The text that is used in the code to display on the page.

Which text?

Here's the html. I was talking about the words under each. Example- action

Obviously I don't know much about code. I am getting these from a source I found online.

<h1>        
  <span>THE COLD STORM<br/></span>
  <div class="rotating-words rotating-words-1">
    <span>a pulsating ride of</span>
    <span>action</span>
    <span>suspense</span>
    <span>combat</span>
    <span>It's only the beginning.</span>
  </div>
</h1>

Sorry. I thought I pasted it.

If you need to see it you can go to my site at johnetterleebooks.com

The only way I can see being able to keep it on mobile is if i could make it smaller. It just looks crammed as is.

It didn't work.