How can I responsively diagonally overlay text across the page?

Question

I'd like to have a custom error/loading page on my site which display the the error code or some dynamic text like error and loading diagonally in big bold letters across the page. Ideally, it'd work using only css but I don't mind place the letters with javascript if not possible. Also, I'd like the letters to overlap on smaller screen and I don't know how to get that working.

I thought about using absolute positioning but I'm not sure how to center the text since letter width changes. Maybe it's only possible with a different font? Here's a fiddle of what I mean

.digit {
  position: absolute;
}

.digit:first-child {
  top: 0;
  left: 0;
}

.digit:nth-child(2) {
  top: 50%;
  left: calc(50% - 1em);
}

.digit:last-child {
  bottom: 0;
  right: 0;
}

Otherwise, I'm thinking about centering the text and using letter spacing based on viewwidth and text length, but is there a way to offset single letters up and down?

Has someone come across something like this before? Or is there a better solution I haven't thought of?

Exemple of what I mean with diagonal letter placement.

Mobile exemple (I did with paint so the white background of the letters on top hide the ones on the bottom, but that's not a behavior I expect, the letters' background should be transparent):

.digit {
  font-size: 100px;
  position: absolute;
}

.digit:first-child {
  top: 0;
  left: 0;
}

.digit:nth-child(2) {
  top: 50%;
  left: calc(50% - 1em);
}

.digit:last-child {
  bottom: 0;
  right: 0;
}

<div class="error">
  <div class="code">
    <span class="digit">4</span>
    <span class="digit">0</span>
    <span class="digit">4</span>
  </div>
</div>

Answer 1

You can center element using this:

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

.code {
  height: 300px;
  width: 300px;
  position: relative;
}

.digit {
  font-size: 100px;
  position: absolute;
}

.digit:nth-child(1){
  top: 0;
  left: 0;
}

.digit:nth-child(2) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.digit:nth-child(3) {
  bottom: 0;
  right: 0;
}

<div class="error">
  <div class="code">
    <span class="digit">4</span>
    <span class="digit">0</span>
    <span class="digit">4</span>
  </div>
</div>

Mobile version works fine for me

.code {
  height: 100px;
  width: 100px;
  position: relative;
}

.digit {
  font-size: 100px;
  position: absolute;
}

.digit:nth-child(1){
  top: 0;
  left: 0;
}

.digit:nth-child(2) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.digit:nth-child(3) {
  bottom: 0;
  right: 0;
}

<div class="error">
  <div class="code">
    <span class="digit">4</span>
    <span class="digit">0</span>
    <span class="digit">4</span>
  </div>
</div>

I guess your numbers had background because of the font you used