* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
    background: #e3e3e3;
    background-image: url("https://lh3.googleusercontent.com/proxy/ReLfcXBjrGohzNPkD-4X7rs0H5fEJsUZjdSCRXlGBi-zx09O8wEzceWcIQ-kEPP1urzYEQ8GQk7EObkGxnQ9369-6qLvf6mEpyJR5bxB9PFRt8NT-2cmEM_x8M2joRee67WAWkKM75yGWm5hk6gG0xA8Q7kAVg");
    background-size: cover;
    font-family: 'Eczar', serif;
}

h1 {
    text-align: center;
    margin: 10px;
}

.chessboard {
	margin: auto;
	max-width: 650px;
	max-height: 650px;
	width: 100vw;
	height: 100vw;
	background: black;
    box-shadow: 1px 1px 8px 8px white;
	display: flex;
    justify-content: center;
	align-items: center;
}

.container {
	max-width: 640px;
	max-height: 640px;
	width: 100vw;
	height: 100vw;
	background-image: url("https://media.istockphoto.com/vectors/white-wood-texture-vector-illustration-wooden-horizontal-light-plank-vector-id1224688839?b=1&k=6&m=1224688839&s=612x612&w=0&h=PO4aki6Ck_mAjSBDlGV2lrQAwdcphVeM8wrHu3XgCQQ=");
    background-size: cover;
	margin: auto;
	position: relative;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-wrap: wrap;
}

.container div:hover {
    box-shadow: 1px 1px 8px 8px black;
}

.white img, .black img {
	width: 80%;
}

.white {
	background: rgba(227, 227, 227, 0.4);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 12.5%;
	height: 12.5%;
}

.black {
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 12.5%;
	height: 12.5%;
}