body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: sans-serif;
    background: url("images/floor-1256804.jpg");
    /** change any backcground here and beneath(h1) together **/
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
}

h1 {
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 10em;
    text-transform: uppercase;
    text-align: center;
    background: url("images/floor-1256804.jpg");
    /** change any backcground here and above(body) together **/
    background-attachment: fixed;
    background-clip: text;
    -webkit-background-clip: text;
    background-repeat: no-repeat;
    background-size: cover;
    color: transparent;
    margin: 10px;
}

@media (max-width: 1100px) {
    h1 {
        font-size: 7em;
    }
}

@media (max-width: 860px) {
    h1 {
        font-size: 6em;
    }
}

@media (max-width: 640px) {
    h1 {
        writing-mode: vertical-rl;
        font-size: 5em;
    }
}

h1::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    text-shadow: -5px 5px 20px #000, -10px 10px 30px #000,
        -20px 15px 40px #000, -25px 20px 40px #000;
    z-index: -1;
}