Design issue when transferring html css into wordpress

So I've been asked to develop a custom select menu that renders a submenu based on users choice. Here is the implementation I made using html/css

However when I copy paste this code into wordpress the design alters and my drop down menu render below the heading texts like so:

I know h1 is a block element so here is my following stylesheet and HTML markup:

        <style>
            @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap");
            * {
                font-family: "Playfair Display", serif;
                box-sizing: border-box;
            }
            .container {
                width: 1700px;
                margin: 10px 200px;
            }

            body {
                background-color: #1d1345;
                color: #f4f4f4;
            }

            .heading {
                font-size: 60px;
                display: inline-block;
                margin-right: 10px;
            }
            select {
                font-size: 40px;
            }
            #output {
                width: 400px;
            }
        </style>
    


        <div class="container">
            <div class="top">
                <h1 class="heading">I am a</h1>
                <select name="type" id="type">
                    <option value="" selected></option>
                    <option value="futurestudent">Future Student</option>
                    <option value="currentstudent">Current Student</option>
                    <option value="faculty">Faculty</option>
                    <option value="parent">Parent</option>
                    <option value="accreditor">Accreditor</option>
                </select>
            </div>
            <div class="bottom">
                <h1 class="heading">Looking for</h1>
                <select name="output" id="output"></select>
            </div>
        </div>