.tooltip { position: fixed; display: block; opacity: 1; background: #69c9ba; bottom: 20px; left: 76px; border-radius: 20px; text-align: center; font-weight: bold; color: #7d4199; }
.tooltip__trigger { cursor: pointer; position: relative; }
.tooltip__trigger-text { display: block; padding: 0.85em 18px; pointer-events: none; color: #fafafa !important; letter-spacing: 2px; text-transform: uppercase; }
.tooltip__base {position: absolute;bottom: 3em;left: calc(50% - 50px);margin-left: -94px;width: 284px;height: 182px;display: flex;align-items: center;justify-content: center;opacity: 0;pointer-events: none;}
.tooltip__content { color: #ffffff; display: flex; position: relative; align-items: center; justify-content: center; width: 80%; padding: 0 1em; opacity: 0; font-size: 1.2em; }
.tooltip__shape, .tooltip__deco { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.tooltip__shape { fill: #69c9ba; }

/* Indivudual styles */

/* Cora */
.tooltip--cora .tooltip__base { transform-origin: 50% 100%; }
.tooltip--cora .tooltip__content { margin-bottom: 1em; }

/* Smaug */
.tooltip--smaug .tooltip__base { bottom: -0.5em; transform-origin: 50% 100%; }
.tooltip--smaug .tooltip__content { padding: 0; }

/* Dori */
.tooltip--dori .tooltip__base { bottom: -0.5em; }
.tooltip--dori .tooltip__content { margin: 0 0 1em; }

/* Walda */
.tooltip--walda .tooltip__base { left: 0; bottom: 0.75em; position: absolute; margin-left: 0; width: 250px; height: 100px; padding: 0 0 0 0.25em; }
.tooltip--walda .tooltip__trigger-text { padding: 1em; }
.tooltip--walda .tooltip__content { margin: 0; width: 100%; height: 100%; align-items: flex-start; text-align: left; font-size: 0.85em; line-height: 2; opacity: 1; justify-content: flex-start; }
.tooltip--walda .tooltip__letters span { display: inline-block; white-space: pre; opacity: 0; }
.tooltip--walda .tooltip__deco { width: 4px; height: 100%; background: #141514; transform-origin: 50% 100%; }

/* Gram */
.tooltip--gram .tooltip__base { bottom: -0.5em; }

/* Narvi */
.path-narvi { transform-origin: 200px 150px; }
.tooltip--narvi .tooltip__content { width: 80%; }

/* Amras */
.path-amras-1 { transform-origin: 115px 111px; }
.path-amras-2 { transform-origin: 204px 107px; }
.path-amras-3 { transform-origin: 279px 66px; }
.path-amras-4 { transform-origin: 320px 99px; }
.path-amras-5 { transform-origin: 137px 199px; }
.path-amras-6 { transform-origin: 222px 217px; }
.path-amras-7 { transform-origin: 80px 168px; }
.path-amras-8 { transform-origin: 296px 211px; }
.path-amras-9 { transform-origin: 310px 167px; }

/* Hador */
.tooltip--hador .tooltip__base { bottom: 2.25em; margin-left: -115px; }
.path-hador-1 { transform-origin: 148px 284px; }
.path-hador-2 { transform-origin: 160px 268px; }
.path-hador-3 { transform-origin: 171px 246px; }
.path-hador-4 { transform-origin: 200px 120px; }
.tooltip--hador .tooltip__content { width: 50%; margin: 0 0 2.5em; }

/* Malva */
.tooltip--malva .tooltip__content { width: 50%; }

/* Sadoc */
.tooltip--sadoc .tooltip__base { bottom: 2.5em; }
.tooltip--sadoc .tooltip__shape path { fill: #1d1f1e; stroke: #5a5c5b; stroke-width: 3px; }

/* Grid */
.grid { display: grid; max-width: 1100px; margin: 0 auto; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: 260px; }
.grid__item { padding: 1em; text-align: center; display: grid; align-items: center; justify-items: center; }
.tooltip:hover:after, .tooltip.hover:after { display: none; }