/* CSS (Cascading Style Sheet) is where we design our website and its contents. */
/* htmlcolorcodes.com */
/* codeshare.io */


body {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
}

.container {
	box-sizing: border-box;
	margin: 0 auto;
}

.header-container {
	display: flex;
	justify-content: center;
	
	max-width: 100%;
	width: 400px;
	margin: 0 auto;
}

.share-button-container a img {
	width: 30px;
	height: auto;
	margin-left: 5px;
}

.score-container,
.share-button-container {
	margin: 0 5px;

	display: flex;
	flex-direction: column;

	width: 50%;
	height: 57%;

	font-weight: 600;
}
#score {
	font-weight: bold;
	font-size: 26px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
.share-button-container {
	align-items: flex-end;
}
.score-container {
	align-items: flex-start;
}
.share-label,
.score-label {
	margin-bottom: 2px;
}

hr {
	max-width: 480px;
}

#board {
	width: 400px;
	height: 400px;
	background-color: #b7dff2;
	border: 6px solid #b7dff2;
	margin: 0 auto;

	display: flex;
	flex-wrap: wrap;
}

.tile {
	position: relative;
	display: inline-block;

	width: 90px;
	height: 90px;
	border: 5px solid #b7dff2;

	font-size: 40px;
	font-weight: bold;

	display: flex;
	justify-content: center;
	align-items: center;

	margin: 0;
	paddin: 0;

	/* custom */
	background-color: lightgray;
}

.x2 {
	background-color: #eee4da;
	color: rgba(0, 0, 0, 0);
	background-size: 100% 100%;
	background-image: var(--background-image-url-02);
}
.x4 {
	background-color: #ece0ca;
	color: rgba(0, 0, 0, 0);
	background-size: 100% 100%;
	background-image: var(--background-image-url-04);
}
.x8 {
	background-color: #f4b17a;
	color: rgba(0, 0, 0, 0);
	background-size: 100% 100%;
	background-image: var(--background-image-url-08);
}
.x16 {
	background-color: #f59575;
	color: rgba(0, 0, 0, 0);
	background-size: 100% 100%;
	background-image: var(--background-image-url-16);
}
.x32 {
	background-color: #f75c5f;
	color: rgba(0, 0, 0, 0);
	background-size: 100% 100%;
	background-image: var(--background-image-url-32);
}
.x64 {
	background-color: #f65d3b;
	color: rgba(0, 0, 0, 0);
	background-size: 100% 100%;
	background-image: var(--background-image-url-64);
}
.x128 {
	background-color: #edce71;
	color: rgba(0, 0, 0, 0);
	background-size: 100% 100%;
	background-image: var(--background-image-url-128);
}
.x256 {
	background-color: #edcc63;
	color: rgba(0, 0, 0, 0);
	background-size: 100% 100%;
	background-image: var(--background-image-url-256);
}
.x512 {
	background-color: #edc651;
	color: rgba(0, 0, 0, 0);
	background-size: 100% 100%;
	background-image: var(--background-image-url-512);
}
.x1024 {
	background-color: #eec744;
	color: rgba(0, 0, 0, 0);
	background-size: 100% 100%;
	background-image: var(--background-image-url-1024);
}
.x2048 {
	background-color: #eec230;
	color: rgba(0, 0, 0, 0);
	background-size: 100% 100%;
	background-image: var(--background-image-url-2048);
}
.x4096 {
	background-color: #fe3d3d;
	color: rgba(0, 0, 0, 0);
	background-size: 100% 100%;
	background-image: var(--background-image-url-4096);
}
.x8192 {
	background-color: #ff2020;
	color: rgba(0, 0, 0, 0);
	background-size: 100% 100%;
	background-image: var(--background-image-url-8192);
}


/* animation */
@keyframes slide-from-right {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes slide-from-left {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes slide-from-top {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(0);
	}
} 
@keyframes slide-from-bottom {
		0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(0);
	}
}


/* image variables */
:root {
	--background-image-url-02: url('./images/01-zuitt_2.png');
	--background-image-url-04: url('./images/02-zuitt_4.png');
	--background-image-url-08: url('./images/03-zuitt_8.png');
	--background-image-url-16: url('./images/04-zuitt_16.png');
	--background-image-url-32: url('./images/05-zuitt_32.png');
	--background-image-url-64: url('./images/06-zuitt_64.png');
	--background-image-url-128: url('./images/07-zuitt_128.png');
	--background-image-url-256: url('./images/08-zuitt_256.png');
	--background-image-url-512: url('./images/09-zuitt_512.png');
	--background-image-url-1024: url('./images/10-zuitt_1024.png');
	--background-image-url-2048: url('./images/11-zuitt_2048.png');
	--background-image-url-4096: url('./images/12-zuitt_4096.png');
	--background-image-url-8192: url('./images/13-zuitt_8192.png');
}


/* RESPONSIVE LAYOUT */
@media (max-width: 415px) {

	#board {
		margin-top: 8px;
		width: 90vw;
		max-width: 400px;
		height: 90vw;
		max-height: 400px;
	}
	.tile {
		box-sizing: border-box;
		width: 25%;
		height: 25%;
	}
	h1 {
		font-size: 50px;
		font-weight: 700;
	}