:root {
	height: 100%;
}

#pointer {
	width: 10px;
	position:absolute;
	display: block;
	height: 10px;
	background-color: green;
	content: " ";
	left: 10px;
	top: 40px
}

a {
	all: unset;
	cursor: pointer;
}

body {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	background-image: linear-gradient(to bottom, #101010, #000);
	height: 100%;
}

main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	height: 100%;
	gap: 1rem;
}

.card {
	width: 60%;
	background-color: gray;
	border: 1pt black solid;
	border-radius: 1em;
}

.card:hover {
	box-shadow: 0 0 1rem white ;
	border: 2pt white solid;
	background-color: darkgray;
}

.cardTitle {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: space-around;
	gap: 1rem;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2rem;
}

.card a {
	display: block;
	height: 100%;
	width: 100%;
}


.card .img {
	max-width: 4rem;
}

@media screen and (max-width: 900px) {
	#pointer {
		background-color: orange;
	}
	.card {
		width: 90%;
		font-size: 2rem;
	}
}

@media screen and (min-width: 2000px) {
	#pointer {
		background-color: red;
	}
	
	.card {
		width: 40%;
		font-size: 3rem;
	}

}