:root{
	/*white & black*/
	--fontColorD: #ffffff;
	--bodyColor:  #242423;
	--fontSpecialL: #fca311 ;
	--fontSpecialD: #14213d ;

	--headerColor: white ;
	--barraMenuColor: white;
	--objetoColor: black ;
	--borderColor: black ;
	
	--error: red;
	--bien: green;

	--font:  'Roboto Mono', monospace;
	/*--font:  'Kdam Thmor Pro', sans-serif;*/
}
html{
	/*background-color: #0A0A0A;#211e20*/
	background-color:  var(--bodyColor);
	height: 100%;
	
	/*background-image: url("img/fondoCorcho.jpg");
	//background-repeat: repeat;
	background-size: cover;*/

}
body{
	margin:0px;
}

.containerTitle{
	display: none;
	width: 100%;
	margin: 1% 0%;
	font-size: 100%;
	text-align: center;

}
#programTitle{
	color: var(--fontColorD);
	font-family: Consolas;
	font-weight: bold;
}
#designTitle{
	color: var(--fontColorD);
}
.changeStyle{
	width: 10%;
	display: block;
	position: fixed;
	z-index: 5;
	top: 5px;
	right: 5px;
	text-align: center;

}
.changeStyleButton{
	font-family: var(--font);
	position: fixed;
	z-index: 5;
	top: 20px;
	right: 25px;
	width: 7.5%;
	background-color: transparent;
	border: 2px solid var(--fontColorD);
	margin:0%;
	padding: 0.5% 0.5%;
	font-size: 100%;
	cursor: pointer;
}

#CSBD{
	display: block;
	color: var(--bodyColor);
	border: 2px solid var(--bodyColor);
	
}

#CSBD:hover{
	
	cursor: pointer;
	background-color: lightgray;
}
#CSBL{
	display: block;
	color: var(--fontColorD);
	border: 2px solid var(--fontColorD);
}
#CSBL:hover{
	font-weight: bold;
	cursor: pointer;
	color: var(--bodyColor);
	background-color: var(--fontColorD);
}
/*design css*/
	.pageButtonBox{
		
		background-color: transparent;
		margin: none;
		padding: 0%;
		width: 75%;
		margin-top: 0%;
		margin-left: 12.5%;
	}
	.pageButton{
		font-family: var(--font);
		width: 20%;
		border: none;
		margin: 0%;
		padding: 1% 1%;
		background-color: transparent;
		color: var(--fontColorD);
		font-size: 125%;
		display: inline-block;
	}
	.pageButton:hover{
		cursor: pointer;
		background-color: var(--fontColorD);
		color: var(--bodyColor);
	}
	#pageSelected{
		background-color: var(--fontColorD);
		color: var(--bodyColor);
	}

	#myBtn {
	  	display: none; /* Hidden by default */
	  	position: fixed; /* Fixed/sticky position */
	  	bottom: 20px; /* Place the button at the bottom of the page */
	  	right: 25px; /* Place the button 30px from the right */
	  	z-index: 99; /* Make sure it does not overlap */
	  	min-width: 5%;
		font-size: 100%;
	  	font-family: var(--font);
		color: var(--fontColorD);
		padding: 0% 1%;
		background-color: transparent;
		border: none;
		margin: 0%;
		margin-right: 0%; 
		border: solid 2px var(--fontColorD);
	}
	#myBtn:hover{
		color: var(--fontColorD);
		cursor: pointer;
		border: solid 2px var(--fontColorD);
	}


	.designContainer{
		font-family: var(--font);
		background-color: var(--bodyColor);
		width: 100%;
	}
	.designWebConteiner{
		width: 100%;
		margin:0%;
		padding: 0%;
		border:none;
		background-color: transparent;
	}
	.designMenuBar{
		background-color: transparent;
		width: 94%;
		padding: 0% 2.5%;
		
		margin: 0%;
		border:none;
		border-bottom: none;

	}
	
	/*.designMenuTitle {
	    background: linear-gradient(to bottom, #cfc09f 22%, #cfc09f 26%, #cfc09f 27%,#ffecb3 40%,#3a2c0f 78%); 
	    -webkit-background-clip: text;
	    -webkit-text-fill-color: transparent;
	    color: #fff;
		
	    position: relative;
		text-transform: uppercase;	
		font-size: 5vw;
		margin: 0;
		font-weight: 400;
		text-align: center;
	}

	.designMenuTitle:after {
	    background: none;
	    content: attr(data-heading);
	    left: 0;
		top: 0;
	    z-index: -1;
	    position: absolute;
	    text-shadow: 
			-1px 0 1px #c6bb9f, 
			0 1px 1px #c6bb9f, 
			5px 5px 10px rgba(0, 0, 0, 0.4),
			-5px -5px 10px rgba(0, 0, 0, 0.4);
	}*/
	.designMenuButtonContainer{
		position: fixed;
		top: 20px;
		right: 25px;
		z-index: 100;
		margin-top: 0%;
		width: 20%;
		text-align: right;
	}
	#resume{
		position: fixed;
		top: 40px;
		right: 25px;
		z-index: 100;
		margin-top: 0%;
		width: 6%;
		
		border: solid 2px var(--fontColorD);

	}
	#resume:hover{
		border: solid 2px var(--fontColorD);
	}
	#leftButton{
		
		text-align: left;
	}
	#rightButton{
		right: 25px;
		text-align: right;
	}
	.designMenuButtonLeft{
		font-size: 100%;
		font-family: var(--font);
		min-width: 50.5%;
		color: var(--fontColorD);
		padding: 1% 1%;
		background-color: transparent;
		margin: 0%;
		margin-right: 0%; 
		margin-top: 2.5%;
		border: solid 2px var(--fontColorD);
	}
	.designMenuButtonLeft:hover{
		border: solid 2px var(--fontSpecialL);
		color: var(--fontSpecialL);
		cursor: pointer;
	}
	.designMenuButton{
		font-size: 100%;
		font-family: var(--font);
		min-width: 25.5%;
		color: var(--fontColorD);
		padding: 0% 1%;
		background-color: transparent;
		margin: 0%;
		margin-right: 0%; 
		margin-top: 2.5%;
		border:none;
	}
	.designMenuButton:hover{
		color: var(--fontColorD);
		cursor: pointer;
	}
	.designContent{
		width: 100%;
		margin: 0%;
		padding: 0%;
		border: none;

	}

	/*#aboutButton:hover{
		box-shadow: -2.5px 2.5px #ECC236;
	}
	#portButton:hover{
		box-shadow: 0px 2.5px #ECC236;
	}
	#contactButton:hover{
		box-shadow: 2.5px 2.5px #ECC236;
	}*/
	.designMenuTitle{
		display: inline-block;
		width: 96%;
		padding: 0% 2%;
		margin: 0%;
		margin-bottom: 0%;
		text-align: left;
		font-size: 300%;
		font-weight: bold;
		margin-top: 0%;
		color: var(--fontColorD);
		
	}
	.designMainTextContainer{
		display: inline-block;
		width: 96%;
		padding: 0% 2%;
		margin: 0%;
		margin-bottom: 0%;
		text-align: left;
		font-size: 100%;
		font-weight: bold;
		margin-top: 0%;
		color: var(--fontColorD);
	}

	.designMainText{
		display: inline-block;
		width: auto;
		font-family: var(--font);
		color: var(--fontColorD);
		/*color: var(--fontSpecialL);*/
		margin:0%;
		font-size: 200%;
	}
	.resumeButton{
		font-size: 100%;
		font-family: var(--font);
		min-width: 25%;
		color: var(--fontColorD);
		padding: 1% 1%;
		background-color: transparent;
		margin: 0%;
		margin-top: 1%;
		border: solid 2px var(--fontColorD); 
	}
	.resumeButton:hover{
		border: solid 2px var(--fontSpecialL);
		color: var(--fontSpecialL);
		cursor: pointer;
	}
	.designMainSmallText{
		display: inline-block;
		width: auto;
		font-family: var(--font);
		color: #555568;
		margin:0%;
		font-size: 175%;
	}
	.designMainButton{
		font-family: var(--font);
		width: 15%;
		padding: 1%;
		border-radius: 2.5px;
		background-color:var(--fontColorD);
		border: 2px solid var(--bodyColor);
		color: var(--bodyColor);
		margin-left: 12.5%;
		margin-top: 1%;
	}
	.designMainButton:hover{
		border: 2px solid var(--fontColorD);
		cursor: pointer;
		
	}
	#colorTextMain{
		padding-left: 2%;
		color: var(--fontColorD);
	}
/*work design*/
	#p2{
		width: 100%;

	}
	.designWorkContainer{
		width: 75%; 
		background-color: transparent;
		padding: 1% 2% ;
		position: relative;
		
	}
	.workContainerTitle{
		background-color: transparent;
		display: inline-block;
		width: 100%;
		text-align: left;
		font-size: 200%;
		color: var(--fontColorD);
		margin:2% 0%; 
		padding: 0%; 
	} 
	.workContainer {
		padding: 1%;
		width: 100%;
		margin-bottom: 5%;
		margin-left: 0%;
	  	position: relative;
	  	z-index: 25;
	  	border: solid 2px var(--fontColorD);
	 	
	}
	.workContainer:hover{ 
		border-color: var(--fontColorD);
		/*cursor: pointer;*/
	} 
	.imgWork{
		vertical-align: middle;
		cursor: pointer;
		width: 25%;	
		display: inline-block;	
		cursor: pointer;
	}
	/*.imgWork:hover{
		animation: 
	    colorUp 0.25s steps(40, end),
	     .75s step-end infinite;
		filter:grayscale(0%);
	}
	@keyframes colorUp{
	  from { filter:grayscale(0%); filter:blur(0px) }
	  to { filter:grayscale(100%); filter:blur(10px) }
	}*/
	
	.workTextContainer {		
	  	/*position: absolute;
	  	top: 17.5%;
	  	left: 0%;*/
	  	background-color: transparent;
	  	padding: 0% 2%;
	  	display: inline-block;
	  	width: 69%;
	  	vertical-align: middle;
	 	
	}
	.workTitle{
		vertical-align: top;
		display: inline-block;
		margin: 0%;
		margin-bottom: 1%;
		margin-left: 0%;
		background-color: transparent;
		text-align: left;
		width: 100%;
		font-size: 200%;
		color: var(--fontColorD);
		color: var(--fontSpecialL);
		cursor: pointer;
	}
	.workTitle:hover{
		text-decoration: underline;
		cursor: pointer;
		
	}
	.workText{
		margin: 0%;
		margin-bottom: 1%;
		background-color: transparent;
		padding: 0%;
		color: var(--fontColorD);
		text-align: justify;
		font-size: 115%;
		width: 100%;
		display: inline-block; 
		/*animation: showWorkText 0.5s steps(40, end), .25s step-end ;*/
	}
	.workText label{
		color: var(--fontColorD);
		
	}
	.workText a{
		color: var(--fontColorD);
		text-decoration-color: var(--fontColorD);
	}
	 


	@keyframes showWorkText {
	  from { width: : 0 }
	  to { width: 80% }
	}

/*about design*/
	.designAboutContainer{
		width: 90%; 
		padding: 0% 2%;
		background-color: transparent;		
	}
	.aboutTitle{
		background-color: transparent;
		display: inline-block;
		width: 100%;
		text-align: left;
		font-size: 200%;
		color: var(--fontColorD);
		margin:0%;
		margin-bottom: 2%;
		padding: 0%; 
	}
	.aboutImgContainer{
		margin-left: 7.5%;
		width: 25%;
		display: inline-block;
	}
	.aboutImgContainer img{
		width: 100%;
		height: auto;
	}
	.aboutTextContainer{
		vertical-align: bottom;
		width: 50%;
		padding: 0%; 
		display: inline-block;
	}	
	.aboutText{
		display: inline-block;
		width: 90;
		margin: 0%;
		margin-left: 2%;
		font-size: 115%;
		color: var(--fontColorD);
		text-align: justify;
		margin-bottom: 1%;
		
	}
	.aboutText a{
		text-decoration: none;
		color: var(--fontSpecialL);
	}
	.aboutText a:hover{
		text-decoration: underline;
		text-decoration-color: var(--fontSpecialL);
	}
	#colorAboutText{
		margin: 0%;
		margin-left: 1%;
		color: var(--fontColorD);
	}
	.aboutListConteiner{
		width: 96%;
		margin-left: 2%;
		font-size: 115%;
	}
	.aboutListConteiner p{
		width: auto;
		color: var(--fontColorD);
		margin: 0%;
		padding: 0%;
	}
	.aboutListConteiner ul{
		margin: 0%;
		margin-top: 2%;
		padding: 0%;
		text-align: left;
		vertical-align: top;
		width: 45%;
		display: inline-block;
		list-style-position: inside;
		list-style-type: square;
	}
	
	.aboutListConteiner li{
		color: var(--fontColorD);
	}
/*contact design*/
	.designContactContainer{
		text-align:left;
		width: 96%; 
		padding: 3% 2%; 
		padding-bottom: 0%;
		background-color: transparent;
		
	}
	.contactTitle{
		background-color: transparent;
		display: inline-block;
		width: 100% ;
		text-align: left;
		font-size: 250%;
		color: var(--fontColorD);
		margin:0%;
		padding: 0%;
	}
		
	.contactText{
		margin: 0%;
		margin-top: 1%;
		margin-left: 1%;
		border:none;
		width: 100%; 
		padding: 0%;
		font-size: 125%;
		text-align: left;
		background-color: transparent;
		color: var(--fontColorD);
	}
	#colorTextContact{
		color: var(--fontColorD);
	}
	.contactLogosContainer{
		margin-top: 1%;
		margin-left: 1%;
		width: 100%; 
		text-align: left;
		padding-bottom: 1%;
	}
	.contactLogosContainer a{
		text-decoration:none;
	}
	.contactImg{
		display: inline-block;
		width: auto;
		height: 25px;  

		margin-top: 1%;
		filter: invert(1);
		/*filter: invert(57%) sepia(99%) saturate(621%) hue-rotate(352deg) brightness(104%) contrast(98%);*/
	}
	.contactLogosContainer a:hover .contactImg{
		/*filter: invert(57%) sepia(99%) saturate(621%) hue-rotate(352deg) brightness(104%) contrast(98%);*/
	}
	.contactLogosContainer a:hover .contactLogoText{
		color: var(--fontSpecialL);
		text-decoration: underline;
	}
	.contactLogoText{ 
		vertical-align: bottom;
		display: inline-block;
		margin: 0%; 
		border:none;
		width: auto; 
		padding: 0%;
		font-size: 125%;
		text-align: left; 
		color: var(--fontColorD);
		color: var(--fontSpecialL);
	}


	#madeby{
		padding: 2% 0%;
		margin: 0%;
	}
	.contactButton{
		border: 2px var(--fontColorD) solid;
		color: var(--fontColorD);
		background-color: transparent;
		width: 100%;
		margin-top: 1%;
		padding: 1%;
		padding: left: 2.5%;
		font-weight: bold;
	}
	.contactButton:hover{
		cursor: pointer;
		background-color: var(--fontColorD) ;
		color:var(--bodyColor);
	}
	
	
/*command css*/
	.programContainer{
		display: none;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		margin: none;
		padding: 0%;
		border:none;
		background-color: transparent;
		overflow: auto;
		font-family: Consolas;
		font-size: 100%;

	}
	.gridContent{
		width: 100%;
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: auto;
		grid-auto-rows: 30px; 
	}
	.input{
		height: 30px;	
		width: 100%;
		padding-bottom: 50%;
	}

	.rowNumber {
		overflow: hidden;
		display: inline-block;
		width: 4%;
		text-align: center;
		margin: 0%;
		padding: 0.5% 0%;
		color: gray;
	}
	.typeWriter {
	 	overflow: hidden;
	  /*var(--fontColorD)-space: nowrap; */
	  /*letter-spacing: .15em;*/
	  animation: 
	    typing 1s steps(40, end),
	     .75s step-end infinite;
	}

	@keyframes typing {
	  from { width: 0 }
	  to { width: 90% }
	}


	.textContent{
		overflow: hidden;
		display: inline-block;
		width: 90%;
		text-align: left;
		margin: 0%;
		padding: 0.25% 0%;
		color: var(--fontColorD);
	}
	#inputMain{
		font-family: Consolas;
		font-size: 100%;
		width: 100%;
		text-align: left;
		margin: 0%;
		padding: 0%;
		color: var(--fontColorD);
		border:none;
		background-color: transparent;
	}
	#inputMain:focus{
		outline: 0px transparent;
		width: 100%;
		background-color: transparent;
		border:0px transparent;
		border-radius: 0px;
		padding: 0%;
		margin: none;
		color: var(--fontColorD);
	}