html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    text-align: center;
    font-family: 'Lato', serif;
    background: #f2f2f2;
}

header {
    padding: 30px 0;
    font-size: 20px;
    background: #ffffff;
    min-width: 850px;
    color:#333333;
    border-bottom: solid 1px #cccccc;
    height: 100px;
}

button {
    width: 180px;
    height: 40px;
    font-size: 18px;
    vertical-align: middle;
}

button.activated {
    background: #11d1d5;
}

#cards {
    width: 850px;
    margin: 0 auto;
}

#cards.editable .card {
    cursor: pointer;
}

#cards.editable #card_0, #cards.editable #card_1 {
    cursor: auto;
}

.card {
    width: 150px;
    height: 100px;
    border: solid 5px #666666;
    margin: 20px;
    border-radius: 5%;
}

.card.active {
    border-color: orange;
}
#bottom {
    position:fixed;
    bottom:0;
    width:100%;
}

#mute_button{
    margin: 40px;
}

footer{
    width: 100%;
    height: 80px;
    background-color: #fafaf4;
    font-size: 14px;
    font-weight: 300;
    color: #999999;
    letter-spacing: 1px;
    display:   block;
    line-height: 40px;
    border-top: solid 1px #cccccc;
}