/*
 ▄▄▄▄     ▄████  ▄▄▄       ██▓     ██▓          ▄████▄   ▒█████
▓█████▄  ██▒ ▀█▒▒████▄    ▓██▒    ▓██▒         ▒██▀ ▀█  ▒██▒  ██▒
▒██▒ ▄██▒██░▄▄▄░▒██  ▀█▄  ▒██░    ▒██░         ▒▓█    ▄ ▒██░  ██▒
▒██░█▀  ░▓█  ██▓░██▄▄▄▄██ ▒██░    ▒██░         ▒▓▓▄ ▄██▒▒██   ██░
░▓█  ▀█▓░▒▓███▀▒ ▓█   ▓██▒░██████▒░██████▒ ██▓ ▒ ▓███▀ ░░ ████▓▒░
░▒▓███▀▒ ░▒   ▒  ▒▒   ▓▒█░░ ▒░▓  ░░ ▒░▓  ░ ▒▓▒ ░ ░▒ ▒  ░░ ▒░▒░▒░
▒░▒   ░   ░   ░   ▒   ▒▒ ░░ ░ ▒  ░░ ░ ▒  ░ ░▒    ░  ▒     ░ ▒ ▒░
 ░    ░ ░ ░   ░   ░   ▒     ░ ░     ░ ░    ░   ░        ░ ░ ░ ▒
 ░            ░       ░  ░    ░  ░    ░  ░  ░  ░ ░          ░ ░
      ░                                     ░  ░*/


/*	
COLORS

rgb(54, 150, 178);
indigo;
#f4f0e6;
#cfff49
#40eec3;
#a09f92;
#ffd12a;
#762dc5;
springgreen;
#f2ffc5;
teal;
#f2fced;
#074f7f;
#3E606F;
#f0a359;			   
#009FB7
#015f81;
#d4ff89;
#807cfd 
#fdf164 
#93b3f2 
#c2f3b0 
#ffb857 
#71f5ad;
#333333;
#015f81;
#eeeeee;
#009FB7;
#19231a;
#2b1707;
#e7fa21;
#272a3e;
#c0e045;
#efe4db;
#3a4d60;
#a7fa23;
#E4572E
#D7D9CE
--steel-blue: #4f7cac;
--mint-green: #c0e0de;
--gunmetal: #162521;
--outer-space: #3c474b;
--ice-blue: #9eefe5;
--dutch-white: #d6d6b1;
--blue-munsell: #3891a6;
--jet: #353238;
--jasper: #be5a38;
--xanthous: #f5b841;
--gmail: #e74c3c;
--linkedin: #007bb6;
--twitter: #00aced;
#1abc9c;
 #757575;

background: linear-gradient(to top, #807cfd 90%, transparent 90%, transparent);
    
}
 */  



/*============================================= easter eggs */

.sideglitch {
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

.ti-cursor::after span {
color: rgba(0, 0, 0, 0);
}

.pug {
	position: relative;
	display: block;
	width: 70%;
	max-width: 400px;
	padding: 9vw 3vw;
	background: #fff;
}

.pug:focus {
	outline: none;
}

.pug:hover::before {
	position:absolute;
	position: absolute;
	top: 20px;
	left: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(237,116,153,0.5), rgba(237,116,153,0.5)), url(../images/cornholio.gif);
	background-position: 50% 50%;
	background-size: cover;
}

/*============================================= noise */

.noise {
position: relative;
}

.noise:hover {
animation: noise-animation-2 2s infinite linear alternate-reverse;
background: rgba(0, 0, 0, 0);
clip: rect( 0, 900px, 0, 0);
color: rgba(255, 100, 65,1);
content: attr( data-text);
left: 2px;
overflow: hidden;
position: absolute;
text-shadow: -10px 0 black;
top: 0;
} 

@keyframes noise-animation {
0% {clip: rect(42px, 9999px, 44px, 0);}
5% {clip: rect(12px, 9999px, 59px, 0);}
10% {clip: rect(48px, 9999px, 29px, 0);}
15% {clip: rect(42px, 9999px, 73px, 0);}
20% {clip: rect(63px, 9999px, 27px, 0);}
25% {clip: rect(34px, 9999px, 55px, 0);}
30% {clip: rect(86px, 9999px, 73px, 0);}
35% {clip: rect(20px, 9999px, 20px, 0);}
40% {clip: rect(26px, 9999px, 60px, 0);}
45% {clip: rect(25px, 9999px, 66px, 0);}
50% {clip: rect(57px, 9999px, 98px, 0);}
55% {clip: rect(5px, 9999px, 46px, 0);}
60% {clip: rect(82px, 9999px, 31px, 0);}
65% {clip: rect(54px, 9999px, 27px, 0);}
70% {clip: rect(28px, 9999px, 99px, 0);}
75% {clip: rect(45px, 9999px, 69px, 0);}
80% {clip: rect(23px, 9999px, 85px, 0);}
85% {clip: rect(54px, 9999px, 84px, 0);}
90% {clip: rect(45px, 9999px, 47px, 0);}
95% {clip: rect(37px, 9999px, 20px, 0);}
100% {clip: rect(4px, 9999px, 91px, 0);}
}

@keyframes noise-animation-2 {
0% {clip: rect(65px, 9999px, 100px, 0);}
5% {clip: rect(52px, 9999px, 74px, 0);}
10% {clip: rect(79px, 9999px, 85px, 0);}
15% {clip: rect(75px, 9999px, 5px, 0);}
20% {clip: rect(67px, 9999px, 61px, 0);}
25% {clip: rect(14px, 9999px, 79px, 0);}
30% {clip: rect(1px, 9999px, 66px, 0);}
35% {clip: rect(86px, 9999px, 30px, 0);}
40% {clip: rect(23px, 9999px, 98px, 0);}
45% {clip: rect(85px, 9999px, 72px, 0);}
50% {clip: rect(71px, 9999px, 75px, 0);}
55% {clip: rect(2px, 9999px, 48px, 0);}
60% {clip: rect(30px, 9999px, 16px, 0);}
65% {clip: rect(59px, 9999px, 50px, 0);}
70% {clip: rect(41px, 9999px, 62px, 0);}
75% {clip: rect(2px, 9999px, 82px, 0);}
80% {clip: rect(47px, 9999px, 73px, 0);}
85% {clip: rect(3px, 9999px, 27px, 0);}
90% {clip: rect(26px, 9999px, 55px, 0);}
95% {clip: rect(42px, 9999px, 97px, 0);}
100% {clip: rect(38px, 9999px, 49px, 0);}
}

/*=============================================Wobble Vertical */
@-webkit-keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.hvr-wobble-vertical {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-animation-name: hvr-wobble-vertical;
  animation-name: hvr-wobble-vertical;
  -webkit-animation-duration: 21s;
  animation-duration: 21s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}