#root{max-width:1280px;margin:0 auto;padding:.5em;text-align:center;--happy-bg-color: #dd6101;--happy-outline-color: #b26801;--sad-bg-color: #1e089c;--sad-outline-color: #4324b2;--disgusted-bg-color: #7b3c07;--disgusted-outline-color: #b35c2f;--angry-bg-color: #92192a;--angry-outline-color: #ce2b3c;--fearful-bg-color: #a81f6d;--fearful-outline-color: #d1278a;--bad-bg-color: #432362;--bad-outline-color: #522d7a;--surprised-bg-color: #1b5036;--surprised-outline-color: #4a7460;--peaceful-bg-color: #46969f;--peaceful-outline-color: #74b0b7;--powerful-bg-color: #f8af1b;--powerful-outline-color: #f9c354;--joyful-bg-color: #f48c45;--joyful-outline-color: #f6a974;--scared-bg-color: #bc88b2;--scared-outline-color: #cda6c5;--mad-bg-color: #db615e;--mad-outline-color: #e48986}h1{margin-top:0;margin-bottom:0}.main{padding:3em;border-radius:2em}ul{display:flex;list-style-type:none;justify-content:center;gap:1rem;flex-wrap:wrap;padding:2em 0}li{text-decoration:none;border-color:#f9f9f9}.shadow:hover{filter:drop-shadow(0 0 .5em #61dafbaa)}.happy{background-color:var(--happy-bg-color)}button.happy:hover{border-color:var(--happy-outline-color);filter:drop-shadow(0 0 .5em var(--happy-bg-color))}.sad{background-color:var(--sad-bg-color)}button.sad:hover{border-color:var(--sad-outline-color);filter:drop-shadow(0 0 .5em var(--sad-bg-color))}.disgusted{background-color:var(--disgusted-bg-color)}button.disgusted:hover{border-color:var(--disgusted-outline-color);filter:drop-shadow(0 0 .5em var(--disgusted-bg-color))}.angry{background-color:var(--angry-bg-color)}button.angry:hover{border-color:var(--angry-outline-color);filter:drop-shadow(0 0 .5em var(--angry-bg-color))}.fearful{background-color:var(--fearful-bg-color)}button.fearful:hover{border-color:var(--fearful-outline-color);filter:drop-shadow(0 0 .5em var(--fearful-bg-color))}.bad{background-color:var(--bad-bg-color)}button.bad:hover{border-color:var(--bad-outline-color);filter:drop-shadow(0 0 .5em var(--bad-bg-color))}.surprised{background-color:var(--surprised-bg-color)}button.surprised:hover{border-color:var(--surprised-outline-color);filter:drop-shadow(0 0 .5em var(--surprised-bg-color))}.peaceful{background-color:var(--peaceful-bg-color)}button.peaceful:hover{border-color:var(--peaceful-outline-color);filter:drop-shadow(0 0 .5em var(--peaceful-bg-color))}.powerful{background-color:var(--powerful-bg-color)}button.powerful:hover{border-color:var(--powerful-outline-color);filter:drop-shadow(0 0 .5em var(--powerful-bg-color))}.joyful{background-color:var(--joyful-bg-color)}button.joyful:hover{border-color:var(--joyful-outline-color);filter:drop-shadow(0 0 .5em var(--joyful-bg-color))}.scared{background-color:var(--scared-bg-color)}button.scared:hover{border-color:var(--scared-outline-color);filter:drop-shadow(0 0 .5em var(--scared-bg-color))}.mad{background-color:var(--mad-bg-color)}button.mad:hover{border-color:var(--mad-outline-color);filter:drop-shadow(0 0 .5em var(--mad-bg-color))}.end-state{display:flex;flex-direction:column;align-items:center}.end-state p{background-color:#242424;width:80%;padding:1em;font-size:1.7em;border-radius:.5em}.back-button:hover{border-color:#242424}.back-button{background-color:transparent}@media only screen and (hover: none) and (pointer: coarse){button:hover{border:none!important;filter:none!important}}@media only screen and (hover: hover) and (pointer: coarse){button:hover{border:none!important;filter:none!important}}.modal{display:flex;justify-content:space-evenly;align-items:center;flex-direction:column;padding:1em;filter:drop-shadow(0 0 .5em #242424);background-color:#e3e3e3;color:#242424;border:2px solid rgb(240,240,240);border-radius:12px;position:absolute;width:40em;left:calc(50% - 21em - 2px)}@media (width <= 800px){.modal{width:90vw;left:calc(50% - 45vw - 1em - 2px)}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s;color:#ffffffde}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}