Custom dialog opens on page load, instead of click

"use strict";

const openBtn = document.querySelector(".open_btn");
const dialog = document.querySelector(".nav_open-account-dialog");
const closeBtn = dialog.querySelector(".close_btn");

openBtn.addEventListener("click", () => {
  dialog.showModal();
});

closeBtn.addEventListener("click", () => {
  dialog.close();
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font-family: "Roboto", sans-serif;
  background-color: #17152a;
  position: relative;
}

.circle-container {
  position: relative;
  margin-bottom: 22rem;
}

@keyframes moveCircle {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  100% {
    transform: translateX(-50%) translateY(2vw);
  }
}

.circle {
  width: 35vw;
  height: 35vw;
  background-color: #f8f9fa;
  border-radius: 50%;
  position: absolute;
  top: 4vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  animation: moveCircle 3s infinite ease-in-out alternate;
}

.circle.two {
  width: 3vw;
  height: 3vw;
  background-color: #f8f9fa;
  border-radius: 50%;
  position: absolute;
  top: 10vw;
  left: 30%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.circle.three {
  width: 3vw;
  height: 3vw;
  background-color: #f8f9fa;
  border-radius: 50%;
  position: absolute;
  top: 18vw;
  left: 25%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.circle.four {
  width: 3vw;
  height: 3vw;
  background-color: #f8f9fa;
  border-radius: 50%;
  position: absolute;
  top: 28vw;
  left: 74%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.circle.five {
  width: 3vw;
  height: 3vw;
  background-color: #f8f9fa;
  border-radius: 50%;
  position: absolute;
  top: 35vw;
  left: 70%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3.2rem;
  flex-wrap: wrap;
  margin-left: 9.6rem;
  margin-right: 9.6rem;
}

.nav_logo .first-letter {
  font-size: 4.4rem;
  font-weight: 800;
  color: #0595ec;
}

.nav_logo .rest-letter {
  font-size: 4.4rem;
  color: #f8f9fa;
}

.nav_btns a {
  margin-right: 4.8rem;
  text-decoration: none;
  color: #f8f9fa;
  font-size: 1.6rem;
}

.nav_btns a:hover {
  border-bottom: 0.2rem solid #0595ec;
  color: #0595ec;
}

.nav_open-account button {
  font-size: 1.6rem;
  width: 12.8rem;
  color: #f8f9fa;
  background-color: #ff7f50;
  padding: 1.6rem;
  border-radius: 0.8rem;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  font-weight: 600;
}

.nav_open-account button:hover {
  letter-spacing: 0.1rem;
  box-shadow: 0 0 2.4rem;
  /* transform: scale(1.05); */
  background-color: #0595ec;
}

.nav_btns a {
  margin-right: 4.8rem;
  text-decoration: none;
  color: #f8f9fa;
  font-size: 1.6rem;
  font-weight: 600;
  text-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.5);
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12.8rem;
  margin-left: 9.6rem;
  margin-right: 9.6rem;
  gap: 8rem;
}

.header_description {
  flex: 1;
}

.header_form {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 0.3rem solid #f8f9fa;
  padding: 8rem;
  border-radius: 1.2rem;
  gap: 2.4rem;
}

.header_one {
  color: #0595ec;
  font-size: 5.2rem;
  font-weight: 500;
}

.header_two {
  color: #f8f9fa;
  font-size: 5.2rem;
  font-weight: 500;
  padding-left: 4.8rem;
}

.header_three {
  color: #0595ec;
  font-size: 5.2rem;
  font-weight: 500;
  margin-bottom: 2.4rem;
  padding-left: 9.6rem;
}

.header_description p {
  font-size: 2.2rem;
  color: #f8f9fa;
  font-weight: 400;
}

.login_header {
  text-align: center;
  font-size: 1.6rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0595ec;
  width: 9.6rem;
  height: 4.8rem;
  border-radius: 0 0 1.2rem 1.2rem;
}

.login_header span {
  color: #f8f9fa;
}

.input_box {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 3.2rem;
}

.login_label {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f8f9fa;
  font-size: 1.4rem;
  position: absolute;
  background-color: #0595ec;
  border: 0.2rem solid white;
  border-radius: 0.3rem 0.3rem 0 0;
  height: 2.4rem;
  width: 9.8rem;
  top: -57%;
  left: 10%;
  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.5);
}

.input_field {
  background: rgba(255, 255, 255, 0.1);
  width: 100%;
  height: 4rem;
  font-size: 1.8rem;
  color: #0595ec;
  padding-inline: 1.2rem 2.4rem;
  border: 0.2rem solid #f8f9fa;
  border-radius: 0.8rem;
  outline: none;
}

.input_field:focus {
  border-color: #0595ec;
  background: rgba(255, 255, 255, 0.2);
}

.input_field:focus,
.input_btn button:focus {
  box-shadow: 0 0 0.6rem #0595ec;
  border-color: #0595ec;
}

.input_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4.8rem;
}

.input_btn button {
  padding: 1.4rem 2.6rem;
  background-color: #0595ec;
  border-radius: 1.2rem;
  border: 0.2rem solid #f8f9fa;
  color: #f8f9fa;
  font-size: 1.6rem;
  cursor: pointer;
}

.input_btn button:hover {
  background-color: #007bb5;
  transform: translateY(-0.2rem);
}


/* Modal window */

.nav_open-account-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 600px;
  height: auto;
  max-height: 90vh;
  padding: 2rem;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 0.8rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 10;
}

.nav_open-account-dialog h2 {
  font-size: 2.4rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1.5rem;
  text-align: center;
}

.nav_open-account-dialog p {
  font-size: 1.2rem;
  padding-bottom: 2.4rem 0;
}

.nav_open-account-dialog form {
  width: 100%;
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 1.5rem;
}

.nav_open-account-dialog label {
  display: block;
  font-size: 1.4rem;
  color: #333;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.nav_open-account-dialog input[type="text"],
.nav_open-account-dialog input[type="tel"],
.nav_open-account-dialog input[type="email"] {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1.4rem;
  color: #333;
  background-color: #f9f9f9;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  outline: none;
}

.nav_open-account-dialog input[type="text"]:focus,
.nav_open-account-dialog input[type="tel"]:focus,
.nav_open-account-dialog input[type="email"]:focus {
  border-color: #007bff;
  background-color: #fff;
  box-shadow: 0 0 4px rgba(0, 123, 255, 0.5);
}

.modal_btn {
  display: block;
  width: 100%;
  padding: 1rem;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1.6rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-bottom: 1.2rem;
}

.modal_btn:hover {
  background-color: #0056b3;
  transform: translateY(-0.2rem);
}

.close_btn {
  display: block;
  width: 100%;
  padding: 1rem;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1.6rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.close_btn:hover {
  background-color: #0056b3;
  transform: translateY(-0.2rem);
}

<div class="circle-container">
  <div class="circle"></div>
  <div class="circle two"></div>
  <div class="circle three"></div>
  <div class="circle four"></div>
  <div class="circle five"></div>
  <header>
    <nav class="navbar">
      <div class="nav_logo">
        <span class="nav_logo first-letter">B</span
            ><span class="nav_logo rest-letter">ank!fy</span
            ><span class="nav_logo first-letter">.</span>
      </div>
      <div class="nav_btns">
        <a href="#about_us">About Us</a>
        <a href="#our_app">Our App</a>
        <a href="#our_team">Team</a>
        <a href="#contact_us">Contact Us</a>
      </div>
      <div class="nav_open-account">
        <button class="open_btn">Join Us</button>
      </div>
    </nav>
  </header>

  <main>
    <div class="header_description">
      <h1 class="header_one">Secure.</h1>
      <h2 class="header_two">Simple.</h2>
      <h3 class="header_three">Smart.</h3>
    </div>

    <div class="header_form">
      <div class="login_header">
        <span>Login</span>
      </div>
      <div class="input_box">
        <input type="text" id="user" class="input_field" required />
        <label for="user" class="login_label">Username</label>
      </div>
      <div class="input_box">
        <input type="password" id="pass" class="input_field" required />
        <label for="pass" class="login_label">Password</label>
      </div>
      <div class="input_btn">
        <button type="submit">Submit</button>
      </div>
    </div>
  </main>

  <dialog class="nav_open-account-dialog">
    <h2>Join Us</h2>
    <p>Welcome! Please sign up to become a member.</p>

    <form action="#" method="post">
      <div class="form-group">
        <label for="first-name">First Name:</label>
        <input type="text" id="first-name" name="first-name" required />
      </div>

      <div class="form-group">
        <label for="last-name">Last Name:</label>
        <input type="text" id="last-name" name="last-name" required />
      </div>

      <div class="form-group">
        <label for="address">Address:</label>
        <input type="text" id="address" name="address" required />
      </div>

      <div class="form-group">
        <label for="phone">Phone Number:</label>
        <input type="tel" id="phone" name="phone" required />
      </div>

      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required />
      </div>

      <button class="modal_btn" type="submit">Submit</button>

      <button class="close_btn" type="close">Close</button>
    </form>
  </dialog>
</div>