@import "https://fonts.googleapis.com/css2?family=Iceland&display=swap";@import "https://fonts.googleapis.com/css2?family=DotGothic16&display=swap";:root{--font-main:"Iceland", sans-serif;--font-secondary:"DotGothic16", sans-serif;--border-color-accent:#ffffff2e;--border-color-subtle:#ffffff1a;--bg-app:#1d2035d9;--bg-container:#121a3ce0;--bg-element:#43434340;--text-main:#ffffffde;--shadow-color:#00000075;--color-x:#338ecde0;--color-twitch:#7131fbe0;--color-backloggd:#bc234be0;--color-website:#2bdc5de0;font-family:var(--font-main);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text-main);background-color:var(--bg-app);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:18px;font-style:normal;font-weight:400;line-height:1.2}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}*,:before,:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6,footer>p{font-style:normal;font-weight:400;line-height:1}body{scroll-behavior:smooth;flex-direction:column;align-items:center;min-height:100vh;margin:0;display:flex;overflow-x:hidden}body>video{z-index:-1;object-fit:cover;width:100vw;height:100vh;position:fixed;top:0;left:0}main{background-color:var(--bg-container);border:1px solid var(--border-color-accent);width:100%;max-width:1200px;box-shadow:10px 10px 10px var(--shadow-color);margin:auto}@media (max-width:900px){main{border:0}}main>div:first-child{background-color:var(--bg-app);box-shadow:0 0 5px var(--shadow-color);flex-direction:row;justify-content:flex-end;gap:1rem;padding:.5rem;display:flex}main>div:first-child>span{background-color:var(--bg-element);border:1px solid var(--border-color-subtle);box-shadow:2px 2px 2px var(--shadow-color);justify-content:center;align-items:center;padding:.2rem;display:inline-flex}main>div:first-child>span>img{max-width:15px}main>div:last-child{flex-direction:row;justify-content:space-between;align-items:flex-start;padding:2em;display:flex}@media (max-width:900px){main>div:last-child{flex-direction:column;align-items:center;gap:1.5rem}}main aside{flex-direction:column;max-width:275px;display:flex}@media (max-width:900px){main aside{text-align:center;align-items:center}}main aside>hgroup{padding:1em 0}main aside>hgroup>h1,main aside>hgroup>p{margin:0}main aside>img{border:3px solid var(--border-color-accent);border-radius:50%}main aside>p{margin:0}main section{flex-direction:column;justify-items:center;gap:10px;display:flex}main section>img{width:100%}main section>div{gap:1rem;margin-top:1.5em;display:flex}main section>div>span{background-color:var(--text-main);transform-origin:top;width:1px}main section>div>ul{flex-direction:column;gap:1rem;width:100%;margin:0;padding:1rem 0;list-style:none;display:flex}main section>div>ul>li{border:2px solid var(--border-color-subtle);isolation:isolate;padding:0 1rem;transition:border-color .3s;position:relative;overflow:hidden}main section>div>ul>li>a{z-index:1;grid-template-columns:150px 1fr auto;align-items:center;text-decoration:none;display:grid}main section>div>ul>li>a>p{color:var(--text-main);z-index:2}main section>div>ul>li>a p:first-child{font-family:var(--font-secondary);letter-spacing:.15em;font-size:.7rem;font-style:normal;font-weight:400;transition:text-shadow .3s,color .3s}main section>div>ul>li>a>span{visibility:hidden;z-index:-1;will-change:transform;clip-path:polygon(0 0,100% 0,calc(100% - 30px) 100%,0 100%);width:110%;height:calc(100% + 4px);transition:transform .8s cubic-bezier(.25,1,.5,1);position:absolute;top:-2px;bottom:-2px;left:-2px;transform:translate(-100%)}#backloggd :is(main section>div>ul>li>a>span){background-color:var(--color-backloggd)}#twitch :is(main section>div>ul>li>a>span){background-color:var(--color-twitch)}#website :is(main section>div>ul>li>a>span){background-color:var(--color-website)}#x :is(main section>div>ul>li>a>span){background-color:var(--color-x)}main section>div>ul>li>a:hover p:first-child{text-shadow:0 0 2px #fff, 0 0 5px var(--text-main), 0 0 10px var(--text-main), 0 0 20px var(--text-main)}main section>div>ul>li:hover>a>span{visibility:visible;transform:translate(0)}main section>div>ul>#x:hover{border:2px solid var(--color-x)}main section>div>ul>#backloggd:hover{border:2px solid var(--color-backloggd)}main section>div>ul>#website:hover{border:2px solid var(--color-website)}main section>div>ul>#twitch:hover{border:2px solid var(--color-twitch)}footer{font-size:.8rem}