@charset "UTF-8";
/* CSS Document */

		@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;1,300&family=Zen+Kaku+Gothic+Antique:wght@300&display=swap');
		
/*		*{margin:0; padding:0; transition:ease 1s all;}
*/		html,body{height:100%; width:100%; margin:0; padding:0;}
		html{scroll-behavior: smooth; animation: nextup 2s .75; overflow-x:hidden;}
		@keyframes nextup{
			0%{opacity:0; background-color:black;/*transform:translateX(100%)*/}
			100%{opacity:1; background-color:transparent;/*transform:translateX(0)*/}
		}
		body{
			font-family: 'Roboto', sans-serif;
			font-family: 'Zen Kaku Gothic Antique', sans-serif;
			cursor:default;
		}


/*SCROLL*/
body::-webkit-scrollbar{
    width:1.1em;
}

body::-webkit-scrollbar-track{
    -webkit-box-shadow: none;
	box-shadow:none;
	background:#070207;
}
 
body::-webkit-scrollbar-thumb{
  background-color: limegreen;
  outline: none;
	}


#fatroll::-webkit-scrollbar{
    width:1.1em;
}

#fatroll::-webkit-scrollbar-track{
    -webkit-box-shadow: none;
	box-shadow:none;
	background:#070207;
}
 
#fatroll::-webkit-scrollbar-thumb{
  background-color: goldenrod;
  outline: none;
	}

/*END OF SCROLL*/
		.group4{cursor:pointer;}
		/*.aboutst45{display:none;}*/
		nav{background-color:transparent; position:fixed; right:1%; top:2%; z-index: 5000; width:150px;}
		nav ul {list-style: none;background-color:black; padding:2em 1.2em 3em; margin-top:0; }
		nav ul li a{margin-left:.25em; color:#A1A6F6; transition: .25s ease all; text-decoration:none; font-size:100%; line-height:0;}
		nav ul li a:hover{color:#C9CBE7}
		.blackbar{height:2em; margin-top:.5em;
			background:goldenrod; /*radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);*/ border-top:3px solid gold; border-bottom:3px solid gold; opacity:.75;}
		.eraser{text-align: center; background:green; height:5em; border-bottom-right-radius: 50%;border-bottom-left-radius: 50%;}
		.closepencil{margin-top:.5em; border-radius:50%; width:1.5em; height:1.5em; background:rgba(0,0,0,.75); color:green; font-size:2em; outline:none; border:2px #1D3318 solid; transition:ease all .25s; cursor:pointer; animation:imfading 1s infinite alternate;}
		
		.closepencil:hover{color:aliceblue; border:2px solid aliceblue;}
		
		
		#gathering{position:fixed; width:148px}
		.adios{right:-40%; transition:.5s all ease}
		.hola{right:15px; transition:.5s all ease}
		
		header{
			width:100%;
			height:100%;
			position: relative;
			overflow:hidden;
		}
		#pyrmds{width:150px; height:auto; cursor:pointer;}
		#shroom {height:100%; position:absolute; bottom:0; left:50%; transform: translateX(-50%); width:auto;}
		#shroom-bg {width:100vw; height:100vh;position:absolute; right:-38%; transform: none;}
		
		#shroom svg{height:100%;}
		#shroom-bg svg {height:100%;}

.bigup{font-size:1.2em;}
		
/*-------------------BIO----------------------*/
#bio{background:#F0F6F7;}
#bio h1{font-size:3em;}
.bio-box{padding:2.5% 5% 5% 5%;}

		/*-----shroomations-----*/
			#MC-wheel{
				animation: rollen 1s linear infinite;
				transform-origin: 3848.0737px 748.8896px;
			}

			@keyframes rollen{
				0%{transform:rotate(0deg);}
				100%{transform:rotate(360deg);}
			}
		
			#maroon-underglow{
				animation: underglow 5s ease infinite;
			}

			@keyframes underglow{
				0%{opacity:0;}
				50%{opacity:1;}
				100%{opacity:0;}
			}
		
		/*-----whale harp-----*/
		#note1, #note2, #note3, #note4, #note5, #note6, #note7, #note8, #note9, #note10, #note11 {animation: portal 11s infinite;}
		@keyframes portal{
			0%{fill:#BD9B2F;}
			5.45454545455%{fill:#29AAE2;}
			5.45454545456%{fill:#BD9B2F;}
			100%{fill:#BD9B2F;}
		}
		
		#note2{animation-delay:.25s;}
		#note3{animation-delay:.5s;}
		#note4 {animation-delay:.75s;}
		#note5 {animation-delay:1s;}
		#note6 {animation-delay:1.25s;}
		#note7 {animation-delay:1.5s;}
		#note8 {animation-delay:1.75s;}
		#note9 {animation-delay:2s;}
		#note10 {animation-delay:2.25s;}
		#note11 {animation-delay:2.5s;}
		
			#APPLE-LEAF{
				animation: twitch 2s alternate ease infinite;
				transform-origin: 3676.4437px 728.9995px;
			}

			@keyframes twitch{
				0%{transform:rotate(0deg);}
				100%{transform:rotate(-30deg);}
			}
		
		
		
		/*---------------------GRAPHX STYLES-------------------------------*/
		#graphx{width:100%; height:100vh; position:relative; overflow: hidden;}
		#roots {height:100%; position:absolute; bottom:0; left:50%; transform: translateX(-50%); width:auto;}
		#gfx-bg {height:100%; position:absolute; top:0; left:50%; transform: translateX(-50%); width:auto;}
		#graphx svg{height:100%;}
		#digi {height:100%; position:absolute; bottom:0; left:50%; transform: translateX(-50%); width:auto; z-index:50;}
		
			/*-----graphx orbits-----*/
			
		#DIGITAL-ART, #MERCH, #LOGOS{cursor:pointer;}
		
		.letsgoastro:hover{
		-webkit-animation-play-state: paused;
		-moz-animation-play-state: paused;
		-o-animation-play-state: paused;
		animation-play-state: paused;
		}
		
		.heyyopauseson{
			-webkit-animation-play-state: paused;
			-moz-animation-play-state: paused;
			-o-animation-play-state: paused;
			animation-play-state: paused;
		}
		
		
		
		@keyframes imfading{
			0%{opacity:.5;}
			100%{opacity:1;}
		}
		
		#redphone-glow{
			opacity:0;
			transition:.5s ease all;
			cursor:pointer;
			animation:imfading2 3s alternate infinite;
		}
		@keyframes imfading2{
			0%{opacity:0;}
			100%{opacity:1;}
		}
		#redphone-glow:hover{opacity:1; cursor:pointer;}
			
		
		
		.letsgoastro{
				animation: orbit linear infinite;
				transform-origin: 732.9902px 575.825px;
				transform-origin: bottom center;
			}

			@keyframes orbit{
				0%{transform:rotate(0deg);}
				100%{transform:rotate(360deg);}
			}


			.astro1{
				animation-duration: 54s
			}

			.astro2{
				animation-duration: 48s
			}

			.astro3{
				animation-duration: 33s
			}
		
		
		/*-------------------PEN & INK----------------------*/
		#pen-ink{height: auto; width:100%;}
		#pen-ink svg{width:100%;}
		
		#ink1-hover, #ink2-hover, #ink3-hover, #ink4-hover, #ink5-hover, #ink6-hover, #ink7-hover, #ink8-hover{
			opacity:0; transition: .25s ease all;
		}
		
		#ink1-hover:hover, #ink2-hover:hover, #ink3-hover:hover, #ink4-hover:hover, #ink5-hover:hover, #ink6-hover:hover, #ink7-hover:hover, #ink8-hover:hover{
			opacity:1;
		}
		
		
		/*-------------------PAINTING----------------------*/
		#painting{height: auto; width:100%;}
		#painting svg{width:100%;}
		
		#paint-hover1, #paint-hover2, #paint-hover3, #paint-hover4, #paint-hover5, #paint-hover6, #paint-hover7, #paint-hover8{
			opacity:0; cursor:pointer; transition: .25s ease all;
		}
		
		#paint-hover1:hover, #paint-hover2:hover, #paint-hover3:hover, #paint-hover4:hover, #paint-hover5:hover, #paint-hover6:hover, #paint-hover7:hover, #paint-hover8:hover{
			opacity:1;
		}
		
		
		/*-------------------WEB----------------------*/
	
		#WEBSITES{
			height:auto;
		}
			.shutthedoorbaby{	position:absolute; 
			top:15px; 
			right:15px;
			background:transparent;
			font-size:25px;
			width:45px;
			border:1px solid #222;
			padding:0 1% .35% 1%;
			color:#222;
			transition:.4s all ease;
			cursor: pointer;
			border-radius:3px;
		}
	 	.shutthedoorbaby:hover {color:#999; border:1px solid #999;}
		
.blackout{background:black;}
		.poppie{
			background-color: rgba(0,0,0,1.00);
			border:1px solid lime;
			border-radius:10px;
/*			width:63%;*/
			color:whitesmoke;
			padding:3% 5% 5% 5%;
/*	
			z-index: 1000;
			
			top:50%;
			left:50%;
			transform:translate(-50%,-64%);
*/			
			box-shadow: 0px 0px 5px 0px #20232E;
			
/*			height:74vh;*/
		}
		
		.poppie>h1{margin-bottom: 10px;}
		.poppie>a {
			width:12%;
			color:#999;
			text-decoration: none;
			padding:.5% 2%;
			display: block;
			border:1px solid #999;
			border-radius:25px;
			text-align: center;
			margin-top:9px;
			transition:.35s all ease;
		}
		
.poppie img{max-width:100%;}
		
		.poppie>a:hover, #submit:hover {
			color:whitesmoke;
			border:1px solid whitesmoke;
		}

		.letmeexplain{/*overflow-y:scroll;*/ height:80%;}
.letmeexplain p{line-height:1.25rem; margin-top:1.5rem;}


		#spinneeeng{animation:speen 36s linear infinite; transform-origin:684.1674px 118.1812px;}
		@keyframes speen{
			0%{transform:rotate(0deg)}
			100%{transform:rotate(360deg)}
		}
		
		#dot1, #dot2, #dot3{
			animation: waiting 3s infinite;
		}
		
		#dot2{animation-delay:1s}
		#dot3{animation-delay:2s}
		
		@keyframes waiting{
			0%{opacity:1;}
			100%{opacity:.25;}
		}
		
		#web-card-container{
			height:auto;
		}
		
		#web-bg{
			position:relative;
		}
		
		#webcards{
			position:absolute;
			top:0;
			width: 100%;
			height:auto;
			z-index: 150;
			margin-top:18%;
			display:flex;
			justify-content: center;
		}
		
		.cards {
			color:aliceblue;
			border:3px solid #32CD32;
			width:25vw; 
			height:auto;
			padding-bottom: 5vh;
			border-radius:250px; 
			background-color:black;
			margin:.5em;
			text-align:center;
			overflow:hidden;
		}
		.card-image{max-width: 100%;}
		.card-image img{max-width:100%;}
		.cards h1{font-size:95%;}
		.icons{
			width:100%; 
			display:flex; 
			justify-content:center;
			margin-top:-3em;
		}
		.icons img{width:42px; transition:.25s ease all; cursor:pointer;}
		.icons img:hover{transform:scale(1.25,1.25);}
		.logo{height:auto;}
		.logo img{max-width:70%; max-height:112px; transform: translateY(-4.5em)}
		.web-title{margin:0; transform: translateY(-4em);}
		.makeroomforchange{background:#293329; height:20vh; margin-top:-6px; display:none;}
		
		
		
		/*----WIP STYLES----*/
		#works-in-progress{margin-top:-6px;}
		#WIP{width:100%;}
		#wip-zones svg{width:100%;}
		
		#text-progress, #text-works{animation:wipp 5s linear infinite;}
		@keyframes wipp{
			0%{transform:translateX(-30%)}
			100%{transform:translateX(40%)}
		}
		
		#text-progress{transform:translateX(-30%); animation-delay:2.5s;}
	
		#the-mighty-eighteen{
			animation:mightywheel 36s linear infinite;
			transform-origin:678.2853px 210.9762px;
		}
		@keyframes mightywheel{
			0%{transform:rotate(0deg);}
			100%{transform:rotate(360deg);}
		}
		
		.wipst31{animation: faded 5s infinite}
		@keyframes faded{
			0%{fill:#1C7493;}
			50%{fill:#071123;}
			100%{fill:#1C7493;}
		}
		
		
		#red-down{animation:reddown 36s linear infinite;}
		@keyframes reddown{
			0%{transform:translateY(0)}
			100%{transform:translateY(43%)}
		}
		
		#red-down2{animation:reddown2 36s linear infinite;}
		@keyframes reddown2{
			0%{transform:translateY(-40.5%)}
			100%{transform:translateY(0)}
		}
		
		#blue-up{animation:blueup 36s linear infinite;}
		@keyframes blueup{
			0%{transform:translateY(0)}
			100%{transform:translateY(-43%)}
		}
		
		#blue-up2{animation:blueup2 36s linear infinite;}
		@keyframes blueup2{
			0%{transform:translateY(40.5%)}
			100%{transform:translateY(0)}
		}
		
		#under-the-influence{animation:utf 18s linear alternate infinite;}
		@keyframes utf{
			0%{transform:translateY(12%)}
			100%{transform:translateY(30%)}
		}
		


		#angles-curlies{
			animation:aac 5s alternate linear infinite; 
		}
		@keyframes aac{
			0%{transform:translateY(-2%)}
			100%{transform:translateY(3%)}
		}
		
		#Old-School-Review {animation:osr 3s linear alternate infinite;}
		@keyframes osr{
			0%{transform:translateY(-12%)}
			100%{transform:translateY(-1%)}
		}
		
		#HOLY-DIVA{animation: hdscroll 25s linear infinite;}
		@keyframes hdscroll{
			0%{opacity:0; transform:translateY(0)}
			15%{opacity:1;}
			95%{opacity:1;}
			100%{opacity:0; transform:translateY(-60%)}
		}
		
		#HOLY-DIVA2{animation: hdscroll2 25s linear infinite;}
		@keyframes hdscroll2{
			0%{opacity:0; transform:translateY(60%)}
			15%{opacity:1;}
			95%{opacity:1;}
			100%{opacity:0; transform:translateY(0)}
		}
		
		#put-HD-image-glow,
		#ampersand1-glow, 
		#polaroid-glow, 
		#polaroid-glow, 
		#put-higher-influence-glow, 
		#put-lower-influence-glow{
			opacity:0;
			transition:.5s ease all;
			cursor:pointer;
		}
		
		#put-HD-image-glow:hover,
		#ampersand1-glow:hover, 
		#polaroid-glow:hover, 
		#polaroid-glow:hover, 
		#put-higher-influence-glow:hover, 
		#put-lower-influence-glow:hover{
			opacity:.8;
		}

		#gotooldschool{cursor:pointer;}
		
		/*----ABOUT----*/
		#ABOUT{margin:-5px 0 -3px;}
		
		/*----ABOUT----*/
		#day-nite{
			animation:dayandnight 12s infinite;
			transform-origin:678.4967px 109.1216px;
		}
		@keyframes dayandnight{
			0%{transform:rotate(0deg);}
			20%{transform:rotate(0deg);}
			25%{transform:rotate(180deg);}
			75%{transform:rotate(180deg);}
			80%{transform:rotate(360deg);}
			100%{transform:rotate(360deg);}
		}
		
		#outer-ring-right{
			animation: outerright 10s linear infinite;
			transform-origin:991.9952px 650.1216px;
		}
		@keyframes outerright{
			0%{transform:rotate(0deg);}
			100%{transform:rotate(360deg);}
		}
		
		#outer-ring-left{
			animation:outerleft 10s linear infinite;
			transform-origin: 363.4952px 650.1216px;
		}
		@keyframes outerleft{
			0%{transform:rotate(0deg);}
			100%{transform:rotate(-360deg);}
		}
		
		#swivel1{
			animation: outerright 10s linear infinite;
			transform-origin: 363.4952px 650.1216px;
		}
		@keyframes outerright{
			0%{transform:rotate(0deg);}
			100%{transform:rotate(360deg);}
		}
		
		#swivel2{
			animation:outerleft 10s linear infinite;
			transform-origin:991.9952px 650.1216px;
		}
		@keyframes outerleft{
			0%{transform:rotate(0deg);}
			100%{transform:rotate(-360deg);}
		}
		
		#about-glow, #cv-glow{
			opacity:0;
			transition:.25s ease all;
			cursor:pointer;
		}
		
		#about-glow:hover, #cv-glow:hover{
			opacity:1;
		}
		
		#left-eyering-left{
			animation: eclipse1 12s infinite;
		}
		
		@keyframes eclipse1 {
			0%{transform:translate(0,0);}
			20%{transform:translate(0,0);}
			25%{transform:translate(46px,1px);}
			75%{transform:translate(46px,1px);}
			80%{transform:translate(0,0);}
			100%{transform:translate(0,0);}
		}

		#left-eyering-right{
			animation: eclipse2 12s infinite;
		}
		
		@keyframes eclipse2 {
			0%{transform:translate(0,0);}
			20%{transform:translate(0,0);}
			25%{transform:translate(-62.6672px,1px);}
			75%{transform:translate(-62.6672px,1px);}
			80%{transform:translate(0,0);}
			100%{transform:translate(0,0);}
		}
		
		#left-eyering{
			animation: eclipse 12s infinite;
		}
		
		@keyframes eclipse {
			0%{fill:#9B00FF;}
			20%{fill:#9B00FF;}
			27%{fill:#FFF;}
			74%{fill:#FFF;}
			85%{fill:#9B00FF;}
			100%{fill:#9B00FF;}
		}
		
		
		/*RIGHT EYE BALLS*/
		#right-eyering-left{
			animation: eclipse3 12s infinite;
		}
		
		@keyframes eclipse3 {
			0%{transform:translate(0,0);}
			20%{transform:translate(0,0);}
			25%{transform:translate(53.4264px,1.5px);}
			75%{transform:translate(53.4264px,1.5px);}
			80%{transform:translate(0,0);}
			100%{transform:translate(0,0);}
		}

		#right-eyering-right{
			animation: eclipse4 12s infinite;
		}
		
		@keyframes eclipse4 {
			0%{transform:translate(0,0);}
			20%{transform:translate(0,0);}
			25%{transform:translate(-42.1422px,10px);}
			75%{transform:translate(-42.1422px,10px);}
			80%{transform:translate(0,0);}
			100%{transform:translate(0,0);}
		}
		
		#right-eyering{
			animation: eclipse-r 12s infinite;
		}
		
		@keyframes eclipse-r {
			0%{fill:#9B00FF;}
			20%{fill:#9B00FF;}
			27%{fill:#FFF;}
			74%{fill:#FFF;}
			85%{fill:#9B00FF;}
			100%{fill:#9B00FF;}
		}
		
		#face{
			animation: niteface 12s infinite;
		}
		
		@keyframes niteface {
			0%{opacity:0.37;}
			20%{opacity:0.37;}
			27%{opacity:0;}
			74%{opacity:0;}
			85%{opacity:0.37;}
			100%{opacity:0.37;}
		}
		
		#hexcloud1, #hexcloud2, #hexcloud3 {animation:cloudpath linear infinite;}
		@keyframes cloudpath{
			0%{transform:translateX(0)}
			100%{transform:translateX(60%)}
		}
		
		#hexcloud1-2, #hexcloud2-2, #hexcloud3-2 {animation:cloudpath2 linear infinite;}
		@keyframes cloudpath2{
			0%{transform:translateX(-60%)}
			100%{transform:translateX(0)}
		}
		
		#hexcloud1{animation-duration:30s;}
		#hexcloud2{animation-duration:20s;}
		#hexcloud3{animation-duration:10s;}
		#hexcloud1-2{animation-duration:30s;}
		#hexcloud2-2{animation-duration:20s;}
		#hexcloud3-2{animation-duration:10s;}
		
		#stones1 {animation:stonepath 60s linear infinite;}
		@keyframes stonepath{
			0%{transform:translateX(0)}
			100%{transform:translateX(-100%)}
		}
		
		#stones2 {animation:stonepath2 60s linear infinite;}
		@keyframes stonepath2{
			0%{transform:translateX(100%)}
			100%{transform:translateX(0)}
		}
		
			/*----FOOTER----*/
		footer{
			background-color:#070207;
			padding:4em 0 7em;
			color:white;
			height:auto;
			text-align:center;
			margin-top:-4px;
			position:relative;
		}
		
		#phat-foot{
			margin:2em 0;
			display:flex;
			justify-content: center;
			text-align: left;
		}
		
		#good-foot-one ul, #good-foot-two ul, #good-foot-three ul{
			list-style:none;
			padding:0;
			margin:0 0 .5em 0;
		}
		
		#phat-foot>div{
			margin:0 5vw;}
		
		#good-foot-one li, #good-foot-two li, #good-foot-three li{
			font-size:.8em;
			line-height: 1.35em;
			font-weight: lighter;
			margin:0;
			padding:0;
		}
		
		#good-foot-one li a, #good-foot-two li a, #good-foot-three li a{
			text-decoration:none;
			color:#CC9FD5;
			transition:.25s ease all;
		}
		
		#good-foot-one li a:hover, #good-foot-two li a:hover, #good-foot-three li a:hover{
			color:#FAC5DD;
		}
		
		#good-foot-one>h2, #good-foot-two>h2, #good-foot-three>h2{
			font-size:1em;
			color:#D4C1D5;
			margin:0;
		}
		
		h2.headspace {
			margin: .75em 0 0 0;
		}
		
		#footer-logo{text-align:center;}
		#footer-logo svg{width:10%; height:auto; margin-left:-35px;}
		
		
		#bent-nail{
			opacity:.55;
			animation:nailedit 12s alternate infinite;
		}
		@keyframes nailedit{
			0%{fill:#EC2227;}
			16.6666666667%{fill:#ff8320;}
			33.3333333333%{fill:#ff8320;}
			50%{fill:#51BB48;}
			66.6666666667%{fill:#29AAE2;}
			100%{fill:#B9529f;}
		}
		#benttitle{font-size:.7em; color:#A28E99;}
		#copyright{font-size:.8em; color:#BB5BC7; position:absolute; bottom:20px; right:39px;}
	
		#social{
			display:flex;
			justify-content: center;
		}
		
		#social>a{margin:1em; text-decoration: none; outline:0;}
		#social>a img{opacity:.7; transition:.5s ease all;}
		#social>a img:hover{opacity:1; transform:scale(1.1,1.1);}
		
		
		
		/*MEDIA QUERIES*/
		@media only screen and (max-width: 1000px) {
		  	
			.makeroomforchange {
				display:block;
		  	}
			#works-in-progress{margin-top:0;}
		}


/*MIGRATED FROM PORTFOLIO