<!-- <p>This is the 404 page</p>
<p>the URL you just entered is incorrect, kindly try again.</p> -->
<div class="flex-container">
    <div class="text-center">
        <h1>
            404
        </h1>
        <h3>PAGE NOT FOUND</h3>
        <button type="button" name="button" routerLink="/">Return To Home</button>
    </div>
</div>

./page404.component.css

* {
    font-family: Google sans, Arial;
}

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
    /* color: white; */
}

.flex-container .text-center {
    text-align: center;
}

.flex-container .text-center h1,
.flex-container .text-center h3 {
    margin: 10px;
    cursor: default;
    user-select: none;
}

.flex-container .text-center h1 {
    font-size: 8em;
    border-bottom: 5px dashed #f8b574;
}

.flex-container .text-center button {
    border: 3px solid #f8b574;
    background: transparent;
    outline: none;
    padding: 10px 20px;
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    margin: 20px 0;
}

.flex-container .text-center button:hover {
    background-color: white;
    color: #555;
    cursor: pointer;
}