:root{--background: #eee;--primary: #333;--secondary: #444;--accent1: #ffdca1;--error: darkred;--heading-font: Merriweather, serif;--paragraph-font: Quicksand, sans-serif;--highlight: #fff}*{padding:0;margin:0;box-sizing:border-box;font-family:var(--paragraph-font);color:var(--secondary)}body{min-width:300px;height:100vh;display:grid;grid-template-rows:auto 1fr auto;align-items:center;background-color:var(--background)}h1,h2,h3,h4,h5,h6{font-family:var(--heading-font);text-align:center}h1,h2{color:var(--accent1);background-color:var(--primary);border-radius:32px}h3,h4,h5{border-bottom:2px ridge var(--primary);width:fit-content;margin:0 auto}header{background-color:var(--primary);display:grid;grid-template-columns:1fr 60px;grid-template-rows:50px auto;align-items:center}header h1{background-color:transparent}nav{display:grid;grid-template-rows:0fr;background-color:var(--primary);transition:grid-template-rows .5s ease-out;grid-column:1/4}nav a{display:block;padding:.5rem .5rem .5rem 1rem;color:var(--accent1);text-decoration:none}nav ul{overflow:hidden}nav a.active{cursor:pointer}nav a.active,nav a:active{background-image:linear-gradient(#ffffff1a,#ffffff1a)}nav a:hover,#menu:hover,#viewer-close:hover:not(:active),#keywords-close:hover:not(:active){background-image:linear-gradient(#ffffff26,#ffffff26);color:var(--highlight)}nav.open{grid-template-rows:1fr}#menu{width:44px;height:44px;border-radius:22px;display:flex;align-items:center;justify-content:center;color:var(--accent1);text-decoration:none;font-size:1.2rem;cursor:pointer}#menu:after{content:"≡"}#menu.open:after{content:"X"}footer{background-color:var(--primary);color:var(--accent1);text-align:center;padding:1rem}main{padding:1rem;display:grid;grid-template-columns:1fr;gap:1rem;margin:0 auto}#title{position:relative;width:fit-content;padding-left:2rem}legend{font-weight:700;font-size:1.2rem;padding:0 .5rem;border-left:2px ridge var(--secondary);border-right:2px ridge var(--secondary);height:.75rem;display:flex;align-items:center}#exact-match{width:fit-content;display:grid;grid-template-columns:1fr 48px 1fr;gap:1rem;cursor:pointer;margin:0 auto}fieldset{display:flex;flex-direction:column;gap:1rem;align-items:center;border:2px ridge var(--secondary);padding:1rem;width:450px;margin:0 auto}form{display:flex;flex-direction:column;gap:1rem}label{display:flex;flex-direction:column;font-weight:700;width:100%}input[type=text],select{padding:.5rem;color:#000}input[type=text]{width:100%}button{background-color:var(--accent1);color:var(--primary);padding:.5rem;font-size:1.2rem;width:100%;border-color:var(--accent1)}button:disabled{background-color:var(--background);background-image:linear-gradient(#0000001a,#0000001a);border-color:var(--background);color:var(--primary);border-style:inset}#preview-div{position:relative;width:125px;height:175px}#preview-div:not(.prompt):not(.error){cursor:pointer}#preview-div.prompt,#preview-div.error{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;text-align:center;border-radius:12.5px;font-weight:700;padding:.5rem}#preview-div.prompt{border:2px solid var(--primary)}#preview-div.error{border:2px solid var(--error)}#preview-div.error p{color:var(--error)}#preview-div.prompt h3{color:var(--primary);background-color:transparent;border:none}#preview-div.error h3{color:var(--error);background-color:transparent;border:none}#preview-img{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:12.5px}.hidden{display:none}.action{font-family:"Noto Sans Symbols 2",serif;font-size:1.5rem;text-decoration:none}.card:nth-child(odd){background-color:#0000001a}.card:nth-child(2n){background-color:#ffffffb3}.card{display:grid;grid-template-columns:auto 1fr 32px 32px 32px 32px 32px;gap:1rem;align-items:center;padding:0 .5rem;animation:enterance .5s ease-in-out 0s forwards;max-width:100%}.color-indicator{width:16px;height:16px;border-radius:16px;border:1px solid black}#viewer{max-height:80vh;max-width:80vw;aspect-ratio:672 / 936;top:50%;left:50%;transform:translate(-50%,-50%);overflow:hidden;border:none;border-radius:5%}#viewer-close,#keywords-close{position:absolute;top:0;right:0;width:48px;height:48px;background-color:var(--primary );color:var(--accent1);border:none;border-radius:48px}#viewer-close:active,#keywords-close:active{background-image:linear-gradient(#000c,#000c)}#viewer-image{max-width:100%}#keywords-dialog{top:50%;left:50%;transform:translate(-50%,-50%);padding:48px}#keywords{list-style:none;line-height:1.25rem}::backdrop{background-color:#00000080}.exiting{animation:exit .8s ease-in-out 0s forwards}dialog[open],dialog[open]::backdrop{animation:fadein .5s ease-out 0s forwards}dialog.fadeout,dialog.fadeout::backdrop{animation:fadeout .5s ease-out 0s forwards}@keyframes fadein{0%{opacity:0}to{opacity:1}}@keyframes fadeout{0%{opacity:1}to{opacity:0}}@keyframes enterance{0%{max-height:0;margin-left:100%;opacity:0}to{max-height:90px;margin-left:0%;opacity:1}}@keyframes exit{0%{max-height:90px;margin-left:0;opacity:1}to{max-height:0px;margin-left:100%;opacity:0}}@media screen and (min-width: 550px){header{grid-template-columns:1fr auto}nav{display:flex;width:fit-content;grid-row:1;grid-column:2;justify-self:end;transition:none}nav ul{display:flex;list-style-type:none}nav a{height:50px;display:flex;align-items:center;justify-content:center;padding:.5rem}#menu{display:none}}