html, body {
margin: 0;
padding: 0;
}
body {
font: 100%/1.3 Helvetica, Arial, sans-serif;
background: black;
color: silver;
}
.container {
margin: 40px;
display: flex;
}
.game {
height: 700px;
width: 700px;
border: 1px solid #333;
}
.overlay {
position: absolute;
width: 700px;
height: 700px;
background: rgba(0,0,0,.5);
color: white;
z-index: 100;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.scores {
margin-left: 40px;
}
.score {
border: 1px solid #333;
padding: 40px;
margin-bottom: 40px;
}
.score.active {
border-color: #fff;
animation: pulse 4s 1;
}
@keyframes pulse {
0% {
box-shadow: 0 0 1px 0 white;
}
5% {
box-shadow: 0 0 15px 3px white;
}
100% {
box-shadow: none;
}
}
.score h1 {
text-align: center;
font-weight: 300;
text-transform: uppercase;
font-size: 1rem;
margin: 0 0 20px;
}
.score h2 {
text-align: center;
font-weight: bold;
font-size: 2rem;
margin: 0;
}