@import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans&display=swap');

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

img {display: block;
}

html {
	font-size: 24px;
}		
body {
	background-color: #030a0b;
	color: #98e0ea;
	padding: 0.5rem;
	font-family: 'Bubblegum Sans', sans-serif;
}

/* .art-images{width: 100%;} */

.art-images img {
	animation: tweenImages 2s;
	width: 100%;
	height: auto;
	min-width: 50px;
	border: 5px solid #434343;
}

@keyframes tweenImages {
	from {
		opacity: 0;
/* 		transform: rotate(180deg); */
		border: 5px solid #000000;
/* 		width: 0%; */
	}
	to {
		opacity: 1;
/* 		transform: rotate(0deg); */
		border: 5px solid #434343;
/* 		width: 100%; */
	}
}


@keyframes tweenBoxes {
	from {
		grid-auto-rows: minmax(500px, auto);
	}
	to {
		grid-auto-rows: minmax(150px, auto);
	}
}

.container {
	
	display: grid;
	grid-auto-flow: column;
	grid-auto-rows: minmax(150px, auto) ;
/* 	align-items: center; */

}
.cont{
/* 	animation: tweenBoxes 3s; */
	display: grid;
	grid-auto-flow: column;
	grid-auto-rows: minmax(150px, auto) ;
	
}

.highlight {
	color: #b477d3;
}
.box {
	background-color: #000;
	color: #edb05d;
	font-size: 1.5rem;
	padding: 0.5rem;
	
	display: grid;
	align-content: center;
	justify-content: center;

}