Media query error

Tell us what’s happening:

Blockquote

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
:root {
	--customGreen: #c6f68d;
	--customGray: #121212;
	--customWhite: rgb(252, 252, 252);
	--customRed: rgb(27, 14, 1);
	--gradientLeft: linear-gradient( to left, #121212, black, var(--customRed));
	--gradientHover: linear-gradient(#a1ec44, #703b09);
	--gradientActive: linear-gradient(to left, #f68da7, #6e2626);
	--main-background: linear-gradient( 45deg, #121212, black, var(--customRed));
}

* {
	font-family: 'Roboto', sans-serif;
	color: var(--customWhite);
	list-style: none;
	text-decoration: none;
}

body {
	margin: 0;
	background: var(--main-background);
}

#navbar {
	position: fixed;
	display: flex;
	justify-content: flex-end;
	top: 0px;
	margin: 0;
	padding: 25px 0;
	width: 100%;
	z-index: 1;
	background: inherit;
}

#nav-list {
	display: flex;
	justify-content: space-between;
}

#nav-list li {
	margin: 0 2vw;
	font-size: 1.3em;
}

#nav-list a:hover {
	text-decoration-line: underline;
	color: var(--customGreen);
}

ul {
	margin: 0;
	padding: 0;
}


    main {
	position: relative;
	bottom: 40px;
	margin: 0 5%;
	text-align: center;
}

#welcome-section {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

#welcome-section>h1 {
	font-size: 2em;
	text-transform: uppercase;
	color: var(--customGreen);
}

section {
	margin: 30px 0;
}

.headers {
	color: var(--customGreen);
	font-size: 1.4em;
	border-bottom: 0.1em solid;
	margin: 30px 0 20px 0;
	text-align: left;
}

p {
	font-size: 1em;
	line-height: 1.8;
	text-align: justify;
	color: var(--text);
}

.projects-container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.projects-container a {
	color: var(--customGreen);
	margin: 20px;
	border: 10px solid;
	border-image-slice: 1;
	border-width: 2px;
	border-image-source: var(--customRed);
	width: 300px;
	height: 200px;
	display: flex;
	justify-content: center;
}

.projects-container ul {
	height: 100px;
	line-height: 170%;
	white-space: nowrap;
}

.projects-container a:hover {
	border-image-source: var(--gradientHover);
	cursor: pointer;
}

.projects-container a:active {
	border-image-source: var(--gradientActive);
}

.project-tile {
	font-size: 1.3em;
}

#project {
	order: 3;
}

#project2 {
	order: 2;
}

#project3 {
	order: 1;
}

.contact-container {
	font-size: 1.2em;
}

#contacts a {
	margin: 20px;
}

#contacts a:hover {
	color: var(--customGreen);
}

footer p {
	position: relative;
	text-align: right;
}

footer a {
	color: var(--customGreen);
}

#scrollBtn{
  position:fixed;
  bottom: 10px;
  right:10px;
  color: var(--customGray)
}
#scrollBtn:hover{
  background-color: var(--customGray);
  color: var(--customWhite);
  cursor: pointer;
}

@media (max-width: 600px) {
	#nav-list {
		display: block;
		margin: auto;
	}
	#nav-list li {
		padding: 10px 0 0 0;
	}
	.contact-container {
		display: grid;
		margin-top: 20px;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 40px 40px;
	}
  
  footer p {
	text-align: center;
}
}
</style>
<!DOCTYPE html>
<html>
<head>
    <title>Personal Portfolio</title>
    <link rel="stylesheet" type="text/css" href="styles/layout.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
        integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous" />
    <script src="./scrypts/typewriter.js"></script>

</head>

<body>
    <!--FreeCodeCamp test script-->
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    <nav id="navbar">
        <ul id="nav-list">
            <li><a href="#welcome-section">About</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#contacts">Contact</a></li>
        </ul>
    </nav>
    <main>
        <section id="welcome-section">
            <h1>...</h1>
        </section>
        <section id="about-section">
            <header class="headers">About</header>
            <h2>Learn, create, work and repeat.
            </h2>
            <p>I am a Web Developer passionate about the internet, data, and quality. I believe that together, they
                can
                be powerful and meaningful in many ways to change people's lives.
                Over the years, I have acquired expertise and experience in a wide range of tools that, along with
                my
                creativity and resilience, have allowed me to help people solve their problems and make their lives
                easier. I love to learn, seek innovation and help those around me achieve their goals.
                I am also a multi-instrumentalist/producer/mixer and music has been a big passion since I was young.
                I
                like to stay with my family and friends in my free time, learn new stuff, play my guitar, compose
                songs
                or make notes about new ideas.
                Let's connect and have a chat about what you are trying to build next!</h1>
        </section>
        <section id="projects">
            <header class="headers">Projects</header>
            <div class="projects-container">
                <a id="project1">
                    <ul>
                        <h2 class="project-tile">DA/BA</h2>
                        <li>Process Improvement</li>
                        <li>Total Quality Management</li>
                        <li>Business Process Mapping</li>
                    </ul>
                </a>
                <a id="project2">
                    <ul>
                        <h2 class="project-tile">Music Services</h2>
                        <li>Live Recording</li>
                        <li>Music Lessons</li>
                        <li>Post Production</li>
                    </ul>
                </a>
                <a id="project3">
                    <ul>
                        <h2 class="project-tile">Web Development</h2>
                        <li>Websites</li>
                        <li>Android Apps</li>
                        <li>Iphone Apps</li>
                    </ul>
                </a>
            </div>
        </section>
        <section id="contacts">
            <header class="headers">Get In Touch</header>
            <div class="contact-container">
                <a id="profile-link" href="https://github.com/jonathanbcsouza" target="_blank">
                    <i class="fab fa-github"></i>
                    GitHub
                </a>
                <a id="profile-link" href="https://www.linkedin.com/in/jonathanbcsouza" target="_blank">
                    <i class="fab fa-linkedin"></i>
                    LinkedIn
                </a>
                <a id="profile-link" href="https://dev.to/jonathanbcsouza" target="_blank">
                    <i class="fab fa-dev"></i>
                    Dev
                </a>
                <a id="profile-link" href="https://codepen.io/jonathanbcsouza" target="_blank">
                    <i class="fab fa-codepen"></i>
                    CodePen
                </a>
                <a id="profile-link" href="https://twitter.com/jonathanbcsouza" target="_blank">
                    <i class="fab fa-twitter"></i>
                    Twitter
                </a>
            </div>
        </section>
        <footer>
            <p class="link-footer">&copy;Created with love for
                <a href="https://www.freecodecamp.com/" target="_blank">FreeCodeCamp</a>
            </p>
        </footer>
    </main>
	<button id="scrollBtn" onclick="scrollUp()">△</button>
</body>

</html>
type or paste code here

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36 Edg/103.0.1264.49

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

that file is not available in the freeCodeCamp editor

thank you for the guidence … it works…

i want to know when i will get my certificate…i claim it successfully

i cant see my certificate…please help

If you claimed it it’s yours, what do you mean that you can’t see it? What happened?

initially i cant see my certificate …but later i got it…