@import url('https://fonts.googleapis.com/css2?family=Mozilla+Headline:wght@200..700&family=Space+Grotesk:wght@300..700&display=swap');

:root {
    --rotateX: 0deg;
    --rotateY: 0deg;
}

body {
    background: hsla(48, 38%, 5%, 0.3) conic-gradient(
            from 0deg,
            #cc9f5f,
            #c58136,
            #a86d29,
            #c58136,
            #cc9f5f
    );
    backdrop-filter: blur(20px);
    background-blend-mode: multiply;
    min-block-size: 100dvh;
    display: flex;
    margin: 0;

    user-select: none;
}

#logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    fill: #cc9f5f;
    filter: drop-shadow(0 0 20px #9f7942) blur(5px);

    transform:
        translate(-50%, -50%)
        perspective(5000px)
        rotateX(var(--rotateX))
        rotateY(var(--rotateY));
}

#text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 100%;

    font-family: "Space Grotesk", sans-serif;
    font-size: 3em;
    font-weight: 600;
    text-align: center;

    color: #ffdeb6;
    text-shadow: black 0 0 20px;
}