@import url('https://fonts.googleapis.com/css2?family=Allison&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
#grrxgrprincp{position: relative;height: 170px;width: 480px;margin-top: 30px !important;border: 1px inset transparent;border-image: radial-gradient(#00000000 80%, #2d616d);border-image-slice:1;cursor:crosshair}
.grrxpatroc{width: 470px;height:160px;display: flex;position: relative;background: url(https://i.imgur.com/h9p6DCy.gif);background-size: cover; overflow: hidden;top:5px;left:0}
.grrxleft,.grrxright,.grrxtext{display: flex;justify-content: center;align-items: center;transition: background-color 0.3s ease, opacity 0.5s ease, transform 0.5s ease}
.grrxleft{color: #fff; width:240px;height: 150px;top:5px;position: absolute;transform: scale(0.9);transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease}
.grrxleft:before{content:'';background-color: rgb(6 6 6 / 80%); backdrop-filter: blur(2px);width: 100%;height: 100%;position: absolute;top: 0;left: 0}
.grrxright{background-color: transparent;opacity: 0;pointer-events: none;transform: translateY(-100%);width: 100%;position: relative;left: 277px;transition: transform 1s ease, opacity 1s ease}
.grrxright img{transition: transform 0.5s ease, opacity 0.5s ease}
.grrxright img:hover{transform: scale(0.9);animation: pulse 1s infinite;opacity:0.8}
.grrxtext{position:absolute;bottom:10px;right:16px;color:#fff;opacity: 0;pointer-events: none;transform: translateX(100%);transition: transform 1s ease, opacity 1s ease;text-transform: uppercase;letter-spacing:2px;font-family: "Roboto", serif;font-weight: 400;font-style: normal;font-size:8px;width: 200px;text-align: center;text-shadow: 1px 1px 0px rgba(0, 0, 0, 1)}
#grrxgrprincp:hover .grrxright{opacity: 1;pointer-events: auto;transform: translateY(0)}    
#grrxgrprincp:hover .grrxtext{opacity: 1;pointer-events: auto;transform: translateX(0)}
.grrxchar0{font-family: "Roboto", serif;font-weight: 400;font-style: normal;position: absolute;top:85px;left: 0px;font-size: 11px;text-transform: uppercase;letter-spacing: 3px;width: 100%;text-align: center;text-shadow: 1px 1px 0px rgba(0, 0, 0, 1)}
.spagrh2{position: relative;font-family: "Allison", serif;font-weight: 400;font-style: normal;font-size: 28pt;color: white;margin-top:88px;width: 100%;text-align: center;-webkit-box-reflect: below 1px linear-gradient(transparent, rgb(255 255 255 / 20%));line-height: 1em;outline: none;transition: text-shadow 0.3s ease, color 0.3s ease, transform 0.3s ease}
.grrxleft::after{content:'\eb77';font-family:'cappuccicons';font-size: 18px;position: absolute;bottom: -1px;width: 20px;height: 20px;background-color: transparent;transform: scale(1);transition: transform 0.3s ease, text-shadow 0.3s ease}
#grrxgrprincp:hover .spagrh2 {text-shadow: 0 0 5px cyan, 0 0 10px cyan, 0 0 20px cyan, 0 0 30px cyan, 0 0 40px cyan;transform: scale(1.1)}
#grrxgrprincp:hover .grrxleft::after{text-shadow: 0 0 5px cyan, 0 0 10px cyan, 0 0 20px cyan, 0 0 30px cyan, 0 0 40px cyan;transform: scale(1.5);animation: bounce 2s infinite}
@keyframes bounce {
      0% {transform: translateY(0);animation-timing-function: ease-out}
      25% {transform: translateY(-10px);animation-timing-function: ease-in}
      50% {transform: translateY(0);animation-timing-function: ease-out}
      75% {transform: translateY(-15px);animation-timing-function: ease-in}
      100% {transform: translateY(0);animation-timing-function: ease-out}
    }
.grrxmpic{width:70px;height:70px;overflow: hidden;position: absolute;transform: rotate(45deg);border: 1px solid #2d616d;z-index: 10;left: 86px}
.grrxmpic img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform: rotate(-45deg) scale(1.42);object-fit: cover} 
.grrxright:before{content:'';width: 230px;height: 230px;background-color:#1c695e00;border-radius: 50%;position: absolute;pointer-events: none;overflow: hidden;animation: glow 2s infinite alternate}
@keyframes glow {
      0% {box-shadow: 0 0 20px rgba(31, 169, 167, 0.5), 0 0 40px rgba(31, 169, 167, 0.3)}
      50% {box-shadow: 0 0 50px rgba(31, 169, 167, 0.8), 0 0 100px rgba(31, 169, 167, 0.5)}
      100% {box-shadow: 0 0 20px rgba(31, 169, 167, 0.5), 0 0 40px rgba(31, 169, 167, 0.3)}
    }   
#grrxgrprincp a.cpg{position:absolute;right:0;bottom:0;text-transform:uppercase;letter-spacing: 1px;font-family:"Roboto", serif;font-weight: 400;font-style: normal;font-size: 6px;text-decoration: none;color: #3b3b3b}#grrxgrprincp a.cpg:before{content:'\ec82';font-family:'cappuccicons'}