/* Formateo previo de elementos*/
*{
    padding:0;
    margin:0;
}


/*importacion de fuentes personalizadas*/
@font-face {
    font-family: '01-Digit';
    src:url('fonts/01-Digit.ttf.woff') format('woff'),
        url('fonts/01-Digit.ttf.svg#01-Digit') format('svg'),
        url('fonts/01-Digit.ttf.eot'),
        url('fonts/01-Digit.ttf.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Amiga-Forever';
    src:url('fonts/Amiga-Forever.ttf.woff') format('woff'),
        url('fonts/Amiga-Forever.ttf.svg#Amiga-Forever') format('svg'),
        url('fonts/Amiga-Forever.ttf.eot'),
        url('fonts/Amiga-Forever.ttf.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}


/*Reglas sobre selectores generales*/

p{
    font-family:monospace,'Amiga-Forever','01-Digit';
    font-size:larger;
    text-align:justify;
    padding-left: 20px;
    padding-right:20px;
    margin-top: 20px;
 }


h1{
    color:#0e961c ;
    font-family: 'Amiga-Forever','01-Digit', monospace;
    font-size:xx-large;
    margin-left: 20px;
    padding-top: 200px;
}


h2{
    color:rgb(14, 150, 28) ;
    font-family:'Amiga-Forever','01-Digit', monospace;
    font-size:large;
    margin-left: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
}


li{
    list-style: none;
    font-family: '01-Digit','Amiga-Forever', monospace;
    margin-bottom: 5px;
    font-size: larger;
    font-weight: 700;
}


a {
    margin-left: 20px;
    color:#0b7c16;
    font-family: '01-Digit','Amiga-Forever', monospace;
    font-size: larger;
    font-weight: 700;
}


footer a{
        font-family: monospace;
        font-size: larger;
}


date{
    color: #0e961c;
    margin-left: 20px;
    font-family:  'Amiga-Forever','01-Digit', monospace;
    font-size: small;

}


body{
    background-color: rgb(37, 37, 37);
    color: rgb(112, 112, 112);
    text-align: left;
    margin: 20px;
    overflow-x: hidden;
    
}



footer{
    margin-top: 50px;
    color:#0e961c ;
    display: flex;
    justify-content: center;
    font-size: large;
    font-family: 'Amiga-ForEver', monospace;
}


/*Animaciones*/

.parpadeo {
      animation: blink 1s infinite;
}

@keyframes blink {
      0%, 100% {
      opacity: 1; /* Visible */
	}
	50% {
      opacity: 0; /* Invisible */
    	}
}


/*Menus*/

.menu {
    background-color: rgb(37, 37, 37);
    border: 2px solid #0e961c;
    padding: 20px;
    display:flex;
    flex-wrap: wrap;
    position: fixed;
    width: 95%;
   /* z-index:10; */
}

.menu ul{
    display:flex;
    justify-content:flex-end;
    flex-wrap: wrap;
    flex-grow: 1;
}

.menu li{
    justify-content: end;
    flex-wrap: wrap;
    flex-grow: 0;
    flex-shrink: 1;
}

/*layout index*/

.presentacion{
    display:flex;
    justify-content:space-between;
    flex-wrap: wrap;
    margin-bottom: 200px;
}


.presentacion p{
    text-align:left;
    font-family: 'Amiga-Forever','01-Digit',monospace;
    font-size:large;
}


.izdo{

    flex-basis: 50%;
    margin-right:20px;
}

.lateral{
    display:flex;
    flex-direction: column;
    align-self: flex-start;
}


#redes{
    padding-right: 200px;
}


#intereses{
    padding-right: 300px;
}


#experiencia{
    padding-right:260px;
}


canvas{
  /*position:relative;*/	
    margin-bottom: 0px;
    border: 1px solid #0e961c;
    max-width: 800px;
    width: 100%;
    height: 40vh;
  /*z-pisplay:9;*/
}


svg{
    display: flex;
    width: 100%;
    max-width: 800px;
    margin-top: 0px;
}


.formacion{
    display:flex;
    justify-content: space-around;
    flex-wrap: wrap;
}


.presentacion img{
    width: 40vb;
    margin-botton: 60px;
}

/*
#iconos{
    padding-left: 50px;
    padding-top: 40px;
}
*/

/* Estilo del tooltip de index */

.tooltip {
    position: absolute;
    background-color: #0e961c;
    color:rgb(37, 37, 37);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 900;
    white-space: nowrap;
    pointer-events: none;  Evita interferencias con el cursor */
    display: none; /* Oculto por defecto */
}



/*layout formacion*/

.formacion2{
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-top: 50px;
}


.curr{
    padding-left: 25%;
    padding-top: 100px;
}


.curr img{
    width: 70%;
}


.curso img{
    width:70%;
    max-width: 700px;
}


.formacion2 a{
    margin-left: auto;
}


.cursos{
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 150px;
}

.curso{
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}


/*layout intereses*/

#aprender{
    padding-top: 100px;
}

#videojuegos{
    padding-top:100px;
}

#multimedia{
    padding-top: 100px;
}


#ia{
    padding-top: 100px;
}

#deporte{
    padding-top: 100px;
}

.cont{
display:flex;
justify-content:flex-start;
align-items:start;
flex-wrap: wrap;

}

.cont  img{
    display: flex;
    width: 60%;
    margin-left: 20px;
    margin-bottom: 20px;;
}



/*layout experiencia*/

.tituloExperiencia{
    color:#0e961c ;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: last baseline;
    margin-top: 100px;
    margin-bottom: 50px;
}

.tit{
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.tit:nth-child(2){
    width: 140px;
    overflow: visible;
    margin-left: 20px;
}

.articulo{
    display: flex;
    flex-direction: column;
    padding-top: 80px;
    width: 95%;
}

/*
.tituloExperiencia img{
    width:160px;
    height: 100px;
}

#leroy{
    padding-top: 80px;
}

#seur{
    padding-top: 80px;
}

#dhl{
    padding-top: 80px;
}

#memorandum{
    padding-top: 80px;
}
*/
.softs{
	color: #ffffff;
}




/*layout contactame */

#contact p{
    font-family:'Amiga-Forever','01-Digit', monospace ;
    padding-left: 12%;
    padding-right: 10%;
    width: 70%;
  /*  text-align:left;*/
}


#contact{
    display:flex;
    flex-direction:row;
    justify-content:center;
    gap: 100px;
    flex-wrap: wrap;
}

form{
    width:70%;
    margin-left: -10%;
}

label{
    margin-top: 30%;
    margin-left: 10%;

}

fieldset{
    margin-left: 6vw;
    width: 100%;
    font-family: 'Amiga-Forever','01-Digit', monospace ;
    color: #0b7c16;
    border: 2px solid #0b7c16;
}

input{
    width:30%;
}

#empresa{
    margin-left: 7%;
}

#contacto{
    margin-left: 8%;
}

#email{
    margin-left: 9%;
}

textarea{
    width: 70%;
    margin-left: 10%;
    margin-top: 5%;
}

button{
    background-color: #0b7c16;
    width: 150px;
    height: 30px;
}

/*interfaz para moviles*/

@media (max-width: 768px){

/*Menu móvil*/
.menu{
    position:relative;
    display:flex;
    justify-content:center;
    border:#0b7c16 solid 3px;
    width:80vw;
    margin-left: 2%;
}

.menu #inicial{
    
    margin-left: 0vw;
    margin-bottom: 30px;
    padding:10px;
    border:#0b7c16 solid 3px;
    width:37vw;
}

.menu a{
    display:flex;
    justify-content:center;
    text-align: center;
    overflow: hidden;	    
}

.menu ul{
    display:flex;
    justify-content:center;
}

.menu li {
    display:flex;
    justify-content:center;
    border:#0b7c16 solid 3px;
    padding:10px;
    padding-right: 20px;
    width:37vw;
    margin-bottom: 30px;
}

/*Selectores individuales*/

p{
    font-size:small;
    text-align:justify;
}

h1{
    padding-top:50px;
}

h2{
    margin-top:  80px;
}

footer p{
     text-align:center;
     font-size: xx-small;
     margin-left:0px;
     padding-left:0px;
     padding-right:0px;
}


/* Layout index */

.presentacion p{
     text-align:left;
     font-size:small;
}


.presentacion{
        margin-bottom: 40px;
        flex-direction: column;
        align-content: center;
}


.izdo{
	align-self: center;
	margin-right: 0px;
	width: 100%;
}  

.lateral{
	align-self: center;
}

/*layout formacion*/
.curr{
       padding-top: 0px;
}

.cursos{
       padding-top: 0px;
}

#iconos a img{
	margin-bottom: 40px;
	margin-left: 0vw;
}

/*Layout experiencia e intereses */

.tituloExperiencia{
        width: 90vw;
}

#intereses{
        margin-left: -45vw; 
	padding-right: 0px;
}

#experiencia{
        margin-left: -30vw;
	padding-right: 0px;
}

#experiencia h2{
	margin-top: 20px;
}



/*Layout contactame*/
input{
    width:60%;
}


}