wrong password <p> element always shown - php

Question

Hello guys I am working on a freelance project and I faced with a problem I added some php codes in order to change paragraph elements visibility. the paragraph element which has to appear when user entered wrong username or password however paragraph element appears all the time
PHP SECTION
<?php
session_start();
require "db.php";
if ( !empty($_POST)) {
extract($_POST) ;
if ( checkUser($id, $pass) ) {
echo '<style>#wrong-password {display:none;margin-bottom: 5%;padding: 5%;width: 280px;font-family: "Montserrat", sans-serif;font-size: 1em;border-radius: 8px;border: 1px solid #ced4da;background-color: rgb(255, 23, 23);color: white;text-align: center;margin-top: 0;}</style>';
// you are authenticated
// session_start() creates a random id called session id.
// and stores in a cookie.
$_SESSION["user"] = getUser($id) ;
if($_SESSION["user"]["userType"]=='normal'){
header("Location: Analyzes.php?id=$id") ;
exit ;
}else {
header("Location: index.php") ;
exit ;
}
}
echo '<style> #wrong-password{visibility:visible; margin-bottom: 5%;padding: 5%;width: 280px;font-family: "Montserrat", sans-serif;font-size: 1em;border-radius: 8px;border: 1px solid #ced4da;background-color: rgb(255, 23, 23);color: white;text-align: center;margin-top: 0;}</style>';
}
HTML SECTION
<div id="form-container">
<h2>Hoşgeldiniz! 😺</h2>
<form action="?" method="POST">
<input type="number" name="id" placeholder="Kullanıcı Numarası">
<br>
<input type="password" name ="pass" placeholder="Parola">
<p id="wrong-password">Kullanıcı Adı veya Parola Hatalı :(</p>
<button type="submit" title="Giriş Yap">Giriş Yap</button>
</form>
</div>
Thanks in advance:)