:root{--light-blue:#76a73f;--blue:#7598f2;--dark-blue:#3a0ca3;--purple:#9076ec;--pink:#f72585;--yellow:#ff9d00}::-webkit-scrollbar-track{background-color:var(--light-blue);border-radius:1rem;-webkit-box-shadow:inset 0 0 6px #0000004d}::-webkit-scrollbar{background-color:#b7092f;width:.5rem}::-webkit-scrollbar-thumb{background:var(--blue);border-radius:1rem}body{color:#fff;z-index:9;background:radial-gradient(circle,#434570 3%,#232439 60%);min-height:100dvh;position:relative}body h1,body h2,body h3,body h4{text-align:center}body h1{color:var(--yellow);background-color:var(--purple);width:20rem;margin:auto;font-size:2rem;font-weight:700;transform:skew(-25deg)}body h1 span{text-transform:capitalize;justify-content:space-around;align-items:center;display:flex;transform:skew(25deg)}body h3{color:var(--light-blue);letter-spacing:1px;font-size:1.5rem;font-weight:700}body h4{color:#fff;margin-top:.8rem;font-size:1.2rem;font-weight:700}body .loading{text-align:center}body .infoBox{margin:5rem 0}body .button{border:3px solid var(--yellow);color:var(--yellow);border-radius:4px;min-width:max-content;min-height:max-content;margin:.5rem 1rem;padding:3px 20px;text-decoration:none;display:inline-block;transform:skew(-25deg)}body .button:hover{color:#fff;text-shadow:0 0 10px var(--yellow);border-color:#f8f1c8;box-shadow:0 0 6px #dfff60}body .button span{align-items:center;display:flex;transform:skew(25deg)}body .button.selected{background-color:var(--yellow);color:#5a3469}body .settings{flex:1;padding:1.5rem}body nav{background-color:var(--purple);width:100%;margin:auto;overflow-y:auto}body nav .nav-body{justify-content:center;display:flex}body nav .nav-body .button{color:#fff;border-color:var(--light-blue)}body nav .nav-body .button.selected{background-color:var(--light-blue);color:var(--purple)}body main,body .page{max-width:64rem;margin:auto}@media screen and (max-width:630px){body .nav-body{flex-direction:column;align-items:center;display:flex}}body h1{margin-top:3rem}.login{background-color:var(--dark-blue);flex-direction:column;justify-content:center;min-height:100dvh;padding:3rem 1rem;display:flex}.login .formInput{border:2px solid var(--light-blue);width:100%;height:100%;font-size:inherit;color:#fff;background-color:var(--light-blue);border-radius:1rem;outline:none;margin:1rem 0;position:relative;top:0;left:0}.login .formInput:hover,.login .formInput:focus{border-color:var(--yellow)}.login .formInput input{background-color:var(--dark-blue);border-radius:1rem;width:100%;padding:.6rem 1rem}.login .formInput input:focus-visible{outline:3px solid var(--purple)}.login .formInput label{color:#fff;cursor:text;background-color:var(--dark-blue);padding:0 .5rem;transition:top .2s ease-in,left .2s ease-in,font-size .2s ease-in;position:absolute;top:.6rem;left:1rem}.login input:not(:-moz-placeholder-shown):not(:focus)~label{font-size:.8rem;top:-.5rem;left:.8rem}.login input:focus~label,.login input:not(:placeholder-shown):not(:focus)~label{font-size:.8rem;top:-.5rem;left:.8rem}
