div {
   box-sizing: border-box;
   
 }
 
 .t {

   text-align: center;
   font-size: 3rem;
   font-weight:600 bold;
   background: linear-gradient(
         90deg,
         rgba(255, 0, 0, 1) 0%,
         rgba(255, 154, 0, 1) 10%,
         rgba(208, 222, 33, 1) 20%,
         rgba(79, 220, 74, 1) 30%,
         rgba(63, 218, 216, 1) 40%,
         rgba(47, 201, 226, 1) 50%,
         rgba(28, 127, 238, 1) 60%,
         rgba(95, 21, 242, 1) 70%,
         rgba(186, 12, 248, 1) 80%,
         rgba(251, 7, 217, 1) 90%,
         rgba(255, 0, 0, 1) 100%
     );
   color: #0000;
   text-shadow: 
     0px 2px 0 #fff9,
     0 0 .4em #fff9;
   -webkit-background-clip: text;
   background-clip: text;
 }
 
 .scene {
   position: relative;
   width: 100vmin;
   height: 30vmin;
 }
 .light {
   width: 200vh;
   height: 0;
   border-bottom: 1.8px solid;
   position: absolute;
   rotate: -20deg;
   right: 45%;
   top: 86%;
   filter: 
     drop-shadow(0 0 3px #fff)
     drop-shadow(0 0 6px #3cf)
     drop-shadow(0 0 9px #fff);
 }
 .glass {
   position: relative;
   width: 80vmin;
   height: 10vmin;
   border-bottom: 1px solid;
   z-index: 5;
   &:before,
   &:after {
     content: '';
     box-sizing: border-box;
     position: absolute;
     width: 100%;
     height: 0;
     top: 100%;
     border-top: 1px solid;
     rotate: -60deg;
     transform-origin: top left;
   }
   &:after {
     rotate: 60deg;
     transform-origin: top right;
   }
   filter: 
     drop-shadow(0 0 3px #fff)
     drop-shadow(0 0 10px #3cf)
     drop-shadow(0 0 15px #fff);
   background-image:
     conic-gradient(
       at 50% 15%,
       #0000 150deg,
       #ffffff05 60deg 210deg,
       #0000 0deg
     );
 }

 
 body {
   font-family: system-ui, sans-serif;
   display: grid;
   place-content: center;
   place-items: center;
   min-height: 100vh;
   margin: 0;
   color: #F9F6EF;
   background-image:
     radial-gradient(
       circle at center,
       #2E4755,
       #1f2020
     );
   overflow-x: hidden;
 }
 
 .t {
   position: relative;
   transition: .3s ease;
   transform-style: preserve-3d;
   perspective: 0px;
   transition:transform 1s;
   
  
 }
 .t:hover{

   transform:rotate(360deg);
  
 }