<div style="display: flex; width: 100%; align-items: center; justify-content: center; margin: 2rem 0"> <div style="flex: 1.2"><h1 style="transform: rotateY(180deg); text-align: center; font-size: 3rem">👀</h1> <p style="text-align: center">i should click on this and open it</p></div> <div style="outline: 2px solid black; flex: 2; aspect-ratio: 16/9; transform: perspective(500px) rotateY(-20deg) skewY(10deg) scale(0.8);"> <details> <summary style="list-style: none; padding: 0.25rem"> <div style="display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin: 0.75rem;"> <div style="background-color: rgb(var(--color-notWhite)); border: 1px solid rgb(var(--color-cherry)); border-radius: 0.5rem; box-sizing: border-box; padding: 0.75rem; gap: 0.75rem; align-self: stretch; display: flex; flex-direction: row; align-items: center;"> <img src="https://static.pyrope.net/warning-shield.png" aria-hidden="true" style="margin: 0; display: block"> <p style="color: rgb(var(--color-cherry)); margin: 0; line-height: 24px">This post has content warnings for: <b>major spoilers for things. very major. i mean it!</b></p> </div> <div style="cursor: pointer; background-color: rgb(var(--color-cherry)); border-radius: 0.5rem; color: rgb(var(--color-notWhite)); padding: 0.75rem; line-height: 1; letter-spacing: 0.05em; whitespace: nowrap;"> show post </div> </div> </summary> <div style="position: absolute; inset: 0; background-color: white; overflow-y: auto"> <p style="text-align: center; color: black">these guys die :(</p> <img src="https://static.wikia.nocookie.net/seuss/images/d/d3/Thing1-and-thing2.jpg" alt="things 1 and 2 from dr. seuss" style="width: 100%"> <a style="width: fit-content; margin: 0 auto; display: block; color: #ccc" href="https://pyrope.net/randirect#cohost.org/mehbark/post/2555916-cursor-adventure-so::pyrope.net/mcai::irc.pyrope.net::413.gay::pyrope.net/tnb::pyrope.net/concat::pyrope.net/davehash::twitter.com/mehbark::pl.pyrope.net/terezi">random fun 4 u</a> </div> </details> </div></div>