css 3

.topLeft:active:after { height: 300px; width: calc(100% -10px); background-image: var(--egboximg1), var(--egboximg2); background-size: auto, 100% 100%; background-repeat: no-repeat,no-repeat; background-position: center, 0 0; color: #fff; border: solid 3px black; white-space: pre-wrap; content: var(--egboxtext); text-align: center; display: block; } .topLeft:after { height: 300px; width: calc(100% -10px); background-image: var(--boximg1), var(--boximg2); background-size: auto, 100% 100%; background-repeat: no-repeat,no-repeat; background-position: center, 0 0; border: solid 3px black; color: #fff; white-space: pre-wrap; content: var(--boxtext); text-align: center; display: block; } :root { --boximg1: url(https://cdn.discordapp.com/attachments/643061831497416715/699573000214937661/laptop.gif); --boximg2: url(https://cdn.discordapp.com/attachments/643061831497416715/699568731977678868/windowsbliss.gif); --boxtext: "ah yes~ (hold on the comp)"; / easter egg of the box / --egboximg1: url(https://web.archive.org/web/20091026145121/http://www.geocities.com/vhlw1994//toaster.gif); --egboximg2: url(https://web.archive.org/web/20060505065840/http://espanol.geocities.com:80/itzman_mg/space.gif); --egboxtext: "TOASTERS!" }