/** 

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 **/
a {
  color: black;
  font-weight: bold;
  background: linear-gradient(90deg, red, orange, yellow, green, blue, purple);
  background-clip: text;
  -webkit-background-clip: text;
  margin: auto;
}

a:hover {
  color: transparent;
  transition: 500ms ease;
}

#body {
  font-size: 2em;
  display: flex;
  height: 100vh;
  align-items: center;
}


body, html {
	margin: 0;
	padding: 0;
}
body {
	background:  url(https://i.pinimg.com/564x/ac/ca/7d/acca7d70083fb7b7f7a37123ca6c011b.jpg);
	color: #A7BEB1;
}
body, table {font-family: courier new;}
a {color: #AEC2B5;}
h1, h2, h3 {background:#1B231F;}
h1, h2, h3, th {
	box-sizing: border-box;
	color: #A7BEB1;
	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: #38433D;
	color: #A7BEB1;
	text-align: left;
	width: auto;
}


/** class **/
.box {
	background: #28342C;
	opacity: 0.7;
	border: #2F3C32 2px solid;
	margin: 10px 0;
	padding: 3px;
}
.center {text-align: center;}
.container, .footer, .header {
	background: url(https://i.pinimg.com/564x/4b/24/b9/4b24b9e895a54bd43777210e3f4a50f2.jpg);
	box-sizing: border-box;
	border-left: #2F3C32 2px solid;
	border-right: #2F3C32 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: #20312A;
	box-sizing: border-box;
	font-family: Courier New;
}
.footer {
	border-top: #2F3C32 2px solid;
	padding: 10px 30px 10px;
}
.header {
	border-bottom: #2F3C32 2px solid;
	padding: 0 30px 10px;
}
.header span {
	padding: 0 15px;
}
.header .title {
	color: #A7BEB1;
	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://placehold.co/16');
	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;};
	</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/LsZ0qZekDek//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>
<img src="https://64.media.tumblr.com/57c0ea3339d6cf128e29efbe7a7efd48/d23af02b79448041-b1/s540x810/3676bef6d02297b0a53c63728833296de98f66d3.gifv"/>
<style>body { cursor: url('https://www.rw-designer.com/cursor-view/15919.png'), auto; }</style>
<style>
/* replace with cd image that has transparent background. must be 150px by 150px. */
:root {
--cd-image: url('https://fluorescent-lights.neocities.org/Digital-CD-Disk-Vector-Transparent-PNG.png');
}
.profimg {
position: relative;
width: 183px;
filter: drop-shadow(0 0 0.25rem gray);
}
.profimg:after {
content: "";
background: url('https://fluorescent-lights.neocities.org/f0rzNHe.png'), linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2), 40%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6));
background-size: contain, cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.profimg:before {
content: "";
background: var(--cd-image);
position: absolute;
top: 5px;
left: -20px;
width: 150px;
height: 150px;
background-repeat: no-repeat;
z-index: -1;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear; 
transition: left ease 0.5s;
}
.profimg:hover:before {
left: -75px;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.profimg .pfp-fallback {
float: right;
width: 163px;
height: 160px;
border: none;
}
.general-about .profimg img {
max-width: inherit;
}
</style>
}