Problème positionnement css

Bonjour, je possède des bases avancées d'html et css mais j'ai un énorme problème sur le fonctionnement des positionnements en fonction des résolutions et voici donc mon problème du moment.

Depuis quelques temps j'essaye de faire un site html personnel pour m'améliorer mais je bloque depuis quelque temps sur un problème j'ai une barre de recherche que je n'arrive pas à mettre ou je souhaite en fonction d'une résolution ou une autre. Je vous invite à cliquer sur ce lien google drive pour comprendre mon problème.

J'aimerais donc de l'aide afin de régler ce problème ainsi que des conseils éventuelles pour m'améliorer.

https://drive.google.com/file/d/1-n8iCh39wGVFHH1NfNhV5A0BExXSs3lP/view?usp=drive_link

HTML

<form id="search" onsubmit="return search()">
        <input type="text" id="searchInput" placeholder="Rechercher (sans majuscule)">
        <button type="submit">Rechercher</button>
</form>

CSS

body {
    background-color: rgb(24, 24, 24);
    height: 200rem;
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
}

.banner {
    width: 100%;
    margin-top: -0.75%;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
}

#search {
    position: absolute;
    top: 34%; left: 65%;
    height: 7.25rem; width: 24rem;
}

input[type="text"] {
    padding: 10px;
    background-color: black;
    color: white;
    font-size: 20px;
    border: none;
    border-radius: 15px; border-bottom-left-radius: 0;
    width: 24rem; height: 5rem;
}
  
button {
    padding: 10px 15px;
    background-color: rgb(10, 10, 10);
    color: #fff;
    border: none;
    border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;
    cursor: pointer;
}
  
button:hover {
    background-color: #4b0000;
}

Si vous avez besoin de plus d'info n'hésitez pas.

Merci par avance.