* {
	box-sizing: border-box;
}
body {
	background-color: #2e2e2e;
}
p, li {
	color: white;
	font-family: sans-serif;
}
.header {
	grid-area: header;
	background-color: black;
	text-align: center;
	color: #ffffff;
	border-radius: 5px;
}
.navbar {
	grid-area: navbar;
	background-color: black;
	color: black;
	display: flex;
	padding: 5px;
	border-radius: 5px;
	justify-content: space-evenly;
}
.navitem {
	text-decoration: none;
	color: white;
	text-align: center;
	font-family: sans-serif;
	font-size: 75%;
	
	animation-name: linkd;
	animation-duration: 3s;
	animation-iteration-count:infinite;
	
}
.main {
	grid-area: main;
	background-color: black;
	padding: 5px;
	border-radius: 5px;
	position: relative;
	display: inline;
}
.sidebar {
	grid-area: sidebar;
	background-color: black;
	padding: 10px;
	
	border-radius: 5px;

}
.sidebarbreak {
	font-size: 20px;
	color: white;
	font-family: sans-serif;
	margin: 10px;
	text-align: center;
	float: center;
}
.grid-container {
	display: grid;
	grid-template-areas:
    	'header'
    	'navbar'
    	'main'
    	'sidebar';
	
	gap: 10px;  
}
.avatar {
	width: 100px;
	height: 100px;
	float: left;
	margin: 5px;
	margin-right: 25px;
	
}
.pseudofooter {
	position: absolute; bottom: 0px;
}
a {
	font-family: sans-serif;
	text-decoration: none;
	color: white;

	animation-name: linkd;
	animation-duration: 3s;
	animation-iteration-count:infinite;
}
abackup:hover {
	animation-play-state: paused;
	color: gray;
	
}

.gaytext {
	display: inline;
	float: center;
	text-align: center;
	font-family: sans-serif;
	padding-right: 30px;
	font-size: 200%;
	background: linear-gradient(
	    to right,
	    #ef5350,
	    #e4356f,
	    #b60e75,
	    #7e57c2,
	    #2196f3,
	    #43a047,
	    #eeff41,
	    #f9a825
	);
	background-size: 400%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: tecza 10s infinite;
}





@keyframes linkd {
	0% {color: white;}
	50% {color: gray;}
	100% {color: white;}
}
@keyframes tecza {
	0% {
    background-position: 0% 50%;
	}
	50% {
    background-position: 100% 50%;
	}
	100% {
    background-position: 0% 50%;
	}
}





@media (min-width: 600px) {
	.header {grid-area: 1 / span 4;}
	.navbar {grid-area: 1 / span 6;}
	.main {grid-area: 1 / span 6;}
	.sidebar {grid-area: 1 / span 6;}


}

@media (min-width: 768px) {
	.header {grid-area: 1 / span 6;}
	.navbar {grid-area: 2 / span 6;}
	.main {grid-area: 3 / span 5;}
	.sidebar {grid-area: 3 / span 1}

}