/* ELEMENT STYLING */

body {
	background-color: #f5f5f5;
	color: #303030;
	font-family: Courier New;
	font-size: 1.2rem;
	padding: 15px;
	margin: 10px;
}
h2 {
	font-size: 1.5rem;
}
a:link {
	color: black;
}
a:visited {
	color: black;
}
summary {
	cursor: pointer;
}


/* NAVIGATION */

section {
	display: none; /* Sections hidden by default */
	width: 75%;
}

section#reset { /* Always shows the disclaimer */
	display: block;
}

section:target { /* Targets section's anchor (href="#example") when clicked */
	display: block;
}


/* GRID DISPLAY */

.grid-container {
	display: grid;
	grid-template-columns: auto auto auto auto; /* 4 in a row */
	column-gap: 100px;
}
.grid-item {
	width: 100%;
	text-align: center;
}

.head {
	width: 80%;
	transition: width .8s;
}

/* IMAGE GO BIG WOW */

.head:hover {
	width: 85%;
	transition: width .8s;
	cursor: pointer;
}


/* ACCESSIBILITY */

@media screen and (max-width: 600px) {
	.grid-container {
		grid-template-columns: auto auto;
	}
	
	.grid-item {
		height: 100%;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.head {
		width: 80%;
	}

	.head:hover, .head:focus {
		width: 80%;
		cursor: pointer;
	}
}