Making Password Page black and changing to customized font

Pagelink: https://reason-for-being.store/password

I am currently trying to use the Password page as my Coming soon page.

I am using the rich text body to write my coming soon. I want to:

  1. have the whole page (apart from the header) as black background
  2. text to be at the dead center of the page
  3. use custom font that I added to the shopify admin assets.

Can someone please assist? all solutions seem to be outdated already.

Best

For anyone who needs a solution:

/* Black Background and central alignment*/

body, html {
margin: 0;
padding: 0;
height: 100%;
}

header {
background-color: white;
text-align: center;
padding: 1rem 0;
}

.rich-text.content-container.color-scheme-4.gradient.rich-text–full-width.content-container–full-width {
background-color: black; /* Ensures the background is black /
color: white;
height: calc(100vh - 60px); /
Adjust the 60px to match the header height */
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

.rich-text__blocks {
width: 100%;
}

.rich-text__blocks > * {
margin: 0;
}

/Font change/

@font-face {
font-family: ‘Casagrande’;
src: url(URL LINK) format(‘woff’);
}

h2 {
font-family: ‘Casagrande’, sans-serif !important;
font-size: 18px !important;
}