canvas {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         z-index: 0;
         }
         body {
         display: flex;
         justify-content: center;
         align-items: center;
         min-height: 100vh;
         background: #353C40 !important;
         margin: 0;
         padding: 0;
         overflow: hidden;
         }
         .cube-container {
         display: flex;
         align-items: center;
         perspective: 500px;
         }
         .matrix-background {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         z-index: 0;
         }
         #cube {
         margin: auto;
         position: relative;
         transform-style: preserve-3d;
         transform: translate3d(-50%, -50%, 0);
         animation: rotate 5s infinite linear;
         }
         .face {
         position: absolute;
         border: 2px solid #353C40;
         overflow: hidden;
         transition: background-color 1s ease; 
         }
         @keyframes rotate {
         0% { transform: rotateX(0) rotateY(0); }
         100% { transform: rotateX(360deg) rotateY(360deg); }
         }
         #cube .front { transform: translateZ(70px); }
         #cube .back { transform: rotateY(180deg) translateZ(70px); }
         #cube .right { transform: rotateY(90deg) translateZ(70px); }
         #cube .left { transform: rotateY(-90deg) translateZ(70px); }
         #cube .top { transform: rotateX(90deg) translateZ(70px); }
         #cube .bottom { transform: rotateX(-90deg) translateZ(70px); }
         #cube.move-out .front { animation: moveOutFront 3s forwards; }
         #cube.move-out .back { animation: moveOutBack 3s forwards; }
         #cube.move-out .right { animation: moveOutRight 3s forwards; }
         #cube.move-out .left { animation: moveOutLeft 3s forwards; }
         #cube.move-out .top { animation: moveOutTop 3s forwards; }
         #cube.move-out .bottom { animation: moveOutBottom 3s forwards; }
         #cube.move-in .front { animation: moveInFront 3s forwards; }
         #cube.move-in .back { animation: moveInBack 3s forwards; }
         #cube.move-in .right { animation: moveInRight 3s forwards; }
         #cube.move-in .left { animation: moveInLeft 3s forwards; }
         #cube.move-in .top { animation: moveInTop 3s forwards; }
         #cube.move-in .bottom { animation: moveInBottom 3s forwards; }
         .text-container {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 200px;
         height: 200px;
         font-size: 12px;
         font-family: monospace;
         white-space: normal;
         line-height: 1.2;
         letter-spacing: 10px;
         overflow: hidden;
         text-align: justify;
         text-justify: inter-character;
         animation: blinkingEffect 5s linear infinite;
         user-select: none;
         font-weight: bold;
         }
         @keyframes blinkingEffect {
         0%, 100% { color: #353C40; }
         50% { color: var(--matrix-letter-color); } 
         }
         .glowing-oval {
         position: fixed;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%) scale(0); 
         width: 100vw;  
         height: 100vh; 
         opacity: 1;
         z-index: 2;
         transition: transform 0.3s, opacity 0.3s;
         display: flex;
         justify-content: center;
         align-items: center;
         padding: 10px;
         overflow: hidden; 
         }
         .inscription {
         font-size: 2.5vw;
         font-family: monospace;
         line-height: 1.2; 
         white-space: pre-wrap;
         text-align: center;
         z-index: 4;
         opacity: 1;
         user-select: none;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         font-weight: bold;
         }
         @media (min-width: 1000px) {
         .inscription {
         font-size: 20px; 
         }
         }
         @keyframes expandOval {
         0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
         100% { transform: translate(-50%, -50%) scale(1); }
         }
         @keyframes contractOval {
         0% { transform: translate(-50%, -50%) scale(1); }
         100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
         }