CSS
* {
box-sizing: border-box;
}
html, body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
body {
background: #2c3e50;
background: linear-gradient(to left, #2c3e50 , #3498db);
}
.board {
position: relative;
width: 500px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(#616161, #474747);
border: 1px solid #493c2b;
box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.3), inset 0 30px 30px rgba(255, 255, 255, 0.1);
color: #fff;
font-size: 50px;
font-family: 'Londrina Sketch', cursive;
letter-spacing: 3px;
}
.board:before {
content: "";
position: absolute;
left: -10px;
right: -10px;
top: -10px;
bottom: -10px;
background: #aa916b;
z-index: -1;
box-shadow: 0 5px 10px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 2px black;
}
.board:after {
content: "";
display: block;
position: absolute;
border-radius: 0.1em;
width: 50px;
height: 8px;
background: #f1f1f1;
bottom: -1px;
right: 45px;
box-shadow: inset 0 -4px 1px rgba(0, 0, 0, 0.3), -1px -1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 rgba(0, 0, 0, 0.3);
}
