stylesheet.css

:root {
    --paragraph-color: #7E7D7D;
    --border-radius: 6px;
 }
 
 * {
    box-sizing:border-box;
 }
 
 html, body {
    height: 100%;
    font-family: 'Source Sans Pro', sans-serif;
 }
 
 body {
    color: #222;
    background: linear-gradient(180deg, #64CDDB 0%, #36ABD0 100%);
    padding-top: 4em;
 }
 h2, p { margin: 0; }
 
 .card {
    background: #FFFFFF;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    border-radius: var(--border-radius);
    max-width: 400px;
    margin: 0 auto;
 }
 .card header {
    padding: 1em;
 }
 
 .card-section {
    padding: 2em;
 }
 
 .card-section h2 {
    font-weight:bold;
    margin-bottom: 0.2em;
 }
 .card-section p {
    font-weight:normal;
    color: var(--paragraph-color);
    margin-bottom:1em;
 }
 
 .counter-ui-container {
 }
 
 .counter {
    font-size: 5em;
    font-weight:bold;
    width: 1.5em;
    text-align:center;
 }
 
 button {
    appearance: none;
    background: transparent;
    border: 1px solid var(--paragraph-color);
    height: 40px;
    padding-left: 1em;
    padding-right: 1em;
    border-radius: var(--border-radius);
    cursor: pointer;
 }
 button:focus {
    outline: #39A7B8 auto 1px;
 }
 button[disabled] {
    border: 1px solid #ddd;
    cursor: inherit;
 }
 
 .button_small {
    font-size: 0.8em;
    text-align:center;
    padding:0;
    width: 32px;
    height: 32px;
 }
 .counter-ui-container {
    margin:0;
    padding:0;
 }
 .counter-ui-container li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0.5em 0;
    margin:0;
 }
 .li_label {
    font-size: 1.3em;
 }
 
 
 footer {
    color: #999;
    text-align:center;
    padding: 1em 1em 1em;
 }
 footer span {
    font-size: 0.8em;
 }
 
 .icon-bone,
 .icon-ball,
 .icon-circle,

 
 .icon-rabbit {
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
    display:inline-block;
    background: url("https://assets.codepen.io/21542/Toys.png") no-repeat no-repeat;
    background-size: 256px;
    vertical-align: middle;
    position: relative;
    top: -8px;
 }
 .icon-ball { background-position: -64px;}
 .icon-circle { background-position: -128px;}
 .icon-rabbit { background-position: -192px;}