.page-login{width:calc(100% - 2rem);max-width:1000px;margin-left:auto;margin-right:auto}.error{color:#fff;margin:0 auto;font-size:2rem}h1{color:#fff;text-align:center;margin-bottom:2rem}#link{--OffsetX:50%;--OffsetY:50%;color:#fff;background-color:var(--brand-twitch);border-radius:1rem;grid-template-columns:auto auto;align-items:center;gap:5rem;max-width:80vw;margin:0 auto 5rem;padding:1rem;text-decoration:none;display:grid;position:relative;overflow:hidden}#link[hidden]{display:none!important}#link[href=""]{display:none}#link:after{content:"";top:var(--OffsetY);left:var(--OffsetX);aspect-ratio:1;opacity:0;background:radial-gradient(#d3d3d3,#0000 50%);border-radius:50%;width:50%;transition:opacity .5s;position:absolute;translate:-50% -50%}#link:hover:after{opacity:.1}#link #hovercatcher{z-index:2;width:100%;height:100%;position:absolute;translate:0}#link div{text-align:right;font-size:3rem;line-height:1.3;transition:scale .2s}#link:hover div{scale:1.1}#link svg{font-size:4rem}@media (max-width:1000px){#link{gap:2rem}#link div,#link svg{font-size:2rem}}@media (max-width:400px){#link div{text-align:center}}.user{color:#fff;background-color:var(--color-light);border:1px solid var(--accent);border-radius:1rem;grid-template:"text picture"/auto minmax(1rem,10rem);width:calc(100% - 5rem);max-width:1000px;margin:0 auto;padding:1rem;display:grid;position:relative;overflow:hidden}.user[hidden]{display:none!important}.user .userimg{grid-area:picture;width:100%;position:relative}.user img{object-fit:contain;width:100%;height:100%;position:absolute;top:50%;left:50%;translate:-50% -50%}.user .userdata{grid-area:text;width:100%;position:relative;overflow:hidden}.user .name{text-align:center;margin:3rem;font-size:5rem}.user .loggedin{color:gray;text-align:center;font-size:1rem;position:absolute;top:10%;left:50%;translate:-50% -25%}.user .logout{color:var(--color-link);text-align:center;cursor:pointer;font-size:1rem;text-decoration:underline;position:absolute;bottom:0;left:50%;translate:-50% -25%}.user .logout:hover{color:var(--color-link-dark)}.user.loading{height:12rem;padding-right:1rem}.user.loading .userimg{background:linear-gradient(110deg,#696969 8%,#757575 18%,#696969 33%) 0 0/300% 300%;border-radius:.4rem;width:calc(100% - 1rem);height:calc(100% - 2rem);margin:1rem;animation:3.05s linear infinite shine1}.user.loading .userdata{max-width:500px;height:calc(100% - 1rem);position:absolute;left:50%;translate:-50% 1rem}.user.loading .userdata p{color:#0000;background:linear-gradient(110deg,#696969 8%,#757575 18%,#696969 33%) 0 0/200% 100%;border-radius:.4rem;width:calc(100% - 2rem);height:2rem;margin:1rem;animation:1.5s linear infinite shine2;position:relative;top:0;bottom:0;left:0;translate:0!important}.user.loading .userdata .name{translate:-3rem .1rem}@media (max-width:600px){.user{grid-template-columns:100%;padding:0}.user.loading{padding:0}.user.loading .userimg{display:none}.user:not(.user.loading) .userdata{z-index:1}.user:not(.user.loading) .userdata p{text-shadow:0 0 30px #000}.user:not(.user.loading) .userimg{z-index:0;opacity:.2;filter:blur(5px);grid-area:1/1;position:absolute;inset:0}.user:not(.user.loading) .userimg img{object-fit:cover}}@keyframes shine1{0%{background-position-x:0%}to{background-position-x:-300%}}@keyframes shine2{0%{background-position-x:0%}to{background-position-x:-200%}}