body {
	background-color: black;
	color: white;
	font-family: monospace;
	margin: 0;
	padding: 0;
}

/* container 1 */
#container {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.container-1 {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

.box {
	width: 100px;
	height: 100px;
	background-color: rgb(85, 100, 109);
	border-radius: 20px;
}

@media (max-width: 600px) {
	.container-1 {
		flex-direction: column;
		height: auto;
	}
	.box {
		width: 50px;
		height: 50px;
		border-radius: 7px;
	}
}

.green {
	background: #abf595;
	background: linear-gradient(
		90deg,
		rgba(171, 245, 149, 1) 0%,
		rgba(98, 179, 71, 1) 50%
	);
}

.blue {
	background: #74d6fc;
	background: linear-gradient(
		90deg,
		rgba(116, 214, 252, 1) 0%,
		rgba(42, 156, 201, 1) 50%
	);
}

.red {
	background: #db9460;
	background: linear-gradient(
		90deg,
		rgba(219, 148, 96, 1) 0%,
		rgba(181, 87, 58, 1) 50%
	);
}

.yellow {
	background: #d1ed61;
	background: linear-gradient(
		90deg,
		rgba(209, 237, 97, 1) 0%,
		rgba(217, 198, 74, 1) 50%
	);
}

.purple {
	background: #db95f5;
	background: linear-gradient(
		90deg,
		rgba(219, 149, 245, 1) 0%,
		rgba(133, 50, 161, 1) 50%
	);
}