@keyframes flashlink{
	0%{
		color: white;
	}
	49%{
		color: white;
	}
	50%{
		color: blue;
	}
	99%{
		color: blue;
	}
}
.cssloading{
	display: none;
}
.headergif{
	max-width: 100%;
	padding-bottom: 10px;
}
.song>img{
	max-width:100%;
}
.song>span{
	display: block;
}
.song{
	vertical-align: top;
	display: inline-block;
	text-align: center;
	padding: 10px;
	margin: 1px;
	background-color: #101010;
}
@media screen and (min-width: 602px){
	.song{
		width: 15%;
	}
	html{
		font-size: 19px;
		background-color: black;
	}
}
@media screen and (max-width: 601px){
	.song{
		width: 40%;
	}
	html{
		font-size: 15px;
		background-color: black;
	}
}
html{
	margin: 0;
	padding: 0;
}
body{
	background: url("/assets/cats.gif");
	background-attachment: fixed;
	color: #00DDFF;
}
p{
	font-size: 1rem;
}
#introdiv{
	background: url("/assets/sparkle.gif");
	background-size: 100px 100px;
	background-attachment: fixed;
	display: flex;
	justify-content: center;
}
#introdiv>p{
	text-align: center;
	background-color: black;
	display: block;
}
.project{
	display: flex;
	flex-direction: column;
	gap: 0px;
	background-attachment: fixed;
	padding-bottom: 10px;
}
.project>div{
	display: flex;
}
.projecttitle{
	width: 100%;
	flex-direction: row;
	align-items: flex-start;
}
.projectcontent{
	margin-top: 10px;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
}
.projecttitle>a{
	animation-name: flashlink;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	background-color: grey;
	white-space: nowrap;
	font-size:30px;
}
.projecttitle>span{
	color: white;
	background-color: black;
}
.projectcontent>p{
	margin-top: 0px;
	background-color: black;
}
.projectcontent>p>a{
	color: white;
}
@media screen and (max-width: 601px){
	.projectcontent{
		align-items: center;
	}
	.projectcontent>p{
		max-width: 100%;
	}
	.projectcontent>img{
		max-width: 100%;
		max-height: 200px;
	}
}
@media screen and (min-width: 602px){
	.projectcontent{
		flex-direction: row;
	}
	.projectcontent>img{
		max-width: 200px;
		display: inline-block;
		vertical-align: middle;
	}
	.right>.projectcontent>img{
		order: 1;
		margin-left: auto;
		flex-shrink: 0;
	}
	.right>.projectcontent>p{
		order: 0;
	}
	.left>.projectcontent>img{
		order: 0;
		margin-right: auto;
		flex-shrink: 0;
	}
	.left>.projectcontent>p{
		order: 1;
	}
}
#dRive{
	background: url("/assets/lava.gif");
	color: lime;
}
#dedoid{
	background: url("https://daspeller4.xyz/drive/file/1/bc042d820c16ceb5993d70366c7ae65b/dedoid.gif");
	color: yellow;
}
#dUI{
	background: url("/assets/duistripes.gif");
	color: orange;
}
#dEngine{
	background: url("/assets/rainbow.gif");
	color: lightblue;
}
#mm{
	background: url("/assets/mm.gif");
	color: #329afe;
}
#jays{
	background: url("https://daspeller4.xyz/drive/file/1/39f06400a328e7f4a491ff1dbb9c9087/50%20Great%20Danes%20Who%20Don%C3%A2%C2%80%C2%99t%20Understand%20How%20BIG%20They%20Are%20(New%20Pics).jpg");
	background-size: 25px 300px;
	animation-name: fatrat;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	color: pink;
}
@keyframes fatrat{
	0%{
		background-size: 25px 300px;
	}
	30%{
		background-size: 25px 300px;
	}
	50%{
		background-size: 200px 25px;
	}
	80%{
		background-size: 200px 25px;
	}
	100%{
		background-size: 25px 300px;
	}
}
#contact>a{
	color: pink;
	font-size:20px;
}
@keyframes sweeping{
	0%{
		color: cyan;
	}
	33%{
		color: magenta;
	}
	66%{
		color: yellow;
	}
}
#contact>span{
	animation: sweeping 1s ease infinite;
	font-size:20;
}
@keyframes rainbowtext{
	0%{
		color: #FF1D1D;
	}
	25%{
		color: #1DFF1D;
	}
	50%{
		color: #1D1DFF;
	}
	75%{
		color: #FF1DFF;
	}
	99%{	
		color: #FF1D1D;
	}
}
#contact>h1{
	animation-name: rainbowtext;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	display: inline;
}
#music>a{
	animation-name: flashlink;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	background-color: grey;
	font-size:30px;
}