:root{--gradient-1: rgb(91, 129, 255);--gradient-2: rgb(195, 90, 255);--bg-transition-duration: .3s;--letter-transition-in: .5s;--letter-transition-out: .3s;--alert-duration: 1s;--alert-offset:calc(50% - 2.5rem)}html,body{width:100%;height:100%;margin:0;background:#000;color:#fff;font-family:Space Mono,monospace;font-size:2rem;display:flex;flex-direction:column;align-items:stretch}a{text-decoration:none;color:inherit}h1{margin:0}#title{text-align:center;background:linear-gradient(-90deg,var(--gradient-1),var(--gradient-2));background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;letter-spacing:0cap;transition:var(--bg-transition-duration)}#title:hover{letter-spacing:.15cap;transition:var(--bg-transition-duration)}#title-text{pointer-events:none;-webkit-user-select:none;user-select:none}#content{flex-grow:1;display:flex;align-items:center;justify-content:center}#alert{pointer-events:none;font-size:.8rem;position:absolute;text-align:center;transform:translate(var(--alert-offset));opacity:0}.alert_popup{animation:alert_popup var(--alert-duration)}@keyframes alert_popup{0%{opacity:0;transform:translateY(0) translate(var(--alert-offset))}50%{opacity:1;transform:translateY(-100%) translate(var(--alert-offset))}to{opacity:0;transform:translateY(-100%) translate(var(--alert-offset))}}.container{width:fit-content;height:fit-content;justify-self:flex-end;display:flex;flex-direction:column}#outer-container{padding:5px;background:linear-gradient(135deg,transparent 0% 33%,var(--gradient-1) 66%,var(--gradient-2) 100%);background-size:300% 300%;transition:var(--bg-transition-duration) ease-in}#outer-container:hover{color:#000;background-position:100% 100%}#inner-container{padding:15px 30px;border:15px solid black}.stretched{width:100%}.centered{text-align:center}.line{display:flex;justify-content:space-between}.word{opacity:.7;-webkit-user-select:none;user-select:none}.bold{font-weight:700}.hoverable{opacity:1}.copyable{cursor:copy}.letter{display:inline-block;transition:transform var(--letter-transition-out) ease-in}.hoverable:hover>.letter{transition:transform var(--letter-transition-in) ease-out}.hoverable:hover>.letter:nth-child(1){transform:translate(-40%,-40%) rotate(7deg)}.hoverable:hover>.letter:nth-child(2){transform:translate(-30%,20%) rotate(-4deg)}.hoverable:hover>.letter:nth-child(3){transform:translate(-30%,-35%) rotate(-15deg)}.hoverable:hover>.letter:nth-child(4){transform:translate(40%,35%) rotate(18deg)}.hoverable:hover>.letter:nth-child(5){transform:translate(15%,-15%) rotate(-4deg)}.hoverable:hover>.letter:nth-child(6){transform:translate(25%,-30%) rotate(-8deg)}.hoverable:hover>.letter:nth-child(7){transform:translate(20%,15%) rotate(-19deg)}.hoverable:hover>.letter:nth-child(8){transform:translate(40%,-40%) rotate(-17deg)}.hoverable:hover>.letter:nth-child(9){transform:translate(-15%,35%) rotate(6deg)}.hoverable:hover>.letter:nth-child(10){transform:translate(-15%,20%) rotate(18deg)}.hoverable:hover>.letter:nth-child(11){transform:translate(40%,-40%) rotate(-7deg)}.hoverable:hover>.letter:nth-child(12){transform:translate(35%,20%) rotate(18deg)}.hoverable:hover>.letter:nth-child(13){transform:translate(35%,-30%) rotate(-15deg)}.hoverable:hover>.letter:nth-child(14){transform:translate(-15%,40%) rotate(1deg)}.hoverable:hover>.letter:nth-child(15){transform:translate(-15%,-15%) rotate(12deg)}