:root {
    --pink: hsl(338, 70%, 55%);
    --teal: hsl(183, 70%, 62%);
    --white: hsl(334, 7%, 95%);
    --rotateX: 0deg;
    --rotateY: 0deg;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    color: white;
}

body {
    background: hsl(224, 32%, 12%) conic-gradient(
            from 0deg at 50% 50%,
            blue,
            purple,
            purple,
            blue
    );
    background-blend-mode: multiply;
    min-block-size: 100dvh;
    display: grid;
    place-items: center;
}

pre {
    --selector: var(--pink);
    --property: var(--teal);
    --punctuation: var(--white);
    --undefined: var(--white);

    font-size: 1.5rem;
    font-weight: bold;
    background-color: hsl(222, 45%, 7%);
    padding: 2rem;
    border-radius: 1rem;

    position: relative;

    transform-style: preserve-3d;
    transform: perspective(5000px) rotateY(var(--rotateX)) rotateX(var(--rotateY));
}

.selector {
    color: var(--selector);
}

.property {
    color: var(--property);
}

.punctuation {
    color: var(--punctuation);
}

.property + .punctuation {
    color: var(--property);
}

pre > * {
    text-shadow: 0 0 0.2em currentColor;
}

pre::before,
pre::after {
    content: "";
    position: absolute;
    border-radius: inherit;
}

pre::before {
    inset: 0.75rem;
    background: black;
    transform: translateZ(-45px);
    filter: blur(15px);
    opacity: 0.5;
}

/* gradient thingy */
pre::after {
    inset: -1rem;
    background: linear-gradient(-45deg, red, blue);
    transform: translateZ(-50px);
}

/*.pre-container {*/
/*    position: relative;*/
/*    display: grid;*/
/*    grid-template: repeat(3, 1fr) / repeat(3, 1fr);*/
/*}*/

/*pre {*/
/*    grid-row: 1 / -1;*/
/*    grid-column: 1 / -1;*/
/*    transition: transform 250ms ease;*/
/*}*/

/*.pre-container > div {*/
/*    z-index: 10;*/
/*    position: absolute;*/
/*    !*outline: 1px solid lime;*!*/
/*}*/


/*.pre-container > div:nth-child(1) {*/
/*    grid-column: 1 / 2;*/
/*    grid-row: 1 / 2;*/
/*    inset: 0;*/
/*}*/

/*.pre-container > div:nth-child(2) {*/
/*    grid-column: 2 / 3;*/
/*    grid-row: 1 / 2;*/
/*    inset: 0;*/
/*}*/

/*.pre-container > div:nth-child(3) {*/
/*    grid-column: 3 / 4;*/
/*    grid-row: 1 / 2;*/
/*    inset: 0;*/
/*}*/

/*.pre-container > div:nth-child(4) {*/
/*    grid-column: 1 / 2;*/
/*    grid-row: 2 / 3;*/
/*    inset: 0;*/
/*}*/

/*.pre-container > div:nth-child(5) {*/
/*    grid-column: 2 / 3;*/
/*    grid-row: 2 / 3;*/
/*    inset: 0;*/
/*}*/

/*.pre-container > div:nth-child(6) {*/
/*    grid-column: 3 / 4;*/
/*    grid-row: 2 / 3;*/
/*    inset: 0;*/
/*}*/

/*.pre-container > div:nth-child(7) {*/
/*    grid-column: 1 / 2;*/
/*    grid-row: 3 / 4;*/
/*    inset: 0;*/
/*}*/

/*.pre-container > div:nth-child(8) {*/
/*    grid-column: 2 / 3;*/
/*    grid-row: 3 / 4;*/
/*    inset: 0;*/
/*}*/

/*.pre-container > div:nth-child(9) {*/
/*    grid-column: 3 / 4;*/
/*    grid-row: 3 / 4;*/
/*    inset: 0;*/
/*}*/

/*.pre-container > div:nth-child(1):hover ~ pre {*/
/*    --rotateX: -25deg;*/
/*    --rotateY: 25deg;*/
/*}*/

/*.pre-container > div:nth-child(2):hover ~ pre {*/
/*    --rotateX: 0deg;*/
/*    --rotateY: 25deg;*/
/*}*/

/*.pre-container > div:nth-child(3):hover ~ pre {*/
/*    --rotateX: 25deg;*/
/*    --rotateY: 25deg;*/
/*}*/

/*.pre-container > div:nth-child(4):hover ~ pre {*/
/*    --rotateX: -25deg;*/
/*    --rotateY: 0deg;*/
/*}*/

/*.pre-container > div:nth-child(5):hover ~ pre {*/
/*    --rotateX: 0deg;*/
/*    --rotateY: 0deg;*/
/*}*/

/*.pre-container > div:nth-child(6):hover ~ pre {*/
/*    --rotateX: 25deg;*/
/*    --rotateY: 0deg;*/
/*}*/

/*.pre-container > div:nth-child(7):hover ~ pre {*/
/*    --rotateX: -25deg;*/
/*    --rotateY: -25deg;*/
/*}*/

/*.pre-container > div:nth-child(8):hover ~ pre {*/
/*    --rotateX: 0deg;*/
/*    --rotateY: -25deg;*/
/*}*/

/*.pre-container > div:nth-child(9):hover ~ pre {*/
/*    --rotateX: 25deg;*/
/*    --rotateY: -25deg;*/
/*}*/