is there a problem with the media query in the CSS code?

I tried to use media query for the first time to make a simple section responsive where the font-size gets smaller when the screen is small

but for some reason it didn't work for me please if you see something that i dont infrom me

here is the HTML code that i use for the project

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>
EYD
    </title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
</head>


<body>
   
<main>
    <div class="mainco">
        <h1>
            welcome to <br><span>EYD</span>
        </h1>
        <h2>best web-developing service on the internet</h2>
        <div class="buttons">
            <p><a href="#">ORDER</a></p> 
            <p><a href="#">HOW IT WORKS</a></p>
        </div>    
    </div>
</main>
<!-- ******************************************************** -->

<section>

</section>

</body>
</html>

here is the CSS code that contains the media query targeting a h1 element in the page

CSS:

/*this is a universal selector to clear the padding and margin*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

/*-------------------------------------
main 
--------------------------------------*/


/*here is the style of the main as a section*/
main{
    background: url(code1.jpg) purple;
    background-repeat: no-repeat;
    background-size:cover ;
    width: 100%;
    height: 630px;
    color: white;
    font-family: "alternate gothic";
    padding: 20px 0 0 0;
    
}

/*the style of the main section's text block*/
.mainco{
    width: 40%;
    max-height: 70%;
    text-align: center;
    margin: 10% 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 800px){
    .mainco h1{
        font-size:20px;
    }
}


/*the style of the h1 of the text*/
.mainco  h1 {
    font-size: 60px;
}
.mainco h1 span{
    text-shadow: 3px 3px rgb(167, 119, 119); font-size: 75px;
}
/*the style of h2 of the text*/
main  h2{
    font-size: 50px;
}
.buttons{
    min-width: 400px;
}
/*the style of the two button's text containers*/
.buttons p{
    padding: 20px;
    background-color: brown;
    display: inline-block;
    margin: 60px 20px;
}
/*styling the button's text*/
.buttons a{
    text-decoration: none;
    color: white;
    display: block;
    width: 100%;
    height: 100%;
}

Solution

Always put your media queries at the end of your CSS code. That will stop the the other h1 declarations from overriding your media query.