body{
    margin: 0;
}
#container{
    position: absolute;
    left: 30vw;
    top: 20vh;
    width: 600px;
    height: 600px;
    background-color: gray;
    display: grid;
    grid-template-rows: 15% 85%;
}
#controls, #container{
    border-top: 1px solid rgb(200,200,200);
    border-left: 1px solid rgb(200,200,200);
    border-right: 1px solid rgb(100,100,100);
    border-bottom: 2px solid rgb(100,100,100);
}
#controls{
    display: flex;
    justify-content: space-between;
    padding: 20px;
    align-items: center;
}
#smiley-container{
    width: 50px;
    height: 50px;
    border-top: 2px solid rgb(200,200,200);
    border-left: 2px solid rgb(200,200,200);
    border-right: 2px solid rgb(100,100,100);
    border-bottom: 2px solid rgb(100,100,100);
}
#smiley-container:active{
    border: 2px inset;
}
.display{
    width: 75px;
    height: 50px;
    background: black;
    border: 2px inset;
    display: flex;
    justify-content: right;
    align-items: center;
}
table{
    grid-row: 2;
}

td{
    width: 20px;
    height: 20px;
    border-top: 2px solid rgb(200,200,200);
    border-left: 2px solid rgb(200,200,200);
    border-right: 2px solid rgb(100,100,100);
    border-bottom: 2px solid rgb(100,100,100);
    box-shadow: 1px 1px 1px rgb(50,50,50);
    text-align: center;
    user-select: none;
}

.clicked{
    border: none;
    box-shadow: none;
}

lcd-digit{
    fill: red;
}

.dead, .excited{
    display: none;
}