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

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

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

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

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

    position: relative;

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

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

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

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

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

pre > * {
    text-shadow: 0 0 0.3em currentColor; //currentColor white
}

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

pre::before {
    inset: 0.75rem;
    background: black;
    transform: translateZ(-49px);
    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: 5px 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: 1 / 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;
}