@layer reset, base, utility;@layer reset{button,input{all:unset}}@layer base{:root{--Color1:#27091e;--Color2:#54162f;--Color3:#a73542;--Color4:#e8714e;--Color5:#fcc59e;--ColorValid:#4bb070;background-color:var(--Color1);color:var(--Color5);font-family:ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;font-weight:normal}body{display:grid;gap:1rem}nav{padding:1ch 1rem;display:flex;flex-direction:row;align-items:center;margin-bottom:-1ch;place-self:center;width:min(1400px, calc(100vw - 2ch));gap:1rem;button:hover{color:var(--Color4) !important}}a{color:var(--Color4);&:hover{color:var(--Color5);text-shadow:0 0 5px var(--Color4)}}main{width:min(1400px, calc(100vw - 2ch));display:flex;flex-direction:column;background-color:var(--Color2);padding:1rem;border-radius:1rem;place-self:center}button{cursor:pointer}@media (hover: hover) and (min-width: 1400px){#formContainer form,#grabContainer form,#loginContainer form{flex-direction:row;align-items:center;> div{display:contents}}section{gap:1rem;height:2rem;padding-block:1.5rem;padding-inline:1rem;.name{min-width:10rem}}}@media (hover: none) or (max-width: 1400px){#formContainer form,#grabContainer form,#loginContainer form{flex-direction:column;align-items:stretch;> div{display:flex;flex-direction:row;gap:inherit;align-items:center}label{min-width:5ch}}main{gap:1rem}section{height:4rem;flex-wrap:wrap;gap:1ch;.name{min-width:8ch}}.break{flex-basis:100%;height:0}}#formContainer,#grabContainer,#loginContainer{&:empty{display:none}form{display:flex;gap:2rem;padding-inline:1rem}form button,form input{flex-grow:1}input{transition:border 100ms linear;border:2px solid var(--Color1);color:inherit;background-color:var(--Color1);padding:1ch;border-radius:1ch;&:valid{border:2px solid var(--ColorValid)}&:hover{border:2px solid var(--Color5)}&:focus{border:2px solid var(--Color4)}}button{background-color:var(--Color3);color:var(--Color5);border:2px solid var(--Color2);padding:1ch;border-radius:1ch;text-align:center;&:focus{border:2px solid var(--Color4)}&:hover{border:2px solid var(--Color5)}}}section{display:flex;align-items:center;.private,.public{cursor:pointer;transition:color 100ms linear;&:hover{color:var(--Color5)}width:1rem;height:1rem}.public:hover{text-shadow:0 0 4px var(--Color4)}.private:hover{text-shadow:0 0 4px var(--Color3)}.link{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}button{border-radius:1rem;width:1rem;height:1rem;&:hover{color:var(--Color4)}}}}@layer utility{.primary{color:var(--Color5)}.secondary{color:var(--Color3)}.tertiary{color:var(--Color4)}.hover:hover{color:inherit}.grow{flex-grow:1}.end{text-align:end}.contents{display:contents}}