при введении "@media" появляется ошибка

введите сюда код

• box-sizing: border-box

$color-blue: #5473B6 $color-yellow: #F8E31A

@font-face font-family: 'Rubik Mono One' src: local('Rubik Mono One') // если у пользователя на компе есть, то шрифт загрузится с ПК src: url(../fonts/RubikMonoOne-Regular.ttf)

header background-image: url(../img/bacground4.jpg) display: flex justify-content: center hr margin: 0 border: none border-top: 8px border-top-style: ridge width: 98% .hr-yellow border-top-color: $color-yellow

.hr-blue border-top-color: $color-blue

.hr_box display: flex flex-direction: column align-items: center

h1 font-size: 50px color: white padding-top: 25px padding-bottom: 25px font-family: 'Rubik Mono One', sans-serif font-weight: 700 text-shadow: 10px 10px 30px #5473B6, -10px -10px 30px #F8E31A -webkit-text-stroke: 0.1px //#F8E31A -webkit-text-fill-color: transparent letter-spacing: 10px text-align: center

.container max-width: 1440px margin: 0 auto

.main-section position: relative min-height: 730px background-image: url(../img/bacground4.jpg) background-position: center background-size: cover &__nav display: flex justify-content: end padding-top: 30px padding-bottom: 30px &__content display: inline-flex display: flex max-width: 1440px justify-content: space-around overflow: hidden

&__right-wraper
    display: flex
    flex-wrap: wrap
    flex-direction: column
    //justify-content: center
    align-items: center
        

.left-wraper display: flex flex-wrap: wrap align-content: flex-end .main-img height: 588px .nav-menu &__button margin-right: 15px &:last-child margin-right: 0

.right-wraper &__icon-box margin-bottom: 60px &__button-box display: inline-flex justify-content: center &__logo-box position: relative width: 200px margin-bottom: 250px margin-left: 15px z-index: 5

.icon-box display: inline-flex .logo-box__item position: absolute

.blu_circle width: 200px top: 1px left: 1px animation-name: fli_blue animation-duration: 3s animation-iteration-count: 1 animation-timing-function: linear @keyframes fli_blue 0% transform: rotate(560deg) top: -600px left: -700px 50% transform: rotate(360deg) top: 1px left: 1px

    100%
        transform: rotate(0deg)

.grap_pancr width: 165px top: 15px left: 15px animation-name: fli_grap_pancr animation-duration: 1s animation-iteration-count: 1 animation-timing-function: linear @keyframes fli_grap_pancr 0% top: -300px 50% transform: rotate(0deg) top: 15px left: 15px

    100%
        transform: rotate(0deg)

.lutador width: 80px top: 160px left: 65px animation-name: fli_lutador animation-duration: 1s animation-iteration-count: 1 animation-timing-function: linear @keyframes fli_lutador 0% top: 600px 50% transform: rotate(0deg) top: 160px left: 65px

    100%
        transform: rotate(0deg)

.yellow_circle width: 110px top: 40px left: 40px animation-name: fli_yellow animation-duration: 3s animation-iteration-count: 1 animation-timing-function: linear @keyframes fli_yellow 0% transform: rotate(-560deg) top: 600px left: 700px 50% transform: rotate(-360deg) top: 40px left: 40px

    100%
        transform: rotate(0deg)

.wreslers width: 70px top: 60px left: 60px animation-name: fli_wreslers animation-duration: 0.2s animation-iteration-count: 1 animation-timing-function: linear @keyframes fli_wreslers 0% top: 300px 50% transform: rotate(0deg) left: 165px

    100%
        transform: rotate(0deg)

.button position: relative display: inline-block overflow: hidden &:before content: '' position: absolute top: 0px left: 0px width: 1.5em height: 100% background-color: rgba(#fff, 0.6) transform: translateX(-2em) skewX(-45deg) &:hover &:before animation: ligh-touch 0.5s

@keyframes ligh-touch from transform: translateX(-2em) skewX(-45deg) to transform: translateX(15em) skewX(-45deg)

.right-wraper__button &:before content: '' position: absolute top: 0px left: 0px width: 1.5em height: 100% background-color: rgba(#fff, 0.6) transform: translateX(-2em) skewX(-45deg) animation-name: ligh animation-duration: 5s // общее время анимации animation-iteration-count: infinite

@keyframes ligh 0% transform: translateX(-2em) skewX(-45deg) 20% transform: translateX(15em) skewX(-45deg) // задаю интервалы между анимацией 20% от общего времени 100% transform: translateX(15em) skewX(-45deg)

a color: $color-yellow text-decoration: none font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif font-family: sans-serif //без засечек letter-spacing: 3px // расстояние между буквами .button padding: 0px background-color: black width: 13em height: 3em border-radius: 100px border-color: $color-yellow

.icon-box__item position: relative margin-right: 15px &:last-child margin: 0 i font-size: 35px color: #F8E31A border: none position: relative

i:hover border-radius: 100px border-color: $color-yellow box-shadow: 0px 0px 30px //вторая секция .second-section background-color: $color-yellow &__container display: flexbox padding-top: 20px padding-bottom: 20px min-height: 500px .container__wraper width: 100% display: inline-flex justify-content: space-evenly align-items: flex-start margin-bottom: 20px &:last-child margin-bottom: 0 .img__treners width: 300px margin-right: 20px .p-span font-weight: bold margin-bottom: 10px .name-span margin-right: 28px .location-span margin-right: 9px .regalis-span margin-right: 20px p font-size: 18px font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif display: flex .p-wraper max-width: 800px

.wraper__img position: relative .wraper-flag position: absolute width: 40px height: 20px top: 0 left: 0 .flag-rus display: block &__first-stripe height: 33.5% background-color: white &__second-stripe height: 33.5% background-color: blue &__third-stripe height: 33.5% background-color: red

.flag-spain display: inline &__first-stripe height: 25% background-color: red &__second-stripe height: 50% background-color: orange display: flex &__third-stripe height: 25% background-color: red .Spain-emblem width: 20% margin-left: 25% //третья секция .third-section background-image: url(../img/bacground4.jpg) font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif text-align: center &__container min-height: 200px padding-top: 30px padding-bottom: 15px display: flex justify-content: flex-start flex-direction: column flex-wrap: wrap align-items: center .img__progress width: 30vw

.dropdown &__wrapper display: block position: relative font-size: 18px font-weight: bold color: $color-yellow &:hover .dropdown__item display: block list-style-type: disc &__item text-align: start color: $color-yellow font-size: 18px text-decoration: none display: none &:hover color: black background: $color-yellow &__link color: $color-yellow letter-spacing: 5px //мeжбуквенное рассояние &:hover color: black background: $color-yellow //футер .footer background-image: url(../img/bacground4.jpg) &__container padding: 15px min-height: 300px display: flex flex-direction: column align-items: center &__icon-box
padding-top: 20px iframe width: 70% min-height: 300px

@media