*{box-sizing:border-box}html,body{margin:0;padding:0}#app{--color-focus: #f9ca3b;--color-back: #303030;--color-front: #e0e0e0;background-color:var(--color-back);color:var(--color-front);font-family:Arial,Helvetica,sans-serif;height:100svh;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden}#app strong{color:var(--color-focus);font-weight:700;text-wrap:nowrap}#app .blinking{font-family:monospace;animation:2s linear infinite blink}#app>main{display:flex;flex-direction:column;justify-content:space-between;text-align:center;flex-grow:1;padding:2rem 1rem;width:100vw}#app>main .name{text-transform:uppercase;font-size:4rem;font-weight:700}#app>main .name:nth-of-type(1){align-self:flex-start}#app>main .name:nth-of-type(3){align-self:flex-end}#app>main h2{font-size:2rem;margin:0;margin-bottom:3rem}#app>main p{margin:1rem}#app>main a.button{text-transform:uppercase;border:1px solid var(--color-focus);border-radius:100px;background:transparent;color:var(--color-front);padding:.8rem;font-weight:700;cursor:pointer;display:inline-block;text-decoration:none;-webkit-user-select:none;user-select:none}#app>main a.button:hover{background-color:var(--color-focus);color:var(--color-back);transition:.3s linear;transition-property:background,color}#app>footer{align-self:flex-start;box-shadow:-3px -5px 14px 6px #00000026;background:#00000026}#app>footer ul{--gap-width: 2rem;display:flex;flex-direction:row;list-style:none;gap:var(--gap-width);text-transform:uppercase;font-weight:700;font-size:1.8rem;margin:0;padding:0;position:relative;text-wrap:nowrap;animation:60s linear infinite running parade}#app>footer ul li:nth-of-type(2n){color:var(--color-focus)}#bubble{--bubble-diameter: 20px;display:none;position:absolute;background-color:transparent;width:var(--bubble-diameter);height:var(--bubble-diameter);border-radius:50%;pointer-events:none;-webkit-backdrop-filter:invert(100%);backdrop-filter:invert(100%);transition:top .1s ease-out,left .1s ease-out,width .1s ease-out,height .1s ease-out;transform:translate(-50%,-50%);box-shadow:inset 0 0 12px 1px #0009;transform-origin:center;font-size:0}#app:has(strong:hover) #bubble,#app:has(a.button:hover) #bubble{border-radius:50px;box-shadow:none}#app:has(strong:hover) #bubble{filter:hue-rotate(90deg)}#app:has(a.button:hover) #bubble{-webkit-backdrop-filter:sepia(40%);backdrop-filter:sepia(40%);box-shadow:0 0 12px 1px var(--color-focus)}@keyframes parade{0%{right:0}to{right:calc((100% - var(--gap-width)) / 2 + var(--gap-width))}}@keyframes blink{0%{visibility:visible}50%,to{visibility:hidden}}