I wanted to talk about the problem I'm having with @media, I started styling it on mobile first, but when I change something like Font-size on desktop, it also changes on mobile, can someone help me?
@media screen and (max-width: 600px)
.content
height: 50%
width: 99%
h3
padding: 0rem 2rem 1.5rem
font-size: 18px
margin: 12px
font-weight: bold
text-align: center
.circle
height: 53px
width: 53px
margin: -13px 0px 0px 10px
background-color: #fff
border: 2px solid #5E7278
line-height: 65px
font-family: "Roboto"
color: rgb(97, 120, 123)
font-size: 25px
border-radius: 50%
text-align: center
margin-left: 60px
cursor: pointer
-moz-background-clip: padding-box
-webkit-background-clip: padding-box
background-clip: padding-box
span
font-size: 16px
display: flex
justify-content: center
align-items: center
color: rgb(97, 120, 123)
margin-left: 53px
.stepWrapper
display: flex
margin-bottom: 2px
.stepBlock .circleWrapper
padding: 0px 0px
position: relative
.selected .circle
color: #FFF
background-color: rgb(97, 120, 123)
.stepBlock:not(:last-child) >
.circleWrapper::after
content: ''
width: 100%
height: 2px
position: absolute
top: 0px
bottom: 0px
background-color: rgb(97, 120, 123)
margin: auto
z-index: -1
.stepBlock:not(:last-child) >
.circleWrapper::after
height: 3px
margin-left: 67px
margin-top: 13px
.stepBlock:not(:last-child)
.selected > .circleWrapper::after, .stepBlock:not(:last-child)
.selected ~ .stepBlock:not(:last-child) >
.circleWrapper::after
height: 2px
opacity: 0.6
border: 1px solid transparent
.primaryButton
padding: 10px 25px
background-color: rgb(97, 120, 123)
border-color: rgb(97, 120, 123)
border: none
margin: 10px
color: white
border-radius: 4px
cursor: pointer
.primaryButton:disabled
opacity: 0.5
@media screen and (max-width: 600px)
h6
color: black
padding: 0.5rem 2rem 2rem
text-align: center
line-height: normal
margin-top: 14px
margin-bottom: 0px
.inputs-geral
margin-left: 10px
margin-right: 10px
margin-top: -11px
border-radius: 10px
padding: 0px 30px
display: flex
flex-direction: column
-webkit-box-align: center
align-items: center
.input-group
display: flex
align-items: baseline
flex-wrap: wrap
width: 100%
.holder
display: flex
margin-left: -2px
align-items: center
padding: 0.335rem 0.75rem
margin-bottom: 0
font-size: 11px
line-height: 1.1
color: #495057
text-align: center
white-space: nowrap
font-weight: 600
background-color: #e9ecef
border: 1px solid #ced4da
border-radius: 0.25rem
.form-control
border: transparent
border-bottom: 1px solid #e6e6e6
height: 30px
width: 55%
.form-control :hover
border: 1px solid rgb(97, 120, 123)
.jss8
margin-left: -6px
position: relative
z-index: 1
.politic
color: black
font-size: 9px
font-weight: 600
margin-left: 24px
text-align: justify
text-justify: inter-word
line-height: 2.1
margin-top: -25px
.text-center
text-align: center!important
display: inline-block
.buttons
margin-right: 35px
.bt1
width: 100%
color: white
background-color: rgb(97, 120, 123)
border-radius: 3px
padding: 9px 33px
line-height: 1.2
border: none
font-size: 14px
margin-top: 20px
text-align: center
.bt2
width: 100%
color: white
background-color: rgb(97, 120, 123)
border-radius: 3px
padding: 7px 37px
margin-left: 23px
border: none
display: flex
justify-content: center
align-items: center
.avanced
padding: 1rem 3rem
text-align: center
background: linear-gradient(140deg, rgb(243, 210, 60) 0%, orange 100%)
border: none
font-weight: bold
letter-spacing: 0px
border-radius: 50px
margin-bottom: 40px
color: #FFF
margin-left: 130px
margin-top: 47px
cursor: pointer
font-family: "Roboto"
text-transform: uppercase
.video
fill: currentColor
width: 1em
height: 1em
position: absolute
margin: 0px 0px 0px 30px
font-size: 1rem
.question
font-size: 1rem
position: absolute
margin: -5px 0px 0px 5px
.button-help
background-color: #074d47 !important
border-radius: 100%
border: none
width: 45px
height: 45px
float: right
margin-top: 165px
margin-right: 15px
.content
width: 99%
height: 100vh
margin-right: 20px
margin-left: 20px
.input-group
position: relative
display: flex
flex-wrap: wrap // For form validation feedback
align-items: stretch
width: 100%
h3
padding: 2rem 2rem 0px
font-size: 1.5rem
font-weight: 600
text-align: center
font-family: Roboto, sans-serif
margin: 0px
padding: 0px
@media screen and (max-width: 600px)
, but with the formatting it's hard to tell.