body{text-align:center;font-family:Arial,Helvetica,sans-serif;margin:0;background-color:var(--default-background-color);color:var(--default-font-color)}canvas{display:block;position:absolute;margin:auto;inset:0;width:640px;height:480px;background:#000}.animated-border{padding:4px;background:linear-gradient(90deg,red 50%,transparent 50%),linear-gradient(90deg,red 50%,transparent 50%),linear-gradient(0deg,red 50%,transparent 50%),linear-gradient(0deg,red 50%,transparent 50%);background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;background-size:15px 4px,15px 4px,4px 15px,4px 15px;background-position:0% 0%,100% 100%,0% 100%,100% 0px;animation:marching-ants 5s linear infinite}@keyframes marching-ants{to{background-position:100% 0%,0% 100%,0% 0%,100% 100%}}:root{--default-font-color: #303030;--default-background-color: #e9e9e9}@media (prefers-color-scheme: dark){:root{--default-font-color: #cac5be;--default-background-color: #181a1b}}