First attempt at CSS 3D Jewel Case

<div class="codedoodle-block">

        <div class="case-container">

            <div class="case-booklet">
                <div class="ps-logo"><span class="red-p">P</span><span class="rainbox-s">S</span><span class="liltext">PlayStation</span></div>
            </div>
            <div class="case-back-cover">
                
                <div>

                </div>
                <div class="etc">
                    <p>© 2020 JeremyCaudle, Inc.</p>
                </div>

            </div>
            <div class="window-graphic">

            </div>
            <div class="left-edge-text">
                <span class="side-ps-logo">PlayStation</span>
                <span class="game-name-hor">Game Name</span>
                <span class="game-ID">SLPS 00000</span>
            </div>
            <div class="right-edge-text">
                <span class="side-ps-logo">PlayStation</span>
                <span class="game-name-vrt">Game Name</span>
                <span class="game-ID">SLPS 00000</span>
            </div>

        </div>

    </div>

@keyframes rotate-case {
            from {transform: rotateY(0deg); box-shadow: 0;}
            to {transform: rotateY(-180deg); box-shadow: 0 10px 100px rgba(0, 0, 0, 0.2);}
        }

        @keyframes flip {
            0% {transform: rotateY(0deg);}
            49% {transform: rotateY(0deg);}
            50% {transform: rotateY(-180deg);}
            100% {transform: rotateY(-180deg);}
        }

        @keyframes rotate-left-edge {
            from {transform: rotate3d(1,0,0 340deg);}
            to {transform: rotate3d(1,0,0 -340deg);}
        }

        /* Code Block styles */

        div.codedoodle-block {
            margin: 3rem auto;
            width: auto;
            max-width:500px;
            background-color: transparent;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            perspective: 700px;
        }

        .card {
            border: solid 1px #dedede;
            padding: 1em;
            margin: 1rem auto;
            font-size: 1.25rem;
            box-shadow: 0 .5rem .5rem rgba(0,0,0,.2);
            max-width: 88%;
        }

        .case-container {
            transform-style: preserve-3d;
            position: relative;
            width: 426px;
            height: 375px;
            max-width: 426px;
            max-height: 375px;
            background-color: rgba(125, 125, 125, .1);
            display: block;
            animation: rotate-case 10s ease-in-out infinite alternate;
            z-index: 0;
        }

        .case-booklet {
            width: 360px;
            height: 360px;
            max-width: 360px;
            max-height: 360px;
            background-color: white;
            position: absolute;
            top: 7.5px;
            right: 5px;
            z-index: 1;
            backface-visibility: hidden;
        }

        .ps-logo {
            min-width: 2em;
            min-height: 50px;
            max-width: 50px;
            max-height: 50px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            color: white;
            background-color: black;
            font-size: 10px;
            text-align: center;
            padding: .5em;
            position: absolute;
            top: 1em;
            right: 1em;
            margin: 0;
            z-index: 2;
            animation: flip 10s ease-in-out infinite alternate;       
        }
        
        .ps-logo span {
            display: block;
            margin: 0;
            padding: 0; 
            backface-visibility: hidden;  
            
        }

        .ps-logo span.red-p {
            position: absolute;
            color: red;
            align-self: center;
            font-size: 3.5em;
            font-weight: bold;
            transform: scaleY(1.25) translateY(-.25em);
            backface-visibility: hidden;
        }

        .ps-logo span.rainbox-s {
            position: absolute;
            color: green;
            align-self: center;
            font-size: 3em;
            transform: scaleX(2) rotate(-90deg) translateY(-.0675em);
            backface-visibility: hidden;
        }

        .ps-logo span.liltext {
            backface-visibility: hidden;
        }

        .left-edge-text {
            position: absolute;
            top: 171.5px;
            left: -204px;
            display: flex;
            flex-direction: row;
            justify-items: center;
            align-items: center;
            height: 30px;
            width: 375px;
            max-width: 375px;
            max-height: 30px;
            transform: rotate(90deg);
            background-color: white;
        }

        .right-edge-text {
            position: absolute;
            top: 171.5px;
            right: -205px;
            display: flex;
            flex-direction: row;
            justify-items: center;
            align-items: center;
            height: 30px;
            width: 375px;
            max-width: 375px;
            max-height: 30px;
            transform: rotate(90deg);
            background-color: white;
        }

        .side-ps-logo {
            background-color: black;
            text-align: center;
            color: white;
            font-size: 16px;
            margin: 0;
            padding: 7px;
        }

        .game-name-hor {
            writing-mode: horizontal-tb;
            width: auto;
            height: auto;
            justify-self: center;
            align-self: center;
            flex-grow: 1;
            padding: 0 .5em;
            font-weight: bold;
        }

        .game-name-vrt {
            writing-mode: horizontal-tb;
            text-orientation: upright;
            justify-self: center;
            align-self: center;
            height: auto;
            padding: 0 .5em;
            flex-grow: 1;
            font-weight: bold;
        }

        .game-ID {
            background-color: white;
            color: black;
            padding-right: 1em;
            display: flex;
            justify-self: flex-end;
            align-self: center;
        }

        .case-back-cover {
            width: 426px;
            height: 375px;
            position: absolute;
            top: 0;
            left: 0;
            transform: rotateY(-180deg);
            background-color: #333333;
            z-index: -2;
            display: grid;
            grid-template-columns: 4fr 1fr;
            grid-template-columns: 2fr 1fr;
        }

        .window-graphic {
            position: absolute;
            top: 0;
            left: 0;
            background-color: #333333;
            background-clip: calc(content-box + -60px);
            width: 426px;
            height: 375px;
            z-index: -1;
            backface-visibility: hidden;
        }

        .etc {
            color: white;
        }