* {
    --bg-green-1: #40DD62;
    --bg-green-2: #5CE279;
    --bg-black-1: #151515;
    --bg-black-2: #222222;
    --bg-black-3: #1b1b1b;
    --bg-white-1: #DDDDDD;
    --bg-white-2: #EEEEEE;
}

.green {
    color: #111111;
    border-color: #28ab51;
    background: 
        linear-gradient(63deg, var(--bg-green-1) 23%, transparent 23%) 7px 0,
        linear-gradient(63deg, transparent 74%, var(--bg-green-1) 78%),
        linear-gradient(63deg, transparent 34%, var(--bg-green-1) 38%, var(--bg-green-1) 58%, transparent 62%),
        var(--bg-green-2);
    background-size: 16px 48px;
}

.black {
    color: #EEEEEE;
    border-color: black;
    background:
        linear-gradient(27deg, var(--bg-black-1) 5px, transparent 5px) 0 5px,
        linear-gradient(207deg, var(--bg-black-1) 5px, transparent 5px) 10px 0px,
        linear-gradient(27deg, var(--bg-black-2) 5px, transparent 5px) 0px 10px,
        linear-gradient(207deg, var(--bg-black-2) 5px, transparent 5px) 10px 5px,
        linear-gradient(90deg, var(--bg-black-3) 10px, transparent 10px),
        linear-gradient(var(--bg-black-3) 25%, var(--bg-black-3) 25%, var(--bg-black-3) 50%, transparent 50%, transparent 75%, var(--bg-black-2) 75%, var(--bg-black-2));
    background-color: var(--bg-black-1);
    background-size: 20px 20px;
}

.white {
    border-color: #c0c0c0;
    color: #222222;
    background-color:var(--bg-white-1);
    background-image:
        radial-gradient(circle at 100% 150%, var(--bg-white-1) 24%, var(--bg-white-2) 24%, var(--bg-white-2) 28%, var(--bg-white-1) 28%, var(--bg-white-1) 36%, var(--bg-white-2) 36%, var(--bg-white-2) 40%, transparent 40%, transparent),
        radial-gradient(circle at 0    150%, var(--bg-white-1) 24%, var(--bg-white-2) 24%, var(--bg-white-2) 28%, var(--bg-white-1) 28%, var(--bg-white-1) 36%, var(--bg-white-2) 36%, var(--bg-white-2) 40%, transparent 40%, transparent),
        radial-gradient(circle at 50%  100%, var(--bg-white-2) 10%, var(--bg-white-1) 10%, var(--bg-white-1) 23%, var(--bg-white-2) 23%, var(--bg-white-2) 30%, var(--bg-white-1) 30%, var(--bg-white-1) 43%, var(--bg-white-2) 43%, var(--bg-white-2) 50%, var(--bg-white-1) 50%, var(--bg-white-1) 63%, var(--bg-white-2) 63%, var(--bg-white-2) 71%, transparent 71%, transparent),
        radial-gradient(circle at 100% 50%, var(--bg-white-2) 5%, var(--bg-white-1) 5%, var(--bg-white-1) 15%, var(--bg-white-2) 15%, var(--bg-white-2) 20%, var(--bg-white-1) 20%, var(--bg-white-1) 29%, var(--bg-white-2) 29%, var(--bg-white-2) 34%, var(--bg-white-1) 34%, var(--bg-white-1) 44%, var(--bg-white-2) 44%, var(--bg-white-2) 49%, transparent 49%, transparent),
        radial-gradient(circle at 0    50%, var(--bg-white-2) 5%, var(--bg-white-1) 5%, var(--bg-white-1) 15%, var(--bg-white-2) 15%, var(--bg-white-2) 20%, var(--bg-white-1) 20%, var(--bg-white-1) 29%, var(--bg-white-2) 29%, var(--bg-white-2) 34%, var(--bg-white-1) 34%, var(--bg-white-1) 44%, var(--bg-white-2) 44%, var(--bg-white-2) 49%, transparent 49%, transparent);
    background-size: 100px 50px;
}

main {
    display: flex;
    flex-direction: row;
}
#game-panel {
    flex: 80%;
}
#hint-text {
    border: black solid 4pt;
    border-radius: 12pt;
    padding: 2ex;
    margin: 2ex;
}
div#side-panel {
    flex: 20%;
    display: flex;
    flex-direction: column;
    border: black solid 2pt;
    border-radius: 12pt;
    padding: 1ex;
    margin: 1ex;
}
ol#event-log {
    list-style-type: none;
    font-size: 14pt;
}

li.card {
    border-style: solid;
    border-width: 2pt;
    border-radius: 12pt;
    list-style-type: none;
    padding: 1ex;
    margin: .2ex;
    width: 30ex;
    height: 12ex;
    line-break: anywhere;
    text-align: center;
    font-size: 11pt;
}
ul#cards-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

span.card-word {
    font-weight: bold;
    font-size: 30px;
}

.card-bottom-bar {
    display: grid;
    grid-template-columns: 5ex 17ex 5ex;
    justify-content: center;
}

.card-bottom-bar div {
    width: 3ex;
    height: 3ex;
    font-size: 16pt;
    border-style: solid;
    border-width: 2pt;
    border-radius: 12pt;
    font-weight: bold;
}

.card-bottom-bar button {
    margin-left: 3ex;
    margin-right: 3ex;
    margin-bottom: 1ex;
}

.card.card-done {
    opacity: 70%;
}

#game-panel .centered-bar {
    text-align: center;
    margin: 3ex;
    display: flex;
    justify-content: center;
}

#game-panel .centered-bar * {
    margin-left: 1ex;
    margin-right: 1ex;
}

#submit-hint input {
    font-size: 20pt;
    font-weight: bold;
    border-radius: 7pt;
    padding: 5pt 10pt 5pt 10pt;
}


#submit-hint select {
    width: 8ex;
}