:root{--primary: #D780FF;--secondary: #ac00ff;--outline-normal: solid 1px #5d5d5d;--outline-idle: solid 1px var(--primary);--outline-hover: solid 2px var(--primary);--background: #2f223a;--panel-idle: #23192d;--panel-secondary: #241c28;--panel-hover: linear-gradient(0deg, rgba(68, 0, 185, .5) 0%, rgba(72, 0, 232, .5) 100%);--panel-click: linear-gradient(0deg, rgba(68, 0, 185, .5) 0%, rgba(72, 0, 232, .5) 100%);--text-normal: #fff;--text-discrete: #c4c4c4;--text-hover: var(--primary);--panel-shadow: 0 0 16px #000;--inset-shadow: inset 0 0 32px -9px rgba(0,0,0,1);--round-bezel-out: inset 4px 4px 16px rgba(0, 0, 0, .25);--round-bezel-in: inset 2px 2px 8px rgba(255, 255, 255, .25), inset -2px -2px 8px rgba(0, 0, 0, .75);--discrete-outline: 1px solid #414141;--positive-idle: #0e7a0e;--positive-hover: #083608;--container-padding-high: 16px;--container-padding-standard: 8px;--corner-radii: 6px;--outer-radii: calc(var(--container-padding-standard) + var(--corner-radii));--section-spacing: 24px}html{display:flex;font-family:Segoe UI,Arial,sans-serif;background-color:var(--background);color:var(--text-normal)}body{width:800px;margin:auto;padding:16px}header{width:100%;display:flex;align-items:end;flex-direction:row;gap:24px}h1{font-family:Verdana,Segoe UI,Arial,sans-serif;color:var(--primary)}.title-container{position:relative}.title{font-size:36px;align-content:center}.splash-text{color:#fff000;font-size:13px;left:50%;overflow:scroll;position:absolute;rotate:-8deg;top:65%;white-space:nowrap;animation:splash-bounce .7s infinite;animation-timing-function:linear}@keyframes splash-bounce{0%{transform:scale(1);animation-timing-function:ease-in}50%{transform:scale(1.1);animation-timing-function:linear}to{transform:scale(1);animation-timing-function:ease-out}}a{color:var(--primary);border-radius:4px;transition:background .2s ease,color .2s ease}a:hover{background:var(--primary);color:#fff}hr{border:none;background:#4a4a4a;height:1px;margin:16px 0}.loading-text{display:block;width:100%;text-align:center;font-style:italic;color:var(--primary)}.toast{padding:16px 0 0;font-style:italic;transition:.2s ease}.blog-photo{display:block;margin:auto;width:50%;box-shadow:0 0 16px #0006;transition:.2s ease}.blog-photo:hover{box-shadow:0 0 32px #0009}@media screen and (max-width: 800px){header{display:block;align-items:end;flex-direction:row;gap:24px}.title{width:100%;text-align:center}.navigator{overflow:auto}}.button{display:inline-block;border-radius:var(--corner-radii);padding:8px 16px;color:var(--text-normal);text-decoration:none;background:var(--panel-idle);box-shadow:var(--round-bezel-out);border:none;transition:background .2s ease,color .2s ease,outline .2s ease}.navigator>.button{min-width:70px;background:none;box-shadow:none;text-align:center;flex:1}.navigator>.current-navigator{box-shadow:var(--round-bezel-out);background:var(--panel-click);outline:var(--outline-idle)}.button:hover{color:var(--text-hover);background:var(--panel-hover);box-shadow:var(--round-bezel-in);outline:var(--outline-hover)}.button:active{color:var(--text-hover);background:var(--panel-hover);box-shadow:var(--round-bezel-out);outline:0}.confirm-button{background:var(--positive-idle)}.confirm-button:hover{background:var(--positive-hover);color:#fff}.panel-button{width:200px;flex-basis:200px;flex-grow:1}.panel-button>h2{font-family:Verdana,Segoe UI,Arial,sans-serif;color:var(--primary);font-size:18px}.panel-button-container{display:flex;flex-wrap:wrap;gap:var(--container-padding-standard);margin:16px 0}.svg-button{width:52px;display:flex;aspect-ratio:1;align-items:center;min-width:0;padding:0}.svg-button>img{margin:auto;transition:width .2s ease,filter .2s ease;filter:invert(69%) sepia(29%) saturate(6553%) hue-rotate(227deg) brightness(102%) contrast(103%);width:32px}.svg-button:hover>img{width:36px;filter:invert(11%) sepia(95%) saturate(7499%) hue-rotate(281deg) brightness(105%) contrast(116%)}.svg-button-container{display:flex;gap:4px;margin:16px 0}.navigator{width:auto;display:flex;flex-grow:1;padding:var(--container-padding-standard);background:var(--panel-secondary);box-shadow:var(--round-bezel-out);border-radius:var(--outer-radii);gap:var(--container-padding-standard);margin:0 0 var(--section-spacing) 0}#webring{display:flex;gap:var(--container-padding-standard)}.gallery-button{padding:16px;width:290px;flex-basis:290px}.gallery-button>img{border-radius:var(--corner-radii);height:240px;width:100%;object-fit:cover;transition:.2s ease;outline:var(--discrete-outline)}.gallery-button:hover>img{outline:2px solid var(--primary);transform:scale(1.05)}.gallery-button:active>img{transform:scale(1.02)}.filter-menu{width:auto;display:flex;padding:var(--container-padding-high);background:var(--panel-secondary);box-shadow:var(--round-bezel-out);border-radius:var(--outer-radii);gap:var(--container-padding-standard);margin:0 0 var(--section-spacing) 0}.filter-menu>summary{padding:var(--container-padding-standard);border-radius:var(--corner-radii);transition:.2s ease}.filter-menu>summary:hover{outline:2px solid var(--primary)}.filter-item-container{display:grid;margin:var(--container-padding-high) 0;gap:var(--container-padding-standard)}fieldset.filter-item-container{border:var(--discrete-outline);border-radius:var(--corner-radii);box-shadow:var(--round-bezel-out);padding:var(--container-padding-high)}.filter-item-container>input[inputmode=text]{border:none;outline:var(--discrete-outline);background:var(--panel-idle);box-shadow:var(--round-bezel-out);color:var(--text-normal);border-radius:32px;padding:4px 12px;transition:.2s ease}.filter-item-container>input[inputmode=text]:focus{outline:var(--outline-hover);background:var(--panel-hover);color:var(--text-normal)}.filter-controls{display:flex;align-items:baseline;gap:var(--container-padding-high)}.photo-view{background:none;width:100%}.photo-view:hover{background:none}.photo-view>img{width:100%;box-shadow:0 0 16px #0006;transition:.2s ease}.photo-view:hover>img{box-shadow:0 0 32px #0009}.attribute-container{margin:var(--container-padding-standard) 0;display:flex}.attribute-label{display:block;min-width:100px;padding:0 0 0 var(--container-padding-high);font-size:15px;color:var(--text-discrete)}
