@media (max-width: 1280px){ html{ font-size: 10px !important; } } @media(max-width:1366px){ html{ font-size: 13px !important; } } @media(min-width:1920px){ html{ font-size: 20px !important; } } #drag-container, #spin-container { position: absolute; display: flex; margin: auto; top: 38%; left: 40%; transform-style: preserve-3d; transform: rotateX(-10deg); } #drag-container img, #drag-container video { transform-style: preserve-3d; position: absolute; left: 0; top: 0; width: 8rem; height: 11rem; line-height: 15.38rem; font-size: 3.85rem; text-align: center; box-shadow: 0 0 0.62rem #fff; -webkit-box-reflect: below 0.77rem linear-gradient(transparent, transparent, #0005); } #drag-container img:hover, #drag-container video:hover { box-shadow: 0 0 1.15rem #fffd; -webkit-box-reflect: below 0.77rem linear-gradient(transparent, transparent, #0007); } #drag-container p { font-family: Serif; position: absolute; top: 100%; left: 50%; transform: translate(-50%,-50%) rotateX(90deg); color: #fff; } #ground { width: 69.23rem; height: 69.23rem; position: absolute; top: 100%; left: 50%; transform: translate(-50%,-50%) rotateX(90deg); background: -webkit-radial-gradient(center center, farthest-side , #9993, transparent); } #carousel-container { width: 100%; height: 100%; } .widget{ width: 40px; height: 40px; position: fixed; right: 5px; top: 67%; cursor: pointer; } .widget:hover{ cursor: pointer; } @keyframes spin { from{ transform: rotateY(0deg); } to{ transform: rotateY(360deg); } } @keyframes spinRevert { from{ transform: rotateY(360deg); } to{ transform: rotateY(0deg); } }