@property --rotate{syntax: "<angle>"; initial-value: 132deg; inherits: false;}:root{--card-height: 30vh;--card-width: calc(var(--card-height) / 1.7)}@media (min-width: 374px){:root{--card-width: calc(var(--card-height) / 1.45)}}@media (min-width: 375px) and (orientation: landscape){:root{--card-width: calc(var(--card-height) / 1.3)}}@media (min-width: 1025px){:root{--card-width: calc(var(--card-height) / 1.45)}}@media (min-width: 1179px){:root{--card-height: 42vh}}@media (min-width: 1540px){:root{--card-height: 44vh}}@media (min-width: 1921px){:root{--card-height: 30vh;--card-width: calc(var(--card-height) / 1.1)}}@media (min-width: 2500px){:root{--card-height: 30vh;--card-width: calc(var(--card-height) / 1.2)}}@keyframes fadeInSlide{0%{opacity:0;transform:translate(-40px)}to{opacity:1;transform:translate(0)}}.animate-fadeInSlide{animation:fadeInSlide 3s ease-out forwards}footer a:hover{border-bottom:1px solid white;border-radius:0}#logo:hover,main>a:hover{border:none}body{min-height:100vh;background:#212534;display:flex;align-items:center;flex-direction:column;padding-top:2rem;padding-bottom:2rem;box-sizing:border-box}.card{width:var(--card-width);height:var(--card-height);position:relative;display:flex;justify-content:center;align-items:flex-end;padding:0 20px;perspective:2500px}.cover-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.wrapper{transition:all .5s;position:absolute;width:100%;z-index:-1}.card .wrapper{box-shadow:0 0 24px 2px #00000078}.card:hover .wrapper{transform:perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);box-shadow:2px 35px 32px -8px #000000bf;-webkit-box-shadow:2px 35px 32px -8px rgba(0,0,0,.75);-moz-box-shadow:2px 35px 32px -8px rgba(0,0,0,.75)}.wrapper:before,.wrapper:after{content:"";opacity:0;width:100%;height:80px;transition:all .5s;position:absolute;left:0}.wrapper:before{top:0;height:100%;background-image:linear-gradient(to top,transparent 46%,rgba(12,12,12,.5) 68%,rgba(12,12,12) 97%)}.wrapper:after{bottom:0;opacity:1;background-image:linear-gradient(to bottom,transparent 46%,rgba(0,0,0,.5) 68%,rgb(0,0,0,.75) 97%)}.card:hover .wrapper:before,.wrapper:after{opacity:1}.card:hover .wrapper:after{height:120px}.title{width:100%;transition:transform .5s}.card:hover .title{transform:translate3d(0,-50px,100px)}.card:hover .test{opacity:0}.character:hover{cursor:pointer}.character{position:absolute;bottom:0;left:0;z-index:-1;opacity:0;transform:translateZ(0);transition:none;pointer-events:none}.card:hover .character{opacity:1;transform:translate3d(0,-20%,100px);pointer-events:auto;transition:opacity .5s ease-in,transform 1s ease-in}.glass{background:#ffffff40;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-in{opacity:0;animation:fadeIn ease-in 1;animation-fill-mode:forwards;animation-duration:3s}.fade-in.one{animation-delay:.1s}.fade-in.two{animation-delay:.4s}.fade-in.three{animation-delay:.8s}.fade-in.four{animation-delay:1.2s}