main { display: flex; height: 100vh; } #player { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; } #player > section { display: none; } iframe { flex: 0 357px; border: 0; } .op-wrapper.ovenplayer { /* Change this to your "offline" screen */ background-image: url(https://wallpapercave.com/wp/wp4749222.jpg); background-size: contain; background-position: center; background-repeat: no-repeat; } .button { display: inline-block; padding: 0.5em 1em; text-decoration: none; border-radius: 4px; background-color: #bebed6; color: black; cursor: pointer; border: 0; } .button.disabled { pointer-events: none; opacity: 0.5; cursor: inherit; } .twitch { background-color: #6441a5; color: white; } .twitch:hover { background-color: #8f75bf; } @media (max-aspect-ratio: 19/9) { #player > section { display: flex; } } .header { display: flex; align-items: center; padding: 1rem; font-size: 13pt; } #stream-game { color: #a4a1bc; padding-left: 1rem; } .links { flex: 1; padding: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; flex-direction: row-reverse; } .bottom { display: flex; }