@font-face {
  font-family: "MYFONT";
  src: url('media/AUTHENTICSans-60.woff') format('woff');

}


html {
	margin:0;
	padding:0;
	/*background-image:url("background1.png");
	background-width:100%;
	background-height:100%;
	background-repeat:stretch;*/
	
}

body {
	margin:0px;
	margin:0px;
	overscroll-behavior:none;
	
}

.bgimg {
	overflow:hidden;
	margin:-150px;
	position:fixed;
	z-index:0;
	width:120%;
	height:150%;
	min-width:1080px;
	
}

img.site-logo{
	width:100%;
	position:fixed;
	z-index:3;

}

#heartcontain {
	right: 0;
	    bottom: 48px;
	    position: fixed;
	    display: flex;
	    height: auto;
	    width: 100%;
	    justify-content: space-around;
	    flex-direction: row;
	    font-family: Snell Roundhand, cursive;;
	    font-size: 50px;
	    letter-spacing: 2px;
	    color: white;
	    z-index: 3;
	    animation: textglow 3s infinite linear alternate;
		
	}

#glideup {
	position: absolute;
	    display: flex;
	    bottom: -100px;
	    list-style: none;
	    font-size: 80px;
	    animation: none;
}

li {
	padding-right:10px;display:none;
}

li:hover {text-decoration:wavy underline;}


h1 {
	/*transition:1s;*/
	padding-bottom:100px;
}

h1:hover {
	text-decoration: wavy underline;
	transition:1s;
	

}


.fade-in {
	animation:fadein 3s infinite linear;
}


.draggable {
	cursor:move;
}

/*WINDOW LAYOUT*/
.window {
	background-color:transparent;
	border-radius: 25px;
	border:1px solid #eaeaea;
	display:flex;
	flex-direction:column;
	width:100%;
	height:100%;
	
	
}

.window .topbar{
	/*background: black;*/
	background: linear-gradient(0deg, #adadad 0%, #eaeaea 100%);
	
	width:100%;
	height:30px;
	border-radius: 24px 24px 0px 0px;
	border-bottom:1px solid #aaaaaa;
	border:0px;	
}

.window .circlecontainer{
	background-color:transparent;
	flex-direction:row;
	margin-left:10px;
	display:flex;
	justify-content:space-around;
	align-content:center;
	align-items:center;
	height:100%;
	width:70px;
	border:0px;
	
}

.circle {
/*	background: radial-gradient(white,rgba(253,52,136,1),rgb(116,110,251));	*/
	background:white;
	height:15px;
	width:15px;
	border-radius:100%;
	}

.window .content {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
	align-self:flex-end;
	border-radius: 0px 0px 25px 25px;
	border:0px;
	background-color:white;
}

#title {
	display:none;
}
/*WINDOWS*/
#gridcontainer {
	margin-top:10px;
	position:fixed;
	width:100%;
	height:100%;
	display:grid;
	grid-template-rows: repeat(10,10%);
	grid-template-columns: repeat(10,10%);
	
}

#mouthwindow {
	transform: translateX(-50px);
	grid-column: 2/span 8;
	grid-row: 4/span 3;
	z-index: 1;
    transform: translateY(-20px);
	
}

#xoxowindow {
	grid-column: 3/span 4;
	grid-row: 2/span 2;
	transform: translate(50px,-0px);
}

#xoxowindow img {
	
	margin-top:-5px;
	width:80%;
}

#eyeleftwindow {
	grid-column: 8/span 2;
	grid-row: 5/span 2;
	z-index: 1;
	transform: translateY(250px);
}

#eyerightwindow {
	grid-column: 8;
	width:250px;
	height:260px;
	grid-row: 2;
	transform:translate(70px,-100px);
	z-index:1;
	display:none;
	
}

#gif1 {
	z-index:1;
	grid-row: 2/span 2;
	grid-column: 8/span 2;
	transform: translate(0px,50px);
}

#gif1 img {
	width:80%;
	height:100%;
}

#heartvideo {
	grid-row:2/span 3;
	grid-column:10/span 3;
}

.huerotate {
	width:80%;
	animation:huerotate linear 4s infinite;
}

@keyframes huerotate {
	from {filter: hue-rotate(0deg);transform:rotate(0deg);}
	to {filter: hue-rotate(360deg);transform:rotate(360deg);}
	}

video {
	object-fit:fill;
	
}

.videoinner {
	height:100%;
	width:inherit;
	border-radius:0px 0px 25px 25px;
	filter:exposure(1);
}

#right-eye-vid {
	height:100%;
	width:inherit;
	border-radius:0px 0px 25px 25px;
}




/*MUTE BUTTON*/

#mutebutton {
	grid-column:2/span 3;
	grid-row:7/span 2;
	transform:translate(20px,-100px) scale(0.8);
	z-index:1;
	/*display:none;*/
	
	
}


.window .muted {
	background: #3245F9;
	
}

.fingerimg {
	margin-left:10px;
	width:40%;
	

}

div.muted img {
	position:absolute;
	width:50%;
	margin-top:-5px;
	animation:up-down infinite alternate linear 1s;
}

@keyframes up-down{
	from {	transform:translateY(5px);}
	to { 	transform:translateY(-5px);}
}
		

 #readme {
	 grid-column: 1/span 2;
	 grid-row: 7/span 2;
	 transform: scale(0.8);
	 z-index: 10;
}

#readme .content:hover {
	filter:invert(1);
	
	}


/*INFORMATION*/

.container {
	position:absolute;
	display:flex;
	justify-content:center;
	top:0px;
	width:100%;
	margin-bottom:200px;
	z-index:8;
	
	}

.infotext {
	width:70%;
	font-size:70px;
	text-align:center;
	position:absolute;
	color:white;
	font-family: Snell Roundhand, cursive;
	display:none;	
}


.backgroundtext {
	top:0;
	display:none;
	background-color:rgba(255,0,255,.5);
	box-shadow:rgba(255,0,255,.5) 10px 10px 10px;
	width:100%;
	height:100%;
	position:fixed;
	z-index:1;

}

.infotext h2 p{
	padding:100px;
}

a {
	color:blue;
}

.blur {
	color:Magenta;
	animation:glow 1s infinite linear reverse;
}

@keyframes glow {
	0%{opacity:0.5; filter:blur(10px);}
	60%{opacity:1; filter:blur(8px);}
	100% {opacity:0.5; filter:blur(10px);}
}


@keyframes textglow {
	0%{text-shadow:Magenta 0px 0px 15px;}
	100%{text-shadow:Magenta 0px 0px 70px;}
}

@keyframes fadein {
	0%{opacity:0; }
	60%{opacity:1; }
	100% {opacity:0;}
}





/*QUERIES*/ 
 
@media only screen and (min-width:1000px){

	#title {
		display:inherit;
	}
	img.site-logo{width:500px;}
	 
	#heartcontain {
	 		right: 0;
	 	    top:-20px; 
	 	    height: 100%;
	 	    width: 80px;
	 	    flex-direction: column;
	 	    font-size: 30px;
	 	    letter-spacing: 2px;
	}
	 
	#title {transform:translateY(-100px) rotate(90deg);}

	h1 {
		transform: rotate(90deg);
		padding-bottom:0px;
	
	}

	#glideup {
	 	    right: 500px;
	 	    width: 100%;
	 	    height: 100%;
	 	    transform: translate(-300px,700px);
	 	    font-size: 40px;
	 		animation:none;
		}
	 
	 /*WINDOWS*/
	#gridcontainer {
	 	grid-template-rows:repeat(12,100px);
	 	grid-template-columns:repeat(12,100px);
	
	}

	#mouthwindow {
	 	grid-column: 4/span 8;
	 	grid-row: 3/span 5;
	 	transform:translateX(50px);
	 	z-index:1;
	    transform: translateY(0px);
		
	}

	#xoxowindow {
	 	grid-column: 6/span 4;
	 	grid-row: 2/span 2;
	 	transform:translate(50px,-50px);
	}

	#xoxowindow img {
	
	 	margin-top:-5px;
	 	width:80%;
	}

	#eyeleftwindow {
	 	grid-column: 3/span 2;
	 	grid-row: 3/span 2;
	 	z-index:1;
	 	transform:translateY(50px);
	}

	#eyerightwindow {
	 	grid-column: 11;
	 	width:250px;
	 	height:260px;
	 	grid-row: 2;
	 	transform:translate(70px,-100px);
	 	z-index:1;
		display:inherit;
		
	
	}
	
	
	#mutebutton {
		grid-column:1/span 2;
		grid-row:7/span 2;
		transform:translate(20px,-100px) scale(1);
		z-index:1;
		display:flex;
	
	
	}
	
	#gif1 {
		z-index:1;

		grid-row:2/span 2;
		grid-column:2/span 2;
		transform:translate(0px,50px);
	}

	#gif1 img {
		width:80%;
		height:100%;
	}

	#heartvideo {
		grid-row:2/span 3;
		grid-column:10/span 3;
	}

	#readme {
 	grid-column:14/span 1;
 	grid-row:7/span 2;
 	transform:translate(-80px,-40px);
 	z-index:10;
	}
	
	.backgroundtext {
		top:0;
		display:none;
		background-color:rgba(255,0,255,.5);
		box-shadow:rgba(255,0,255,.5) 10px 10px 10px;
		width:100%;
		height:100%;
		position:fixed;
		z-index:1;
	
	}

}

@media only screen and (min-width: 1200px){
	
	#gridcontainer {
	 	grid-template-rows:repeat(12,100px);
	 	grid-template-columns:repeat(12,100px);
	
	}
}