body {
	width: 75%;
	background-color: #f5f5f5;
	color: #303030;
	font-family: Courier New;
	font-size: 1.2rem;
	padding: 15px;
	margin: 10px;
}
a:link {
	color: black;
}
a:visited {
	color: black;
}

.grid-container {
	display: grid;
	grid-template-columns: auto auto auto;
	padding: 10px;
	column-gap: 100px;
}
.grid-item {
	height: 350px;
	width: 400px;
	text-align: center;
	margin: auto;
}

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

#personal, #list, #fun, #interesting, #useful {
	display: none;
}

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