@font-face {
    font-family: jBM;
    src: url(../font/jetBrainsMono.ttf);
    font-size: 20px;
    font-style: bold;
    font-weight: bold;
}

@font-face {
    font-family: ps;
    src: url(../font/productSans.ttf);
    /* font-size: 20px; */
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: ps_b;
    src: url(../font/productSans_bold.ttf);
    font-size: 20px;
    font-style: bold;
    font-weight: bold;
}

@font-face {
    font-family: ps_l;
    src: url(../font/productSans_light.ttf);
    font-size: 20px;
    font-style: light;
    font-weight: light;
}

@font-face {
    font-family: iF;
    src: url(../font/indieFlower.ttf); 
    font-size: 20px;
    font-style: light;
    font-weight: light;
}

@font-face {
    font-family: cC;
    src: url(../font/cascadiaCode.ttf); 
    /* font-size: 20px; */
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: cmunrm;
    src: url(../font/cmunrm.ttf); 
    /* font-size: 20px; */
    font-style: normal;
    font-weight: normal;
}

* {    
    --c1: #008888 ;            
    --c2: #ffffff;
    --c3: #000000; 
    --c2: #000;
    --c3: #fff;
    --c4: #888888; 
    --ct: #00000000;
    margin: 0px;
    padding: 0px;
    border: 0px;      
    font-family: ps;
}

::-webkit-scrollbar {
    width:  0px;
    height: 0px;
}

.contInicio {
    display: none;
}
.contJuanma {
    display: none;
}
.contCodigos {
    display: none;
}
.contProyectos {
    display: none;
}
.contHerramientas {
    display: none;
}
.contContacto {
    display: none;
}
.contJuegos {
    display: none;
}

body {
    background-color: var(--c3);
    height: 100vh; 
}

.background {
    position: absolute;
    z-index: -10;    
    opacity: 10%;        
    width: 100vw;
    height: 100vh; 
} 

.contenedor {    
    position: relative;
    z-index: 0;
    height: calc(100%- 3rem);  
}

h1 {    
    font-size: 2rem;
    color: var(--c1);    
    font-family: ps_b;    
    cursor: default;
}

.titulo{
    cursor: pointer;
    z-index: 1;
}

.subtitulo {
    font-size: 1.8rem;
    margin: 1rem;
    text-align: center;
    cursor: default;
    width: 100%;
}

h2 {
    text-align: center;    
    margin-top: 10px;         
    color: var(--c1);    
    font-family: ps_b;    
    cursor: default;
}

h3, h4 {    
    margin-top: 10px;    
    margin-left: 15px;
    color: var(--c1);    
    font-family: ps_b;    
    cursor: default;
}

p {        
    font-family: ps;    
    font-size: 1.1rem;
    
    color: var(--c2);
}

strong {
    font-family: ps_b; 
    font-size: 1.1rem;
    color: var(--c2);
}

.pIndicador {            
    font-family: ps;    
    padding: 1rem;    
    font-size: 1rem;
    background-color: var(--c3);
}

a {        
    font-family: ps_b;    
    text-decoration: none;
    color: var(--c2);        
}

a:hover {
    color: var(--c1);
}

button {
    height: max-content;
    font-family: ps;    
    font-size: 1rem;
    cursor: pointer;
    color: var(--c1);
    background-color: var(--c3);   
    cursor: pointer;
    padding: .4rem;      
    border-radius: .5rem;
    border: .2rem solid var(--c1);
    box-shadow: .2rem .2rem 0rem var(--c1);  
    background-color: var(--c3);
}

@keyframes click {
    0% {
        transform: translateX(0rem) translateY(0rem);        
        box-shadow: .2rem .2rem 0rem var(--c1);      
    }
    50% {
        transform: translateX(.2rem) translateY(.2rem);        
        box-shadow: 0rem 0rem 0rem var(--c1);      
    }
    100% {
        transform: translateX(0rem) translateY(0rem);
        box-shadow: .2rem .2rem 0rem var(--c1);  
    }
}

button:active {
    animation: click .3s forwards;  
    box-shadow: var(--ct) 2px 2px;
}

.labelForElementCheck {  
    margin-top: 1.2rem;    
    margin-left: 1rem;   
    color: var(--c1);
    font-family: ps_b;    
  }
  
.checkboxContainer {  
    margin: var(--margin);  
    margin-top: 1rem;
    cursor: pointer;
}
  
.checkboxContainer input {
    display: none;
}
  
.checkboxContainer svg {
    width:  1.6rem;
    height: 1.6rem;
    overflow: visible;
  }
  
.checkboxSvg {
    fill: none;
    stroke: var(--c2);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease;
    stroke-dasharray: 241 9999999;
    stroke-dashoffset: 0;
  }
  
.checkboxContainer input:checked ~ svg .checkboxSvg {
    stroke-dasharray: 70.5096664428711 9999999;
    stroke-dashoffset: -262.2723388671875;
  }

.input-group {
    margin-top: 10px;
    margin-left: 10px;
    position: relative;    
    width: max-content;
}

input {        
    width: 100%; 
    /* width: calc(100% - 2.5rem);         */
    font-family: ps;
    border: solid 1.5px var(--c4);
    border-radius: .3rem;
    background: none;
    padding: .3rem;
    padding-left: .5rem;   
    font-size: 1rem;
    color: var(--c2);
    margin-top: .8rem;
    background-color: var(--c3);
}

input:focus, input:valid {
    outline: none;
    border: 1.5px solid var(--c1);
}

input:focus ~ label, input:valid ~ label {        
    transform: translateY(-1.1rem) translateX(-0.5rem) scale(0.8); 
    background-color: var(--c3);
    /* padding: .1rem; */
    color: var(--c1);
    padding-left: .5rem;    
    padding-right: .5rem;    
    border: 0rem solid var(--c1);        
    left: 0rem; 
}
 
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

input[type="range"] {
    margin-top: 0rem;
}

.user-label {
    font-family: cmunrm; 
    width: max-content;
    position: absolute;
    top: 1.2rem;
    left: .6rem; 
    color: var(--c2);
    pointer-events: none;    
}

.user-label::after {
    color: var(--c1);
}

textarea {
    margin-top: 10px;
    margin-left: 10px;
    width: calc(100% - 3.2rem);
    font-family: ps;
    border: solid 1.5px var(--c4);
    border-radius: 1rem;
    background: none;
    padding: 1rem;    
    font-size: 1rem;
    color: var(--c2);
}

textarea:focus, input:valid {
    outline: none;
    border: 1.5px solid var(--c1);
}


.custom-controls {
    display: flex;
    flex-direction: row; 
    position: absolute;
    right: 4rem;
    top: 0.45rem;    
    width: 2rem 
}

.custom-controls button {
    margin-left: .3rem; 
    flex: 1;
    background: transparent;    
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    transition: background 0.2s
}

.custom-controls button svg {
    width: 1rem; 
    height: 1rem;
    fill: var(--c4)  
}

.custom-controls button:hover svg {
    fill: var(--c2)
}




table {
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 15px;
    color: var(--c2);
    border-spacing: 10px;
}

td {
    font-family: ps;
    border: var(--c1) 1px solid;
    border-radius: 5px;
    padding: 5px;
}

.tdIndex {
    padding-left: 1rem;
    padding-right: 1rem;
}

.tdIndexNoBorder {
    border: none;
    padding-left: 1rem;    
}

.tdIndexText {
    font-size: 1.05rem;
}

.tdTitle {
    border: var(--c1) 0px solid;
    text-align: center;
}

.resultado {        
    border-radius: .5rem;    
}

.resultado:focus, .resultado:valid {
    outline: none;
    border-width: 0px;
    border-left-width: 2px;
    margin-top: 10px;
    margin-right: 10px;
    border-right-width: 2px;
}


.center {
    display: flex;
    justify-content: center;
    align-items: center;        
}

.marginLR {    
    margin-left: 15px;
    margin-right: 15px;
}

.marginTL {
    margin-top: 10px;    
    margin-left: 15px;
}

.marginTLR {
    margin-top: 10px;    
    margin-left: 15px;
    margin-right: 15px;
}

@keyframes anmtToArrowInicio {
    0% {
      transform: scale(1, 1) translateX(-2rem); 
      filter: drop-shadow(0px 0px 30px var(--c2));
    }
    50% {      
      transform: scale(0.9, 0.9) translateX(0); 
      filter: drop-shadow(0px 0px 0px var(--c3)); 
    }
    100% {      
      transform: scale(1, 1) translateX(-2rem);
      filter: drop-shadow(0px 0px 30px var(--c2)); 
    }
}

.spaceBottom {
    height: 1rem;    
    width: 100%;
}

input[type="range"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 200px;
	background-color: transparent;
    cursor: pointer; 
	&:focus {
		outline: none;
	}
}

input[type="range"]::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	appearance: none;
	height: 3px;
	background: var(--c1);
	background: -webkit-linear-gradient(
		left,
		var(--c1) 0%,
		var(--c2) 100%
	);
	background: linear-gradient(
		to right,
		var(--c1) 0%,
		var(--c2) 100%
	);
}

input[type="range"]::-moz-range-track {
	-moz-appearance: none;
	appearance: none;
	height: 3px;
	background: var(--c1);
	background: -moz-linear-gradient(
		left,
		var(--c1) 0%,
		var(--c2) 100%
	);
	background: linear-gradient(
		to right,
		var(--c1) 0%,
		var(--c2) 100%
	);
}

input[type="range"]::-ms-track {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: 3px;
	background: var(--c1);
	background: -moz-linear-gradient(
		left,
		var(--c1) 0%,
		var(--c2) 100%
	);
	background: -webkit-linear-gradient(
		left,
		var(--c1) 0%,
		var(--c2) 100%
	);
	background: linear-gradient(
		to right,
		var(--c1) 0%,
		var(--c2) 100%
	);
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	border: none;
	border-radius: 50%;
	height: 20px;
	width: 20px;
	position: relative;
	bottom: 8px;
	background: var(--c1);
	box-shadow: 0px 3px 5px 0px var(--c3);
}

input[type="range"]::-moz-range-thumb {
	-moz-appearance: none;
	appearance: none;
	border: none;
	border-radius: 50%;
	height: 20px;
	width: 20px;
	position: relative;
	bottom: 8px;
	background: var(--c1);
	box-shadow: 0px 3px 5px 0px var(--c3);
}

input[type="range"]::-ms-thumb {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	border-radius: 50%;
	height: 20px;
	width: 20px;
	position: relative;
	bottom: 8px;
	background: var(--c1);
	box-shadow: 0px 3px 5px 0px var(--c3);
}

select {
    font-family: ps;
    font-size: 1rem;
    color: var(--c2);
    background-color: var(--c3);
    border: .2rem solid var(--c1);
    border-radius: .5rem;
    padding: .4rem .5rem;
    padding-right: 2rem;
    box-shadow: .2rem .2rem 0rem var(--c1);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 7L11 1' fill='none' stroke='%23008888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    outline: none;
    transition: box-shadow .15s ease;
    margin-top: 1rem; 
}

select:focus {
    border-color: var(--c1);
    box-shadow: .2rem .2rem 0rem var(--c1);
    outline: none;
}

select:active {
    animation: click .3s forwards;
}

select option {
    font-family: ps;
    background-color: var(--c3);
    color: var(--c2);
} 


  /* //////////////////////////////////////////// */
  /* //////////////////////////////////////////// */
  /* //////////////////////////////////////////// */
  /* //////////////////////////////////////////// */
  /* //////////////////////////////////////////// */

  
.spamTop {
    display: flex;
    flex-wrap: wrap; 
    position: absolute;
    text-align: center;
    width: 100%; 
    top: -2.4rem;
}

.icoSpamTop {
    width: 2rem;
    cursor: none;
}

.titleSpamTop {        
    top: -2.2rem;    
    font-size: 1.3rem;
    color: var(--c1);
    margin-left: .5rem;  
    cursor: none;    
}

  /* //////////////////////////////////////////// */
  /* //////////////////////////////////////////// */
  /* //////////////////////////////////////////// */
  /* //////////////////////////////////////////// */
  /* //////////////////////////////////////////// */

  .selectionCards{
    display: flex;    
    flex-wrap: wrap;
    padding-bottom: 2rem;   
  }

  .selecccion {
    justify-content: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 2rem;
  }
  
  .card {
    cursor: pointer;
    flex-wrap: wrap;
    justify-content: center;
    display: flex;
    margin-left: 2rem;
    margin-top: 2rem;
    width: 190px;
    height: 254px;
    border-radius: 18px;
    background: var(--c3);  
    border: var(--c1) 2px solid;  
  }
  
  .cardImg {
    border-radius: 15px;    
    margin-top: 6px;
    height: 208px;
    width: 190px;  
  }
  
  .card:hover {
    display: flex;
    margin-left: 2rem;
    margin-top: 2rem;
    width: 190px;
    height: 254px;
    border-radius: 18px;  
    background: var(--c3);  
    border: var(--c1) 2px solid;    
    box-shadow: 3px 3px 0px var(--c1), 3px 3px 20px var(--c4);      
    transform: translateX(-3px) translateY(-3px);  
  }