/*

hey baby girl here is some css

be careful in here :U

*/


 @font-face {

 font-family: 'Neue Haas Grot Disp-65 Medium';
 src: url('assets/fonts/Neue Haas Grot Disp-65 Medium.otf') ; 
 }                            

@font-face {

 font-family: 'Neue Haas Unica Pro Medium';
 src: url('assets/fonts/Neue Haas Unica Pro Medium.otf') ; 
 }                            




/* general stuff ----------------------------------------------------------------------------------------- */
body{
	width:100%;min-height:100%;
	padding:0px;margin:0px;
	font-family: 'Neue Haas Unica Pro Medium';
	background-color:#f9eaff;
	cursor: none !important;
	overflow-x:hidden !important;
}
.rel{
	width:100%;height:100%;
	position:relative;
}
.rel2{
	width:100%;height:auto;
	position:relative;
}
div{
	box-sizing: border-box;
}
#noisebg{
	position:fixed;
	z-index:3000;
	width:100%;height:100%;
	opacity:0.10;
	pointer-events:none;
}
#img_cursor{
	position:absolute;z-index:2010;
	pointer-events:none;
}
#draw_canvas{
	position:absolute;
	z-index:2009;
	left:0px;top:0px;
	pointer-events:none;
	opacity:0.8;
}
#floating_logo{
	position:fixed;
	z-index:1001;
	left:0px;top:10px;
	pointer-events:none;
	height:auto;
	width:30%;
	/* border:2px solid #f00; */
}
#fadeout{
	position:fixed;
	width:100%;height:100%;
	z-index:5000;
	left:0px;top:0px;
	background-color: #eee;
}
#fadeout2{
	position:fixed;
	width:100%;height:100%;
	z-index:5000;
	left:0px;top:0px;
	background-color: #000;
}



#filter_menu{
	position:absolute;
	z-index: 3000;
	text-align: center;
	top:40px;
}
	.filter_item{
		display: inline-block;
		margin-left:5px;margin-right:5px;
		opacity: 0.5;
		font-size:20px;font-weight: 900;
	}
	.filter_item:hover{
		opacity: 1.0;
	}
		.filter_item_sel{
			text-decoration: underline;
			opacity: 1.0;
		}


#all_container{
	width:100%;height:auto;
	position:absolute;
	z-index:2000; 
	margin:0px auto;
}
	#footer_container{

	}
	#projects_container{
		display:flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: left;
		align-items: flex-start;
	}
		.project_container{
			width:18%;height:auto; /* set by js */
			padding:20px;
			margin-left:11.5%;
			margin-top:6%;
			background:none;
			border:none;
			font-size:calc(5px + 0.7vw); 
			font-family: 'Neue Haas Unica Pro Medium';
			box-sizing: border-box;

			/* border:3px solid #00f; */
		}
		.project_container:hover{
			/* ? */
			text-decoration: underline;
		} 
			.project_image{
				background-color:#fafafa;
			}
			.project_tags{
				color:#000;
				font-weight:200;
				font-size:calc(5px + 0.5vw);
			}
			.project_type{
				color:#000;
				font-weight:700;
			}
			.project_date{
				color:#000;
				font-weight:200;
			}
			#top_bar_marquee{
				font-size:15px;color:#fff;padding:2px;background-color: #f82c6b;
				width: 100%;height:auto;
			} 



/* projects page ----------------------------------------------------------------------------------------- */
#page_container{
	position:absolute;z-index:5;
	width:80%;height:auto;
	max-width:1200px;
	margin-top:50px;
	margin-bottom:50px;
	margin-left:15px;
	font-size:18px;
}
#page_container2{
	position:absolute;z-index:5;
	width:80%;height:auto;
	max-width:1200px;
	margin-top:50px;
	margin-bottom:20px;
	margin-left:15px;

}






.project_buddy{
	position:absolute;z-index:1000;
	width:25px; /* set by JS */
	height:auto;
	top:-50px;left:-50px;
}
#theend{
	font-family: 'Tangerine', cursive;
	text-align:center;
	font-size:30px;
	font-weight:700;
	margin-top:10px;
}

#marquee_left{
	visibility: hidden;
}




.projectname{
	font-family: 'Neue Haas Grot Disp-65 Medium';
	text-align: center;
	font-size:40px;
	color:#000;
	padding:2px;

}
.projectintro{
	font-family: 'Neue Haas Grot Disp-65 Medium';
	text-align: center;
	font-size:20px;
	color:#000;
	padding:2px;

}




/* personality section ----------------------------------------------------------------------------------------- */
#personality_container{
	width:100%;height:100%;
	overflow:hidden;
	position:absolute;z-index:5;
}
#personality_content{
	position:absolute;
	width:600px;height:660px;
	/* border: 1px solid #f00; */

}

.personailty_text{
    font-size:20px; /* set by JS */
	color:#ffffff;
}

	#personality_text{
		font-family: 'Neue Haas Grot Disp-65 Medium';
		text-align: justify;
		padding:0px; /* set by JS */
		font-size:30px; /* set by JS */
		color:#000;
		
	}


/* Style the video: 100% width and height to cover the entire window */
     #myVideo {
      position: fixed;
      right: 0;
      bottom: 0;
      min-width: 130%;
      min-height: 130%;
}



























/* buttons ----------------------------------------------------------------------------------------- */

#top_menu{
	/*background-image: url('assets/birdline.gif');*/
	/*position:absolute;*/
	width:300%;height:auto;
	max-width:100%;
	left:0px;top:0px;
	z-index:6;
}
	.menu_item{
		width:50%;height:auto;
		background:none;
		color:#000;
		display:block;float:left;
		text-align:center;
		padding:30px;
		font-size:5vw;
		font-family: 'Tangerine', serif;
		font-weight:900;
	}
	.menu_item:hover{
		-webkit-animation: rainbow-bg .15s infinite;
		-ms-animation: rainbow-bg .15s infinite;
		animation: rainbow-bg .15s infinite;
		color:#fff;
		
	}

	.menu_item2{
		background:none;
		color:#fff;
		padding:30px;font-size:40px;
		font-family: 'Tangerine', serif;
		font-weight:1000;
		
	}
	.menu_item2:hover{
		-webkit-animation: rainbow-bg .15s infinite;
		-ms-animation: rainbow-bg .15s infinite;
		animation: rainbow-bg .15s infinite;
		color:#fff;
		
	}

	#menu_creations{
		text-decoration: underline;
		/* position:fixed; */


	}
	#menu_personality{
		 text-decoration:none;
		/*position:fixed; */
	}
	.menu_item2{
		width:100%;height:auto;
		background:none;
		color:#000;
		display:block;float:left;
		text-align:center;
		padding:30px;font-size:90px;
		font-family: 'Tangerine', serif;
		font-weight:700;
	}
	.menu_item2:hover{
		-webkit-animation: rainbow-bg .15s infinite;
		-ms-animation: rainbow-bg .15s infinite;
		animation: rainbow-bg .15s infinite;
		color:#fff;
	}
.return_home_from_about{
	position: absolute;z-index: 10;
	left:15px;top:15px;
	font-family: 'Tangerine', serif;
	font-weight:700;
	color:#fff;
	font-size:32px;

}
.return_button{
	width:100%;height:auto;
	font-size:50px; /* set by JS */
	padding:30px;
	font-family: 'Tangerine', serif;
	font-weight:700;
	text-align:center;
}
.return_button2{
	width:100%;height:auto;
	font-size:26px; /* set by JS */
	font-family: 'Tangerine', serif;
	font-weight:700;
	text-align:center;
}
.return_button:hover,.return_button2:hover,.return_home_from_about:hover{
	-webkit-animation: opacity-pulse .15s infinite;
	-ms-animation: opacity-pulse .15s infinite;
	animation: opacity-pulse .15s infinite;
}









/* seizure inducing hover effects ----------------------------------------------------------------------------------------- */
@-webkit-keyframes opacity-pulse{
	0%{opacity:1.0;}
	50%{opacity:0.5;}
	100%{opacity:1.0;}
  }
  @-ms-keyframes opacity-pulse{
	0%{opacity:1.0;}
	50%{opacity:0.5;}
	100%{opacity:1.0;}
  }
  @keyframes opacity-pulse{
	0%{opacity:1.0;}
	50%{opacity:0.5;}
	100%{opacity:1.0;}
  }

@-webkit-keyframes rainbow-bg{
  0%{color:#000;}
  50%{color:#ccc;}
  100%{color:#000;}
}
@-ms-keyframes rainbow-bg{
  0%{color:#000;}
  50%{color:#ccc;}
  100%{color:#000;}
}
@keyframes rainbow-bg{
  0%{color:#000;}
  50%{color:#ccc;}
  100%{color:#000;}
}
@-webkit-keyframes vibrance-go{
  0%{-webkit-filter: saturate(1);filter: saturate(1);}
  50%{-webkit-filter: saturate(5);filter: saturate(5);}
  100%{-webkit-filter: saturate(1);filter: saturate(1);}
}
@-ms-keyframes vibrance-go{
  0%{-webkit-filter: saturate(1);filter: saturate(1);}
  50%{-webkit-filter: saturate(5);filter: saturate(5);}
  100%{-webkit-filter: saturate(1);filter: saturate(1);}
}
@keyframes vibrance-go{
  0%{-webkit-filter: saturate(1);filter: saturate(1);}
  50%{-webkit-filter: saturate(5);filter: saturate(5);}
  100%{-webkit-filter: saturate(1);filter: saturate(1);}
}
@keyframes pulse {
    0% { transform: scale(0.5); opacity: 0.5; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.5); opacity: 0.5; }
}
.pulser{
	-webkit-animation: pulse 1s infinite;
	-ms-animation: pulse 1s infinite;
	animation: pulse 1s infinite;
}