@font-face {
  font-family: OPTICirrus;
  src: url('../assets/fonts/opticirrus/opticirrus.woff');
}
::selection { 
  background: rgba(195, 239, 143, 0.5);
}
/************************INItializing sysTEM********************************************************************/
/* The box-sizing property allows us to include the padding and border in an element's total width and height. */

* {
  box-sizing: border-box;
}

/*****************tYPO********************************************************************/

a {color: inherit;}


/******************************************************************************************************************************************/
/****BODY    **** * * **   * * *  * * ******************************************************************************************************/
body {
	overflow-x: hidden;
	overflow-y: scroll; /* add the ability to scroll */
	
	margin: 0;
    background: black;
	font-family: "Inconsolata", monospace;
	font-optical-sizing: auto;
	font-weight: 400;
	
	font-size: 16px;
	line-height: 20px;
	
	color: rgba(255, 255, 255, 0.8);
	font-style: normal;
	font-variation-settings: "wdth" 100;
	text-shadow:
		0 0 1ex rgba(0, 0, 0, 1),
		0 0 2px rgba(255, 255, 255, 0.8);
		
		
		
}
/******************************************************************************************************************************************/
/******************************************************************************************************************************************/
/******************************************************************************************************************************************
hide    **** * * **   * * *  * * **********************************************************************************************************
*//**** * *** * *** * * **       SCROLLBAR*/

/* Hide scrollbar for Chrome, Safari and Opera */
/* body::-webkit-scrollbar { */
	/* display: none; */
/* } */
::-webkit-scrollbar {
	display: none;
}
/* Hide scrollbar for IE, Edge and Firefox but allow scrolling */
* {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */	
}





a {
	color: #c3ef8f;
}

#mainInterface {
  background-image: url('../img/mayo2007.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.welcome {
	flex-direction: column!important;
	background: radial-gradient(#151515, #000000);
	max-width: 100%;
	height: 100vh;
	/* padding-top: 15px; */
}

#video {
	display: flex;
	justify-content: center;
	margin: 15px auto;
}

pre {
	color: rgba(255, 255, 255, 0.8)!important;
	text-shadow:
		0 0 1ex rgba(255, 255, 255, 0.3),
		0 0 2px rgba(255, 255, 255, 0.8);
}
#asciiart {display: block;}
#ascii2 {display: none;}


#prompt {
	width: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
	margin-bottom: 15px;
	padding-bottom: 15px;
}
.mu_th_ur{
	font-family: 'OPTICirrus', monospace;
	font-weight: 100;
    font-style: normal;
	font-size: 2vw;
	font-size: 1.66vw;
	letter-spacing: 5px;
	color: #7af042;
	display: grid;
	text-transform: uppercase;
	scale: -110% 70%;
	/* line-height: normal; */
	/* gap: 1.1em; */
	animation: glow 1s ease-in-out infinite alternate;
}
.mu_th_ur#willkommen{scale: 110% 70%; line-height: normal;}
.mu_th_ur.menu{text-decoration: none;}
.mu_th_ur.menu:hover {text-decoration: underline; animation: none;}
.glow {animation: glow 1s ease-in-out infinite alternate;}
@keyframes glow {
  from {
    text-shadow: 0 0 2.5px #000, 0 0 2.5px #000, 0 0 5px #3ec300, 0 0 10px #3ec300, 0 0 15px #3ec300, 0 0 20px #3ec300, 0 0 25px #3ec300;
  }
  
  to {
    text-shadow: 0 0 2.5px #000, 0 0 5px #000, 0 0 10px #7eff42, 0 0 15px #7eff42, 0 0 20px #7eff42, 0 0 25px #7eff42, 0 0 35px #7eff42;
  }
}


.row {
	width: 96%;
	max-width: 1440px;
	margin: 0 auto;
}
.row::before,
.row::after {
	content: "";
	display: table;
}
.row:after {
	clear: both;
}




/****************************CENTRADO**************/
.padre {
	display: flex;
}
.hija {
	margin: auto;
}
/****************************CENTRADO VERTICAL**************/
.grandpa {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}	

.grandma {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
}
/* En este método, no necesitamos especificar nada explícitamente para el elemento hijo */
/****************************************************************************************/

.framed {
	width:100%;
	/* height:18.9rem; */
	height: 300px;
	border: none;
	overflow: hidden;
}

/*************************************************************************************************************************************************************************************************4***0***4***************************************************************************************************************************************************************************************************************************/
.flicker {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.2);
    opacity: 0;
    z-index: 1000;
    pointer-events: none;
	animation: flicker 0.12s infinite;
}
@keyframes flicker {
	0% {
		opacity: 0.552;
	}
5% {
    opacity: 0.48287;
}
10% {
    opacity: 0.59134;
}
15% {
    opacity: 0.79543;
}
20% {
    opacity: 0.75134;
}
25% {
    opacity: 0.1956;
}
30% {
    opacity: 0.90687;
}
35% {
    opacity: 0.122;
}
40% {
    opacity: 0.62254;
}
45% {
    opacity: 0.56977;
}
50% {
    opacity: 0.9925;
}
55% {
    opacity: 0.55487;
}
60% {
    opacity: 0.16607;
}
65% {
    opacity: 0.12353;
}
70% {
    opacity: 0.2214;
}
75% {
    opacity: 0.67908;
}
80% {
    opacity: 0.97163;
}
85% {
    opacity: 0.1275;
}
90% {
    opacity: 0.37186;
}
95% {
    opacity: 0.24475;
}
100% {
    opacity: 0.37221;
}
}

.pantalla {
    height: 100vh;
    position: relative;
}

/*
.pantalla.collapse {
    animation: size 2s ease-out;
    animation-fill-mode: forwards;
}
.pantalla.collapse:before {
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: white;
    z-index: 1;
    opacity: 0;
    animation: opacity 2s ease-out;
    animation-fill-mode: forwards;
}

@keyframes opacity {
	from { opacity: 0; }
    to { opacity: 1; }
}


@keyframes size {
    50% {
        transform: scaleX(calc(1 / var(--width)));
        opacity: 1;
    }
    98% {
        transform: scaleX(calc(1 / var(--width))) scaleY(calc(1 / var(--height)));
        opacity: 1;
    }
    100% {
        transform: scaleX(calc(1 / var(--width))) scaleY(calc(1 / var(--height)));
        opacity: 0;
    }  
}*/
.noise {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2000;
    opacity: 0.05;
    pointer-events: none;
    background: 
        repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 50% 0/2500px 2500px,
        repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 50% 50%/2500px 2500px;
    background-blend-mode: difference;
    animation: shift .2s infinite alternate;
}

/*************************************************************************************************************************************************************************************************4***0***4***************************************************************************************************************************************************************************************************************************/

.fixed {position: fixed;}
.shadow {box-shadow: 0px 15px 30px 3px rgba(0, 0, 0, 0.8) inset;}
.shadow2 {box-shadow: 0px 15px 30px 3px black inset, 0px -60px 30px 3px black inset;}
.shadows {box-shadow: 0px 15px 30px 3px rgba(0, 0, 0, 0.8) inset, 0px -15px 30px 3px rgba(0, 0, 0, 0.8) inset;}

/*******FOOTER**************************************************************************************************************************/
footer {
	clear: both;
	position: relative;
	background: radial-gradient(#11581E, #041607);
	color: rgba(128, 255, 128, 0.8);
	text-shadow:
		0 0 1ex rgba(51, 255, 51, 1),
		0 0 2px rgba(255, 255, 255, 0.8);
	bottom: 0;
	margin: 0;
	padding: 15px 0;
	width: 100%;
}
.footerNOISE {
	pointer-events: none;
	position: absolute;
	width: 100%;
	background-image: url("https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif");
	background-repeat: no-repeat;
	background-size: cover;
	z-index: -1;
	opacity: .02;
}
/* _______________________________________________footerOVERLAY */
.footerOVERLAY {
	pointer-events: none;
	position: absolute;
	width: 100%;
	background:
		repeating-linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 0,
		rgba(0, 0, 0, 0.3) 50%,
		rgba(0, 0, 0, 0) 100%);
	background-size: auto 4px;
	z-index: 1;
}

.footerOVERLAY::before {
	content: "";
	pointer-events: none;
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(
		0deg,
		transparent 0%,
		rgba(32, 128, 32, 0.2) 2%,
		rgba(32, 128, 32, 0.8) 3%,
		rgba(32, 128, 32, 0.2) 3%,
		transparent 100%);
	background-repeat: no-repeat;
	animation: scan 7.5s linear 0s infinite;
}

@keyframes scan {
	0%        { background-position: 0 -100vh; }
	35%, 100% { background-position: 0 100vh; }
}

.scanlines {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(255,255,255,0) 50%,
        rgba(0,0,0,.2) 70%,
        rgba(0,0,0,.6)
    );
    background-size: 100% 2px;
    position: fixed;
    pointer-events: none;
}
.scanlines:before {
	position: absolute;
	top: 0px;
	width: 100%;
	height: 3px;
	background: #fff;
	background: linear-gradient(to bottom,
		rgba(255,0,0,0) 0%,
		rgba(255,250,250,1) 50%,
		rgba(255,255,255,0.98) 51%,
		rgba(255,0,0,0) 100%
	);
	opacity: .1;
}
.scanlines:after {
	box-shadow: 0 2px 6px rgba(25,25,25,0.2),
		inset 0 1px rgba(50,50,50,0.1),
		inset 0 3px rgba(50,50,50,0.05),
		inset 0 3px 8px rgba(64,64,64,0.05),
		inset 0 -5px 10px rgba(25,25,25,0.1);
}

.terminal ~ .scanlines:before {
    content: '';
    display: block;
    animation: vline calc(var(--time, 2) * 1s) linear infinite;
}

@supports (-ms-ime-align:auto) {
    .scanlines:before {
        content: '';
        animation: vline 3s linear infinite;
    }
}
@keyframes vline {

	100% { transform: translate(0, 100vh)}
}




#bienvenue{display: none;}
#blank_page{padding: 15px;}
#blank_page p {text-align:justify;}





/****************************HOME**************/

.home {
	position: fixed;
	top: 10px;
	left: 30px;
	z-index: 1000;
	text-decoration: none;
	
	
	/* padding: 2rem; */
	/* font-size: 2rem; */
	/* line-height: 0; */

}

/*#home img {      ******si fuera una imagen
	
	
	
	height: 50px; 
	cursor: pointer;
	transition: transform 0.2s ease;
	
	efecto al pasar el raton por encima
}	
	#home img:hover {transform: scale(1.05);}
*/


.home p {
	
	font-size: 3rem;
	width: auto;
	cursor: pointer;
	transition: transform 0.2s ease;
}
	
/* .home p:hover {transform: scale(1.5);} */



.filete {
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  z-index: 2000;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .pantalla {
  padding-top: 102px;
}

.home.mu_th_ur.pegajoso {
	position: static;
	display: inline;
	
	
}