:root{--low: hsl(220, 8%, 13%);--bg: hsl(220, 8%, 17%);--high: hsl(220, 8%, 21%);--color: hsl(218, 15%, 95%);--green: hsl(120, 100%, 75%);--red: hsl(0, 85%, 60%);--primary: hsl(194, 100%, 50%);--img_width: 150px}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--color);background-color:var(--bg);flex-direction:column;text-align:center}nav{display:flex;justify-content:center;align-items:center;text-align:center;background-color:var(--high);height:2em;padding:8px;gap:8px}.main{flex-direction:column;display:none}.list{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}.restart{padding:8px;margin:0 auto 0 0;background-color:var(--red);border:none;border-radius:4px;color:var(--color);cursor:pointer}.primary{color:var(--primary)}.green{color:var(--green)}.person{display:flex;flex-direction:column;background:var(--low);color:var(--text);border:none;padding:12px;border-radius:8px;gap:8px;box-shadow:0 0 12px #000000bf;cursor:pointer;transition:all;transition-duration:.25s}.person:hover{transform:scale(1.05) translate(2px,-8px) rotate(3.5deg)}.person img{width:var(--img_width);border-radius:8px;pointer-events:none}.person span{text-align:center;width:100%}.person .worth{color:#80ff80}.option{display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--low);color:var(--text);border:none;padding:12px;border-radius:8px;gap:8px;box-shadow:0 0 12px #000000bf;transition:all;transition-duration:.25s}.option:hover{transform:scale(1.02)}.option img{margin-top:auto;width:var(--img_width);border-radius:8px;pointer-events:none}.option span{text-align:center;width:100%}.option .worth{margin-top:auto;color:var(--green)}.plusminusspan{display:flex;justify-content:space-evenly;align-items:center;text-align:center}.plusminusspan .plus{border:none;padding:0;margin:0;background:none;color:var(--green);display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all;transition-duration:.25s}.plusminusspan .plus:hover{transform:scale(1.15) translate(0) rotate(3.5deg)}.plusminusspan .plus:active{transition-duration:80ms;transform:scale(1.05)}.plusminusspan .minus{border:none;padding:0;margin:0;background:none;color:var(--red);display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all;transition-duration:.25s}.plusminusspan .minus:hover{transform:scale(1.15) translate(0) rotate(3.5deg)}.plusminusspan .minus:active{transition-duration:80ms;transform:scale(1.05)}
