:root{--background: #09090b;--primary: var(--background);--secondary: var(--background);--shade-color: var(--background);--text: hsl(from var(--primary) h s 90%);--text-gentle: hsla(from var(--primary) h s 80% / 70%)}:root{--radius-sm: .25rem;--radius-md: .5rem;--focus-ring: .125rem solid var(--secondary)}:root{font-family:Quicksand,Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:500;color:var(--text);background:var(--background);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{height:2.5rem;min-width:2.5rem;border:.125rem solid transparent;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:transparent;cursor:pointer}button:hover{color:var(--background);background:var(--primary)}button:focus-visible{border-color:var(--secondary)}input{height:2.5rem;width:100%;min-width:2.5rem;border:.125rem solid var(--primary);padding:0 .5rem;background:transparent;border-radius:var(--radius-sm)}input::placeholder{color:var(--text-gentle)}input:focus-visible{border-color:var(--secondary)}*,*:before,*:after{box-sizing:border-box}*{margin:0}input,button,textarea,select{font:inherit;color:currentColor;outline:none}ul{list-style:none;padding:0}html{height:100%}body{height:max-content;min-height:100%}.visually-hidden{display:inline-block;position:absolute;overflow:hidden;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;padding:0;border:0px}:root{--scrollbar-track: var(--background);--scrollbar-thumb: var(--text)}*{scrollbar-width:auto;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}@font-face{font-family:Quicksand;font-style:normal;font-weight:500;src:url(/dandadan-startpage/fonts/quicksand-medium.ttf) format("truetype")}@font-face{font-family:Quicksand;font-style:normal;font-weight:700;font-display:swap;src:url(/dandadan-startpage/fonts/quicksand-bold.ttf) format("truetype")}:root{background:var(--background) linear-gradient(120deg,rgba(from var(--primary) r g b / 75%) 0% 100%)}body{padding:3.5rem 2rem;display:flex;align-items:center;justify-content:center}button#pin-action{position:absolute;top:.5rem;right:.5rem;opacity:.5}button#pin-action svg{rotate:30deg}button#pin-action:hover{opacity:1}body>main{padding:1rem 2rem 1rem 1rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;column-gap:2rem;row-gap:1rem;grid-template-rows:auto auto 1fr;grid-template-areas:"char-img title" "char-img nav" "search nav";background:hsla(from var(--background) h s l / 40%);border-radius:var(--radius-md);--shadow-color: hsla(from var(--shade-color) h s l / .39);box-shadow:.8px .7px 1.2px var(--shadow-color),2.4px 1.9px 3.4px -.6px var(--shadow-color),4.8px 3.9px 7px -1.2px var(--shadow-color),9.9px 7.9px 14.2px -1.9px var(--shadow-color),19.2px 15.4px 27.7px -2.5px var(--shadow-color)}main>img{grid-area:char-img;height:13rem;width:21rem;margin:.5rem;object-fit:cover;-webkit-user-select:none;user-select:none;pointer-events:none;outline:.25rem solid var(--primary);outline-offset:.25rem}main>h1{grid-area:title;margin:0;padding-bottom:.75rem;font-size:2rem;letter-spacing:.5rem;line-height:1;color:var(--primary);text-decoration:underline;text-decoration-thickness:.25rem;text-underline-offset:.5rem;filter:drop-shadow(.125rem 0 var(--secondary))}main>nav{grid-area:nav;display:grid;grid-template-columns:1fr 1fr;column-gap:2rem;row-gap:1rem}main>nav label{display:inline-block;color:var(--secondary);font-weight:700;max-width:10rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}main>nav li{height:1.5rem}main>nav a{position:relative;color:transparent;margin:0 -.5rem;text-decoration:none;outline:none;border-radius:.125rem}main>nav a,main>nav a:before,main>nav a:after{display:inline-block;max-width:10rem;padding:0 .5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}main>nav a:before,main>nav a:after{content:attr(data-text);color:var(--text);position:absolute;left:0;transition:.5s cubic-bezier(0,1,0,.66);transition-property:transform,color}main>nav a:before{clip-path:polygon(0% 0%,100% 0%,100% 55%,0% 55%)}main>nav a:after{clip-path:polygon(0% 55%,100% 55%,100% 100%,0% 100%)}main>nav a:focus-visible{outline:var(--focus-ring)}:is(main>nav a:hover,main>nav a:focus-visible):before{color:var(--secondary);transform:translate(.25rem) skew(-15deg)}:is(main>nav a:hover,main>nav a:focus-visible):after{color:var(--secondary);transform:translate(-.25rem) skew(-15deg)}main>form{grid-area:search;display:flex;gap:1rem;position:relative}main>form>input{flex:1;padding-right:2.5rem}main>form>button{position:absolute;right:0}svg{width:1rem;height:1rem}@media screen and (max-width:56rem){body>main{width:100%;max-width:24rem;padding:1rem;grid-template-areas:"title" "char-img" "search" "nav"}body>main>img{width:calc(100% - 1rem)}body>main nav{width:100%;overflow:hidden;align-items:stretch;justify-items:stretch;justify-content:stretch}body>main nav ul,body>main nav li,body>main nav a{overflow:hidden;text-overflow:ellipsis}body>main nav a,body>main nav a:before,body>main nav a:after{max-width:100%}}@media screen and (max-width:21rem){body>main>nav{grid-template-columns:1fr}}