.app{flex:1 1 auto;margin:auto 15vmin;display:grid;grid-template-columns:100px 100px repeat(4,1fr);grid-auto-rows:100px;gap:20px}.app .color-option{color:inherit;text-decoration:none;cursor:pointer;display:grid;position:relative;border-radius:var(--border-radius)}.app .color-option .color-number-key{position:absolute;top:5px;left:7px;font-size:var(--font-size)}.app .color-option .name{place-self:center;white-space:pre-line;text-align:center;font-size:var(--font-size)}.app .enter-full-screen-button{grid-column:4;grid-row:4;align-self:center;position:relative;padding:10px 20px}.button{border:none;margin:0;padding:0;background:none;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent;background-color:var(--button-surface);border-radius:var(--border-radius)}.color-picker{grid-column:1;display:grid;position:relative;border-radius:var(--border-radius);cursor:pointer}.color-picker input{grid-column:1;grid-row:1;place-self:center;border-radius:var(--border-radius);width:100%;height:100%}.color-picker .label{grid-column:1;grid-row:1;place-self:center;white-space:pre-line;text-align:center;font-size:var(--font-size)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0}.overlay .exit-full-screen-button{position:fixed;top:0;left:50%;transform:translate(-50%,-150%);transition:transform .2s ease-out;padding:10px 20px}.overlay .exit-full-screen-button:hover,.overlay .exit-full-screen-button.shown{transform:translate(-50%,50px)}.tooltip-content{text-align:center;box-sizing:border-box;padding:2px 10px;border-radius:var(--border-radius);background-color:var(--tooltip-background-color);color:var(--tooltip-text-color);font-size:var(--font-size);white-space:nowrap;opacity:0;animation:fadeIn var(--short-duration) ease-in;animation-fill-mode:forwards;animation-delay:.5s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}