I am working on a new site at the moment, and I'm wondering how I would go about making the sidebar responsive, meaning that:

* it moves from the left to the top (not sticky);
* the links turn into a hamburger icon;
* when the hamburger icon is tapped, a full-screen menu appears (transparent colour), withthe available links centered on the screen, and an "X" to dismiss the menu in the top right;
* both the hamburger icon and the logo are centered vertically in the nav, with the logo aligned to the left and the hamburger icon to the right;

Here's my HTML:

```html
<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Maestoso Digital</title>
        <link rel="stylesheet" type="text/css" href="style.css" /> 
    </head>

    <body>
        <nav id="nav">
            <img id="logo" src="img/logo.png" alt="Maestoso Digital logo">
            <ul id="nav-links">
                <li id="active">Home</li>
                <li><a href="hosting.html">Hosting</a></li>
                <li><a href="cloud-management.html">Cloud Deployment</a></li>
                <li><a href="system-admin.html">System Administration</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
            <form action="customers.html">
                <input id="customers-button" type="submit" value="Existing Customers" />
            </form>
        </nav>

        <main>
            <div id="header">
                <img id="header-img" src="img/header.png" alt="Picture of data centre">
                <h1 id="header-title">Welcome</h1>
            </div>
            <div id="content">
                <h1>We are an internet service provider for the modern digital age!</h1>
                <p>Maestoso Digital is an internet service provider offering bespoke, enterprise-grade hosting solutions and system administration services for all, but especially for musicians and musical organisations. Our numerous datacenters around the globe offer ultra-fast performance for whatever your needs may be, and our Network Operations Centre monitor your services 24/7 to ensure that they are always online.</p>

                <footer>
                    <p>&copy; <a href="#">Maestoso Digital</a>. All rights reserved.</p>
                </footer>
            </div>
        </main>
    </body>
</html>

```

And here's my CSS:

```css
@import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');

* {
    box-sizing: border-box;
    font-family: "Share Tech", sans-serif;
}

body {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #ed15ac;
}

a:hover {
    font-weight: bold;
    color: #ed1c51;
}

#content {
    margin-top: 50px;
    margin-left: 310px;
    margin-right: 10px;
    padding-bottom: 2.5rem;
}

p, ul, li {
    font-size: 16pt;
}

#nav {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    background-color: #dbdbdb;
    align-items: center;
    z-index: 10;
}

@media screen and (max-width: 700px) {
    #nav {
        width: 100%;
        height: auto;
        position: relative;
        padding-bottom: 10px;
        float: right;  
    }

    #nav a {float: left;}

    div#content {margin-left: 0; padding: 5px;}
}

@media screen and (max-width: 400px) {
    #nav a {
        text-align: center;
        float: none;
    }
}

nav img {
    display: block;
    margin-bottom: 35px;
    padding-top: 20%;
    max-width: 150px;
}

#nav-links {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 16pt;
}

#nav-links:not(:last-child) {
    margin-bottom: 50px;
}

p {
    font-size: 16pt;
    font-color: #1a1a1a;
}

h1 {
    font-size: 24pt;
    font-color: #000;
}

input {
    background-color: #ed15ac;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    transition-duration: 0.4s;
}

input:hover {
    background-color: #ed1c51;
    color: white;
    cursor: pointer;
}

#header {
    position: relative;
}

#header-title {
    position: absolute;
    bottom: 5px;
    left: 310px;
    color: white;
    opacity: 60%;
    font-size: 120px;
    text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}

footer {
    padding-top: 20px;
    bottom: 0;
    width: 100%;
    height: 2.5rem;
    text-align: center;
}

```

I have tried everything that I can think of, and just can't get it to work. Any suggestions would be hugely appreciated.

Yours, Antiquis