:root{--bg-color: rgb(17, 18, 49);--header-bg-color: rgb(44, 45, 131);--header-h1-color: rgb(78, 83, 224);--header-border-color: rgb(78, 83, 224);--header-button-color: rgb(78, 83, 224);--header-button-hover-color: rgb(30, 30, 83);--header-button-hover-text-color: rgb(78, 83, 224);--header-text-color: white;--index-h1-color: rgb(78, 83, 224);--index-button-color: rgb(78, 83, 224);--index-button-hover-color: rgb(30, 30, 83);--index-button-hover-text-color: rgb(78, 83, 224);--index-border-color: rgb(78, 83, 224);--index-square-color: rgba(68, 68, 109, .2);--index-text-color: white}*{font-family:Montserrat,sans-serif;box-sizing:border-box}html,body{height:100%;width:100%;margin:0;padding:0}:root{--width: 110%;--widthNegative: -110%}body{background-color:var(--bg-color);overflow:hidden}main{display:flex;height:100vh;justify-content:center;align-items:center;flex-direction:column}.socials{display:flex;flex-direction:row;align-items:center;gap:2vh;margin-left:auto;margin-right:auto}main h1{position:absolute;color:var(--index-h1-color);margin:auto 0 0;font-size:10vh;user-select:none}.buttons{display:flex;flex-direction:column;margin-top:20dvh}.buttons a{display:flex;justify-content:center;align-items:center;background-color:var(--index-button-color);width:15vh;height:3vh;margin-top:10px;border-radius:10px;text-decoration:none;font-weight:700;color:var(--index-text-color);padding:10px;transition:.5s;-webkit-user-select:none;-ms-user-select:none;user-select:none}.buttons a:hover{cursor:pointer;background-color:var(--index-button-hover-color);color:var(--index-button-hover-text-color);scale:1.1}footer{position:absolute;bottom:0;padding:20px;display:flex;width:100%}#countdown-button{border-radius:2000px;height:3.7vh;width:3.7vh;border:none;background-color:var(--index-border-color);color:var(--bg-color);font-weight:700;border:1px solid var(--index-border-color);transition:.2s;position:absolute;right:0}#countdown-button:hover{transform:scale(1.1);cursor:pointer;background-color:var(--index-button-hover-color);color:var(--index-button-hover-text-color)}.transition-bg{transition:1s;opacity:1}html.is-animating .transition-bg{opacity:0}.bg{position:absolute;top:0;display:flex;flex-direction:column;z-index:-1}.bg .square{width:100vh;height:20vh;background-color:var(--index-square-color)}.bg .square:first-child,.bg .square:nth-child(3),.bg .square:last-child{animation:squareOdd 10s linear infinite}.bg .square:nth-child(2),.bg .square:nth-child(4){animation:squareEven 10s linear infinite}@keyframes squareOdd{0%{transform:translate(var(--widthNegative))}25%{transform:translate(0)}50%{transform:translate(var(--width))}75%{transform:translate(0)}to{transform:translate(var(--widthNegative))}}@keyframes squareEven{0%{transform:translate(var(--width))}25%{transform:translate(0)}50%{transform:translate(var(--widthNegative))}75%{transform:translate(0)}to{transform:translate(var(--width))}}@media screen and (orientation: landscape){.buttons{flex-direction:row}.buttons a{margin:10px;width:20vh;height:6vh}}@media screen and (min-width: 800px){.bg .square:first-child,.bg .square:nth-child(3),.bg .square:last-child{animation-duration:30s;width:100vw}.bg .square:nth-child(2),.bg .square:nth-child(4){animation-duration:30s;width:100vw}@keyframes squareOdd{0%{transform:translate(-100vw)}50%{transform:translate(100vw)}to{transform:translate(-100vw)}}@keyframes squareEven{0%{transform:translate(100vw)}50%{transform:translate(-100vw)}to{transform:translate(100vw)}}}@media screen and (max-width: 800px){.skin{flex-direction:column;gap:2svh}html,body{overflow:auto;width:100dvh}main{min-width:100vw;height:auto}}@media screen and (max-width: 768px){main{height:auto;min-height:100vh;padding:5vh 0}main h1{font-size:8vw;position:relative;margin-bottom:5vh}.buttons{margin-top:5vh}.buttons a{width:80vw;max-width:300px;height:auto;padding:15px;font-size:16px}footer{position:relative;padding:10px}#countdown-button{position:fixed;bottom:20px;right:20px}.bg .square{width:100vw}}@media screen and (max-width: 480px){main h1{font-size:10vw}.buttons a{font-size:14px}.socials{flex-wrap:wrap;justify-content:center}}@media screen and (orientation: portrait){.buttons{flex-direction:column}}@media screen and (max-height: 600px) and (orientation: landscape){main{flex-direction:row;justify-content:space-around;padding:2vh}main h1{font-size:6vh;position:relative;margin:0}.buttons{margin-top:0}.buttons a{width:18vh;height:5vh;font-size:14px}}
