How do I fix this hamburger icon?

Have only included the parts necessary.

It was working the other day and has now stopped, this is for an assignment so any help is welcomes, thank you x

HTML

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>D@rknet</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap">

</head>

        <nav class="topnav" id="myTopnav">
            <a href="#Games" class="active">Home</a>
            <a href="#Prototypes">Prototypes</a>
            <a href="#About Us">About us</a>
            <a href="#Careers">Careers</a>
            <a href="#Contact Us">Contact Us</a>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                <i class="fa fa-bars"></i>
            </a>
        </nav>

<script>
        function myFunction() {
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }

CSS

@media screen and (max-width: 600px) {
	.search-container {
        display: none;
    }
    .topnav a:not(:first-child) {
    	display: none; 
    }
    .topnav a.icon {
        float: right;
        display: block;
        cursor: pointer;
    }
    .topnav.responsive {
        position: relative;
        display: block;
    }
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

i dont know why the code has done this

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').


The menu seems to work for me when i close the script tag at the end.