main {
	display: grid;
	grid-template-columns: 33% auto 33%;
	grid-template-rows: 30vw 30vw 30vw;
	grid-gap: 0vw;
	padding: 1vw;
	grid-template-areas:
		'about about chat'
		'projects art art'
		'rants rants updates';
	box-sizing: border-box;
	margin-bottom: 3vw;
	max-width: var(--main-width);
	min-width: var(--main-width);
	background-size: cover;
	background-color: var(--main-bg-color);
	border: var(--border-w) dashed var(--border-color-alt);
	border-radius: var(--alt-border-radius);
	transition: 150ms ease-in-out;

}

main:hover {

	border-color: var(--border-color);
}

#about {
	grid-area: about;
}



#about p {
	overflow: visible;
}

#chat {
	grid-area: chat;
	display: flex;
	flex-direction: column;
}

#chatbox {
	flex-grow: 1;
}

#projects {
	grid-area: projects;
}

#art {
	grid-area: art;
}

#updates {
	grid-area: updates;
}

#rants {
	grid-area: rants;
}

.proj-link {
	display: flex;
	flex-direction: column;
	align-content: center;
	height: 100%;
}

.proj-link>a>img {
	width: 100%;
}

.proj-link>a>* {
	margin: .5vw 0 ;
}

.proj-link>a:hover {
	transform: scale(1.05) !important;
}

.proj-link>a>img:hover {
	transform: scale(1.00) !important;
}

.proj-link:hover>a>img {
	border-color: var(--border-color);
	animation-name: none !important;
}

.card>h2>.iconify{
	margin-right:1vw !important;
}