/** 

YOURSPACE PAGE - made by Nyar @ https://fear.garden

I originally made this for personal use in 2019, and I've been messing around with it ever since. Quality is a bit meh, but hey, it works!

Feel free to customise to your heart's content.

**/

/** general **/
body, html {
	margin: 0;
	padding: 0;
}
body {
	background: #610d18;
	color: #000;
}
body, table {font: 14px sans-serif;}
a {color: #140103;}
h1, h2, h3 {background: #610d18;}
h1, h2, h3, th {
	box-sizing: border-box;
	color: #000;
	margin: 0;
	padding: 2px 4px;
}
h1, h2 {
	font-size: 16px;
	width: 100%;
}
h3 {
	display: inline-block;
	font-size: 15px;
	margin: 2px 3px; 
	padding: 2px 4px;
}
img, iframe {max-width: 100%;}
table {width: 100%;}
th {
	background: #610d18;
	color: #140103;
	text-align: left;
	width: auto;
}

/** class **/
.box {
	background: #e84646;
	border: #140103 2px solid;
	margin: 10px 0;
	padding: 3px;
}
.center {text-align: center;}
.container, .footer, .header {
	background: #fff;
	box-sizing: border-box;
	border-left: #3b040b 2px solid;
	border-right: #3b040b 2px solid;
	box-sizing: border-box;
	margin: 0 auto;
	width: 850px;
}
.container {
	height: 100%;
	padding: 0 1em 1em;
}
.columns {
	display: grid;
	grid-column-gap: 1em;
	grid-template-columns: 292px auto;
	width: 100%;
}
.curve {border-radius: 7px;}
.footer, .header {
	background: #610d18;
	box-sizing: border-box;
	font-family: sans-serif;
}
.footer {
	border-top: #3b040b 2px solid;
	padding: 10px 30px 10px;
}
.header {
	border-bottom: #3b040b 2px solid;
	padding: 0 30px 10px;
}
.header span {
	padding: 0 15px;
}
.header .title {
	color: #000;
	font-size: 200% ;
	text-align: left;
	text-decoration: none;
}
.profimg {
	float: left;
	padding: 5px 5px 0 0;
}

/** id **/
#contact a {
	font-weight: bold;
	text-decoration: none;
}
#contact a::before {
	content: url('https://i.pinimg.com/736x/c0/d9/40/c0d940ead25098c316c6a5e3269776b3.jpg');
	padding: 0 1em 0 0;
}
#interests td, #details td {width: 70%;}
#url span {font: 12px monospace;}

/** Small screens **/
@media (max-width: 865px) {
	.container, .navbar, .footer, .header {width: 100%;}
	.columns {grid-template-columns: 100%;}
	.box {margin: 1em 0;}
	.box:last-child {margin: 0;};
}
@-webkit-keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	
	@-webkit-keyframes snowflakes-shake {
		0%,
		100% {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}
		50% {
			-webkit-transform: translateX(80px);
			transform: translateX(80px)
		}
	}
	
	@keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	
	@keyframes snowflakes-shake {
		0%,
		100% {
			transform: translateX(0)
		}
		50% {
			transform: translateX(80px)
		}
	}
	
	.snowflake {
		position: fixed;
		top: -10%;
		z-index: 9999;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-animation-name: snowflakes-fall, snowflakes-shake;
		-webkit-animation-duration: 10s, 3s;
		-webkit-animation-timing-function: linear, ease-in-out;
		-webkit-animation-iteration-count: infinite, infinite;
		-webkit-animation-play-state: running, running;
		animation-name: snowflakes-fall, snowflakes-shake;
		animation-duration: 10s, 3s;
		animation-timing-function: linear, ease-in-out;
		animation-iteration-count: infinite, infinite;
		animation-play-state: running, running
	}
	
	.snowflake:nth-of-type(0) {
		left: 1%;
		-webkit-animation-delay: 0s, 0s;
		animation-delay: 0s, 0s
	}
	
	.snowflake:nth-of-type(1) {
		left: 10%;
		-webkit-animation-delay: 1s, 1s;
		animation-delay: 1s, 1s
	}
	
	.snowflake:nth-of-type(2) {
		left: 20%;
		-webkit-animation-delay: 6s, .5s;
		animation-delay: 6s, .5s
	}
	
	.snowflake:nth-of-type(3) {
		left: 30%;
		-webkit-animation-delay: 4s, 2s;
		animation-delay: 4s, 2s
	}
	
	.snowflake:nth-of-type(4) {
		left: 40%;
		-webkit-animation-delay: 2s, 2s;
		animation-delay: 2s, 2s
	}
	
	.snowflake:nth-of-type(5) {
		left: 50%;
		-webkit-animation-delay: 8s, 3s;
		animation-delay: 8s, 3s
	}
	
	.snowflake:nth-of-type(6) {
		left: 60%;
		-webkit-animation-delay: 6s, 2s;
		animation-delay: 6s, 2s
	}
	
	.snowflake:nth-of-type(7) {
		left: 70%;
		-webkit-animation-delay: 2.5s, 1s;
		animation-delay: 2.5s, 1s
	}
	
	.snowflake:nth-of-type(8) {
		left: 80%;
		-webkit-animation-delay: 1s, 0s;
		animation-delay: 1s, 0s
	}
	
	.snowflake:nth-of-type(9) {
		left: 90%;
		-webkit-animation-delay: 3s, 1.5s;
		animation-delay: 3s, 1.5s
	}
	
	.snowflake:nth-of-type(10) {
		left: 25%;
		-webkit-animation-delay: 2s, 0s;
		animation-delay: 2s, 0s
	}
	
	.snowflake:nth-of-type(11) {
		left: 65%;
		-webkit-animation-delay: 4s, 2.5s;
		animation-delay: 4s, 2.5s
	}