@font-face {
    font-family: yoster;
    src: url(yoster.ttf);
}

:root {
    --folder: #FFE39E;
    --dijon: #E5B670;
    --egg: #D4D6D3;
    --concrete: #A7A5A8;
    --lav: #AC6AC4;
    --ender: #662C76;
    --durple: #391844;
    --ddurple: #1e0d24;
    --dim: #555459;
    --dark: #121116;
    --go: #974654;
    --dawgs: #990B20;
    --terps: #580C18;
    color: var(--egg);
    background-color: var(--ddurple);
    font-family: "yoster", "Comic Sans MS", "Comic Sans", cursive;
}

em {
    color: var(--folder);
    font-style: normal;
}

div#container {
    width: 75%;
    margin: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
}

div#puppetshow {
    display: table;
}

div#puppetgif {
    /* float:left; */
    display: table-cell;
    width: 50%;
}

img#puppet {
    width: 100%;
}

div#board {
    width: 50%;
    /* float: left; */
    display: table-cell;
    background-image: url("easel.png");
    background-size: cover;
    color: var(--dark);
    position: relative;
}

img#turtle {
    transform: scaleX(-1);
    /* float: right; */
}

div#turtlecontainer {
    display: block;
    background-image: url("paper.png");
    background-repeat: repeat-x;
    background-position: bottom;
    clear: both;
}

button.choice {
    color: var(--dark);
    background-color: var(--egg);
    font-family: "yoster", "Comic Sans MS", "Comic Sans", cursive;
    font-size: large;
    display: list-item;
}

a:link {
    color: var(--folder);
}

a:visited {
    color: var(--dijon);
}

a:hover {
    color: var(--go);
}

a:active {
    color: var(--terps);
}

.paper {
    font-family: "yoster", "Comic Sans MS", "Comic Sans", cursive;
    width: 50%;
    display: block;
    position: absolute;
    top: 20%;
    left: 25%;
    max-height:70%;
    font-size: 1.25vw;
    /* transform: translate(10%, 50%); */
    /* text-align: center; */
}

.paper button{
    font-size: 1.5vw;
}

.paper a:link {
    color: var(--dawgs);
}

.paper a:visited {
    color: var(--terps);
}

.paper a:hover {
    color: var(--go);
}

.paper a:active {
    color: var(--terps);
}

.paper em {
    color: var(--lav);
}

.paper img {
    position: absolute;
    transform: translate(-200%, 0%);
}

.postit {
    background-color: var(--folder);
    color: var(--dark);
    width: 12em;
    margin: 1rem;
    transform: rotate(-12deg);
    padding: 1rem;
    padding-top: 0.25rem;
    margin: auto;
    margin-bottom: 2rem;
    margin-top: 1rem;
    line-height: normal;
    box-sizing: content-box;
}

.postit h1 {
    margin: inherit;
    line-height: normal;
    font-size: 2rem;
    box-sizing: content-box;
}

#testudo {
    position: absolute;
    z-index: 999;
    overflow: hidden;
}

div.postit em {
    color: var(--dawgs);
}

ul {
    text-align: left;
}

/* list country specific formatting */
#result_button {
    margin: auto;
}

div#rulebox {
    outline-style: outset;
    outline-width: 2pt;
    outline-color: var(--concrete);
    width: fit-content;
    margin: auto;
    background-color: var(--dark);
}

div#rulebox>h3 {
    margin-inline: 1rem;
}

#map_canvas {
    margin: auto;
    height: 20rem;
    width: 32rem;
    background: var(--durple);
}