* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

:root {
	--tan-color: rgb(222,206,180);
	--red-color: rgb(136,49,42);
	--dark-red-color: rgb(95,22,16);
	--tile-size: 5rem;
	--negative-tile-size: -5rem;
	--text-size: 4rem;
}

body {
	background: no-repeat center/100% 100% url('./images/background.jpg');
	height: 100vh;
	width: 100vw;
	display: grid;
	grid: "body" 1fr / 1fr;
	place-items: center;
}

#envelope-body {
	position: relative;
	z-index: 5;
	display: grid;
	grid-area: body;
	height: calc((var(--tile-size) * 4) + 1rem);
	width: calc((var(--tile-size) * 4) + 1rem);
	box-shadow: 0.25rem 0.25rem 0.25rem rgba(0, 0, 0, 0.5);
	grid: "env-top" 1fr
		  "env-bottom" 1fr / 1fr;
}

#envelope-bottom {
	grid-area: env-bottom;
	background-color: var(--dark-red-color);
}

#envelope-button {
	position: absolute;
	top: calc(50% - 1.5rem);
	left: calc(50% - 1.5rem);
	background: radial-gradient(gold 50%, darkgoldenrod);
	border-radius: 50%;
	box-shadow: 0.25rem 0.25rem 0.25rem rgba(0, 0, 0, 0.5);
	padding: 1.5rem;
	cursor: pointer;
}

#envelope-top {
	grid-area: env-top;
	background-color: var(--dark-red-color);
	width: 0;
	height: 0;
	border-radius: 0.25rem;
	border: calc(((var(--tile-size) * 4) + 1rem) / 2) solid transparent;
	border-top-color: var(--red-color);
}

#slider-body {
	grid-area: body;
	height: calc((var(--tile-size) * 4) + 0.5rem);
	width: calc((var(--tile-size) * 4) + 0.5rem);
	padding: 0.25rem;
	border-radius: 0.25rem;
	box-shadow: 0.25rem 0.25rem 0.25rem rgba(0, 0, 0, 0.5);
	background: linear-gradient(to bottom right, #e0e0e0, #747474);
	display: grid;
	grid: var(--tile-size) var(--tile-size) var(--tile-size) var(--tile-size) /
		  var(--tile-size) var(--tile-size) var(--tile-size) var(--tile-size);
}

.slider-tile {
	width: 100%;
	height: 100%;
	padding: 0.25rem;
	border-radius: 0.25rem;
	color: gray;
	box-shadow: inset 0 0 0.25rem rgba(0, 0, 0, 0.5);
	display: grid;
	place-items: center;
	cursor: pointer;
	user-select: none;
}

.tile-text {
	font-size: var(--text-size);
	font-family: 'Kosugi Maru', sans-serif;
	background: linear-gradient(to bottom right, #e0e0e0, #747474);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.slider-tile:nth-child(even) {
	background-color: var(--tan-color);
}

.slider-tile:nth-child(odd) {
	background: linear-gradient(to bottom right, var(--red-color), var(--dark-red-color));
}

.move-down {
	margin-top: var(--tile-size);
	transition: margin-top 0.1s ease-in;
}

.move-up {
	margin-top: var(--negative-tile-size);
	transition: margin-top 0.1s ease-in;
}

.move-right {
	margin-left: var(--tile-size);
	transition: margin-left 0.1s ease-in;
}

.move-left {
	margin-left: var(--negative-tile-size);
	transition: margin-left 0.1s ease-in;
}