* {
    box-sizing: border-box;
}

em {
    font-style: italic;
}

strong {
    font-weight: bold;
}

html {
    height: 100vh;
    background: #224466;
}

html, body {
    font-family: "Carter One", cursive;
    letter-spacing: 2px;
    color: #002244;
    text-shadow: 2px 2px 4px #bb7700;
}

body {
    width: 720px;
    background: linear-gradient(#22ddff, #224466) no-repeat center fixed;
    border: 16px solid #bb7700;
    border-right-color: #aa6600;
    border-bottom-color: #995500;
    border-left-color: #cc8800;
    margin: 32px auto;
}

header {
    background-image: radial-gradient(#004488 5%, #005599 10%, #224466 20%, #005599 30%, #004488 35%);
    text-align: center;
    padding: 16px 64px;
}

header, .think-left-parent, .think-right-parent, #message {
    box-shadow: 0 8px 16px #000022;
}

.flex-container {
    display: flex;
    justify-content: center;
}

h1, h2, h3, h4, p {
    text-align: center;
    margin: 8px auto;
}

h1 {
    font-size: 3em;
}

h2 {
    font-family: "Freckle Face", cursive, sans-serif;
    font-size: 2em;
}

h3 {
    font-size: 2em;
    color: #00ec00;
    margin: 32px auto;
}

h4 {
    font-size: 1.2em;
}

hr {
    width: 32px;
    border-color: #00ec00;
}

.think-left-parent, .think-right-parent,
.think-left-first-child, .think-right-first-child,
.think-left-second-child, .think-right-second-child {
    background: #00eeee;
    border: 1px solid #0000bb;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.think-left-parent, .think-right-parent {
    position: relative;
    min-width: 128px;
    height: 64px;
    margin: 32px 16px;
}

span {
    position: absolute;
    top: 36%;
    font-size: 1.2em;
}

span.left {
    left: 24%;
}

span.right {
    right: 24%;
}

.think-left-first-child, .think-right-first-child {
    position: absolute;
    top: 80%;
    width: 40px;
    height: 24px;
}

.think-left-second-child, .think-right-second-child {
    position: absolute;
    top: 88%;
    width: 24px;
    height: 16px;
}

.think-left-first-child, .think-left-second-child {
    left: 50%;
}

.think-right-first-child, .think-right-second-child {
    right: 50%;
}

#wins, #losses {
    width: 200px;
    background-color: #002266;
    color: #00eeee;
    box-shadow: 0 8px 16px #bb7700;
    padding: 8px 16px;
}

#message {
    width: 296px;
    height: 96px;
    background: #00eeee;
    border: 1px solid #0000bb;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    padding: 24px 0;
    margin: 32px auto;
}

ul {
    background-color: #004488;
    box-shadow: 0 -8px 16px #000022;
    margin-top: 32px;
}

li {
    cursor: pointer;
    font-size: 6em;
    color: #00eeee;
    text-shadow: 2px 2px 4px #000022;
    margin: 0 auto;
}