body {
    align-items: center;
    justify-content: center;
    gap: 1.2rem;

    padding: 1rem;

    box-sizing: border-box;
}

h1, p {
    text-align: center;
}

.logo {
    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    filter: blur(0.6rem) opacity(0.8) hue-rotate(var(--hue-rotate));

    overflow: hidden;

    z-index: -1;
}

.logo > img {
    --size: 34.6rem;

    position: absolute;

    width: var(--size);
    height: var(--size);
}

.logo > .logo-p {
    margin-left: calc(var(--size) / 10);

    width: calc(var(--size) * 0.7);
    height: calc(var(--size) * 0.7);
}

html.dark .logo > .logo-p.light {
    display: none;
}

html:not(.dark) .logo > .logo-p.dark {
    display: none;
}