body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* light mode background color */
    color: #333; /* light mode text color */
}

@media (prefers-color-scheme: dark) {
    body, html {
        background-color: #333; /* dark mode background color */
        color: #f0f0f0; /* dark mode text color */
    }
}

.full-screen-z {
    font-family: 'Handlee', cursive;
    font-size: calc(30vw + 30vh); /* This will adjust the size based on viewport */
    color: #333; /* a dark grey color */
    text-align: center;
    transition: transform 2.0s ease-in-out;
    transform-origin: bottom; /* This will scale from the bottom, leaving it in the same place */
    color: inherit; /* This will make the 'Z' inherit the color from body, so it changes with the theme */
}

.full-screen-z.compress {
    transform: scaleY(0.25);
}