#search_banner {
	position: absolute;
	top: 0;
	width: 50%;
	height: 3em;
}

#search_banner #search_box {
	position: absolute;
	margin-top: -3.5em;
	transition: all 1.5s ease-out 1s;
}

#search_banner #search_box input {
	background-color: rgba(255,255,255,0.5);
	color: #111;
}

.grid-quads {
	--grid-size: min(25vw,25vh);
	--grid-bg-color: #fff;
	--grid-lines-color: rgba(48,48,48,0.5);
	--grid-lines-width: 3px;
	background-color: var(--grid-bg-color);
	opacity: 0.8;
	background-image: linear-gradient(var(--grid-lines-color) var(--grid-lines-width), transparent var(--grid-lines-width)), linear-gradient(to right, var(--grid-lines-color) var(--grid-lines-width), var(--grid-bg-color) var(--grid-lines-width));
	background-size: var(--grid-size) var(--grid-size);
}

#search_banner:hover #search_box {
	margin-top: 0.5em;
}

#site_cubes {
	background-color: #456;
	background-image: url('../img/MEZCLA.jpg');
	background-blend-mode: multiply;
	background-repeat: repeat-xy;
	opacity: var(--cubes-opacity);
	animation: 300s infinite alternate site_cubes_bg ease-in-out;
}

@keyframes site_cubes_bg {
	  0% { background-size: 100%; background-position: 0% 0%; }
	 25% { background-size: 300%; background-position: 100% 100%; }
	 50% { background-size: 150%; background-position: 10% 100%; }
	 75% { background-size: 200%; background-position: 100% 10%; }
	100% { background-size: 150%; background-position: 50% 50%; }
}

.site_logo {
	filter: drop-shadow(0 0 2px #fff);
	mix-blend-mode: hard-light;
	transform: scale(2);
	animation: logo-exit 2s ease-out 5s;
	animation-fill-mode: forwards;
}

.site_name_underline {
	height: 1em;	
	width: 0;
	opacity: 0;
	transition: all 2s ease 1.5s;
	filter: drop-shadow(0 0 2px #111);
	animation: underline-enter 3.5s ease 5.5s;
	animation-fill-mode: forwards;
	background: repeating-linear-gradient(45deg, white 10%, white 20%, #eee 20%, #eee 30%);
}

.site_enter {
	opacity: 0;
	transition: all 1s linear 4s;
	animation: sitename-enter 1s ease 9s;
	animation-fill-mode: forwards;
}

.site_name {
	opacity: 0;
	animation: sitename-enter 3.5s ease 5.5s;
	animation-fill-mode: forwards;
}

.site_name > * {
	filter: drop-shadow(0 0 2px #111);
}


.site_name > i {
	opacity: 0;
	animation: sitename-enter 2.5s ease 7.5s;
	animation-fill-mode: forwards;
}

#logo-after {
	opacity: 0;
	animation: sitename-enter 5s ease 6s;
	animation-fill-mode: forwards;	
}

@keyframes logo-exit {
	from {
		opacity: 1;
		transform: rotateY(0) scale(2);
	}
	to {
		opacity: 0;
		transform: rotateY(2turn) scale(0.1);
	}
}

@keyframes sitename-enter {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes underline-enter {
	from { opacity: 0; width: 0%; }
	to { opacity: 0.8; width: 100%; }
}

@keyframes pulse-animation {
  0% { text-shadow: 0 0 0 none; }
  100% { text-shadow: 0 0 8px rgba(255,255,255,0.2); }
}

@keyframes pulse-animation-box {
  0% { border-color: #111; }
  100% { border-color: #666; }
}

#credits > a {
	opacity: 0;
}

#credits:hover > a {
	opacity: 1;
	transition: all 2s;
}