:root {
    --palette-1: #5b1f00;
    --palette-2: #66280a;
    --palette-3: #713112;
    --palette-4: #7c3b1a;
    --palette-5: #874421;
    --palette-6: #9a5833;
    --palette-7: #b4764f;
    --palette-8: #cd966c;
    --palette-9: #e6b68b;
    --font-border: 1px 0 var(--palette-1), -1px 0 var(--palette-1), 0 1px var(--palette-1),
    0 -1px var(--palette-1), 1px 1px var(--palette-1), -1px -1px var(--palette-1), 
    1px -1px var(--palette-1), -1px 1px var(--palette-1);
}

.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.tooltip {
    cursor: help;
}

.tooltip:hover:after {
    content: attr(title);
    background: #fff;
    padding: 5px 12px;
    border: solid 1px #ddd;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
}


body {
    background-color: var(--palette-9);
    color: var(--palette-7);
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
}

p {
    letter-spacing: 0.1em;
    font-size: xx-large;
    text-shadow: var(--font-border)
}