body { overflow: hidden; position: relative; width: 1920px; height: 1080px; margin: 0; padding: 0; } :root { --textMain: white; --background: #01090e; --border: #1379e9; } #cast-flyout { position: absolute; bottom: 0; left: 0; width: calc(1920px - 20px); display: flex; align-items: center; justify-content: center; padding: 0 10px; } .cast-bar { padding: 10px; margin: 10px; background-color: var(--background); text-align: center; font-size: 2.2rem; color: var(--textMain); min-width: 30%; font-family: Arial, Helvetica; font-weight: bold; white-space: nowrap; border-radius: 30px; border: 9px solid var(--border); } #group-table { height: 1080px; position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.5s ease; } .group-table-body { padding: 10px; margin: 20px; height: 55%; width: 400px; background-color: var(--background); color: white; text-align: center; min-width: 100px; min-height: 100px; transform: translateY(-30px); border-radius: 40px; border: 9px solid var(--border); clip-path: inset(0 0 0 0); } .group-table-body h1 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: var(--textMain); font-size: 2.2rem; white-space: nowrap; } .group-table-items { display: flex; flex-direction: column; gap: 10px; } .group-table-item { color: white; font-weight: bold; background-color: #0b4481; font-size: 1.7rem; font-family: Arial, Helvetica, sans-serif; text-align: left; padding: 10px; width: calc(100% - 20px); animation: group-table-item-animate-in 0.3s ease both; white-space: nowrap; border-radius: 5px; } .group-table-hidden { transform: translateX(-600px); } @keyframes group-table-item-animate-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0px); } }