#root{--dot-size: 50px;width:100vw;height:100vh;background:var(--darkest);background-image:radial-gradient(var(--darker) 1%,transparent 8%);background-position:0 0,var(--dot-size) var(--dot-size);background-size:var(--dot-size) var(--dot-size);color:var(--light)}#main{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}.header{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:24px}.subtitle{margin:0;font-family:Space Mono,monospace;color:var(--dark)}.typewriter{color:var(--dark);display:flex;overflow:hidden;white-space:nowrap;border-right:4px solid;animation:typing 1.5s steps(20) forwards,blink 1s step-end infinite}@keyframes typing{0%{width:0}to{width:100%}}@keyframes blink{50%{border-color:transparent}}.buttons{display:flex;gap:8px}.blurb{color:var(--light)}.blurb:hover{color:var(--purple)}@media only screen and (max-width: 600px){#main{gap:32px}.header{gap:8px}.title{font-size:32pt}.buttons{flex-direction:column}}#root{--transition-duration: .4s}.button:nth-child(1){background-color:var(--darkest)}.button:nth-child(1):before{content:"";height:100%;left:0;position:absolute;top:0;width:100%;background:linear-gradient(130deg,transparent 0% 50%,var(--orange) 50% 100%);background-position:0% 0%;background-size:300% 300%;transition:background-position var(--transition-duration) ease}.button:nth-child(1) .button-text{color:var(--orange);border:1px solid var(--orange)}.button:nth-child(2){background-color:var(--darkest)}.button:nth-child(2):before{content:"";height:100%;left:0;position:absolute;top:0;width:100%;background:linear-gradient(130deg,transparent 0% 50%,var(--green) 50% 100%);background-position:0% 0%;background-size:300% 300%;transition:background-position var(--transition-duration) ease}.button:nth-child(2) .button-text{color:var(--green);border:1px solid var(--green)}.button:nth-child(3){background-color:var(--darkest)}.button:nth-child(3):before{content:"";height:100%;left:0;position:absolute;top:0;width:100%;background:linear-gradient(130deg,transparent 0% 50%,var(--cyan) 50% 100%);background-position:0% 0%;background-size:300% 300%;transition:background-position var(--transition-duration) ease}.button:nth-child(3) .button-text{color:var(--cyan);border:1px solid var(--cyan)}.button{position:relative;display:flex;align-items:center;justify-content:center;width:180px;height:60px;border-radius:8px}.button:before{content:"";height:100%;left:0;position:absolute;top:0;width:100%;background-position:0% 0%;background-size:300% 300%;transition:background-position var(--transition-duration) ease}.button .button-text{z-index:1000;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.button:focus{outline:none}.button:hover:before,.button:focus:before{background-position:100% 100%}.button:hover .button-text,.button:focus .button-text{color:var(--darkest);transition:color var(--transition-duration) ease}.button-text{font-family:sans-serif;padding-left:8px}.icon{width:20px;height:20px;padding-left:4px;padding-bottom:3px}:root{--darkest: #282a36;--darker: #44475a;--dark: #6272a4;--light: #f8f8f2;--cyan: #8be9fd;--green: #50fa7b;--orange: #ffb86c;--pink: #ff79c6;--purple: #bd93f9;--red: #ff5555;--yellow: #f1fa8c}::selection{color:var(--purple)}.title{margin:0 0 4px;font-family:Space Mono,monospace;color:var(--light)}