I need help with my CSS, i'm supposed to have a mobile, tablet, and desktop viewport I have the class="desktop" already in my code. I'm trying to make it a mobile first viewport

@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');

.float-left { float: left; }

img { max-width: 100%; height: auto; width: 675px; }

nav li { list-style-type: none; }

#outerwrapper { width: 100%; margin-left: auto; margin-right: auto; }

nav ul { padding: 0; margin-top: 0.5em; margin-bottom: 0.5em; }

nav li { background-color: #009980; border-radius: 2em; list-style-type: none; margin: 0.3em; padding: 0.4em; text-align: center; }

main { display: block; font-family: Verdana, Arial, sans-serif; font-size: 1em; margin-top: 0.5em; padding: 1em; border-radius: 1em; background-color: #FFFFFF; border-top: solid 0.2em #009933; border-bottom: solid 0.2em #009933; }

footer { font-size: .70em; text-align: center; margin-top: 2em; }

/*.myname { font-family: Futura, Calibri, sans-serif; font-size: 2em; } */

.mobile { display: inline; } .desktop { display: none; } .tablet { display: none; } .myname { font-family: 'Fjalla One', sans-serif; font-size: 2em; }

@media only screen and (min-width: 481px) { .mobile {display: none;} .desktop {display: inline;} .tablet {display: block;} .equip { display: inline; float: left; margin-right: 1.5em; }

nav li { display: inline; float: left; margin-left: 1%; margin-right: 1%; padding-left: 0; padding-right: 0; width: 10%; white-space: nowrap; }

main { clear: left; margin-top: 4em; }

}

@media only screens and (min-width: 830px) {

nav ul { margin: 0; padding-left: 0.50%; padding-right: 0.50%; } nav li { border-radius: 0; border-top: solid #000000; border-bottom: solid #000000; margin-left: 0; margin-right: 0; padding: 0; width: 20%; } nav li a { display: inline-block; padding: 0.7em; }

nav li a:link { color: #FFFFFF; }

mav li a:visited { color: #FFFF99; }

nav li a:hover { color: #FFFF00; font-style: italic; }

nav li a:active { color: #6600cc; }

body { background: -moz-linear-gradient(#FFFFFF, #FFFF99); /*Firefox */ background: -o-linear-gradient(#FFFFFF, #FFFF99); /* Opera */ background: -webkit-linear-gradient(#FFFFFF, #FFFF99); /* Chrome, Safari */ background: linear-gradient(#FFFFFF, #FFFF99); background-attachment: fixed; }

}