CSS Code Problem

[RostigerSpieler]

As there isn’t a plugin for this feature, I’ve created some CSS code that displays a specific type of text at the top of the Jellyfin header.
So far, it’s working really well. However, I’ve run into the problem that this text is also visible when watching films in full-screen mode. Is there a way to hide the text as soon as the film is in full-screen mode?
To help you understand what I mean, see the screenshots.


I’ve already had a bit of a go at it. However, I’m not that familiar with CSS. 

Here is my CSS code:

Code:

body::before {
    content: "🎬 2640    📺 150  \2003  🕒Letztes Update: 10.03.26 ";
    position: fixed;
    top: 20px;
    right: 300px;
    z-index: 9999;
    font-family: 'Segoe UI', Roboto, sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    color: yellow;
    background: transparent;
    white-space: nowrap;
}

/* Hide if an element with the ‘full-screen’ class exists */
body:has(div.videoPlayerContainer.fullscreen)::before {
    display: none;
}