/*---------------------------GENERAL*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --oscuro: #171317;
    --gris: #7b7583;
    --claro:#a9adc1;
    --crema: #A78976;
    --negro: #141414;
    --morado: #523497;
    --blanco: #ffffff;
    --morado-oscuro: rgb(27, 10, 79);
    --fuente-titulo: font-family: 'Alexandria', sans-serif;
    --fuente-general: font-family: 'Raleway', sans-serif;
}
/*---------------------------INICIO HEADER*/
.header {
    background-color:var(--morado-oscuro);
    border-radius:3px;
    padding: 1.5rem 3rem;
    display: flex;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    justify-content: end;
}
/*---------------------------NAVEGADOR*/
.nav_menu{
    display: flex;
    gap: 70px;
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
}
.nav_menu a{
    text-decoration: none;
    color: var(--blanco);
}
a:hover{
    color: var(--gris);
}
/*---------------------------FIN HEADER*/


/*---------------------------INICIO MAIN*/
/*---------------------------------HOME*/
.home{
    display: flex;
    margin-top: 5%;
    height: 92vh;
    align-items: center;
    padding: 8%;
}
.home-text h2, p{
    font-family: 'Raleway', sans-serif;
    font-size: 200%;
}
.home-text h1{
    font-family: 'Alexandria', sans-serif;;
    font-size: 350%;
}
.title {
    position: relative;
    font: 200px Helvetica, Sans-Serif;
    letter-spacing: -2px;
    color: rgba(0,0,255,0.5); 
}
.title:after {
    content: "Jasbir Singh";
    position: absolute; left: 2px; top: 2px;
    color: rgba(255,0,0,0.5);   
}
.home-img img{
    transition: 25s;
}
.contenedor {
	display: table;
    margin-bottom: 1%;
}
.maquina { 
	position: relative; 
	float: left;
	background: var(--blanco);
	color: var(--negro);
	font-size: 2.5em;
}
.maquina span {
    position:absolute;
    right:0;
    width:0;
    background: rgb(255, 255, 255);
    border-left: 1px solid #000;
    animation: escribir 5s steps(30) infinite alternate;
}
@keyframes escribir {
    from { width: 100% }
    to { width:0 }
}
.container_button {
	display: flex;
	align-items: center;
    justify-content: center;
    padding: 10px;
    gap: 40px;
    margin-top: 20px;
}
.cv_button {
    padding: 5px;
	font-family:'Raleway', sans-serif;
	font-size: 20px;
	text-align: center;
	color: #ffffff;
    cursor: pointer;
    width: 100%; 
    outline: 3px solid;
    outline-color: var(--morado-oscuro);
    outline-offset: 5px;
    transition: all 600ms cubic-bezier(0.2, 0, 0, 0.8);
    height: 45px; 
	padding-left: 5px;
	padding-right: 5px; 	
	margin-bottom: 20px;
	margin-top: 10px; 	
	text-transform: uppercase;
	background-color: var(--morado-oscuro); 
	border-color: #000000; 
	border-style: solid; 
	border-radius: 3px;	
	width: 420px;   
    cursor: pointer;
}
.contact_button{
    padding: 5px;
    font-family:'Raleway', sans-serif;
	font-size: 20px;
	text-align: center;
	color: #ffffff;
    cursor: pointer;
    width: 100%; 
    outline: 3px solid;
    outline-color: var(--morado-oscuro);
    outline-offset: 5px;
    transition: all 600ms cubic-bezier(0.2, 0, 0, 0.8);
}
.contact_button:hover {
	color: rgba(71, 126, 232, 0.7);
    outline-color: rgba(71, 126, 232, 0);
    outline-offset: 100px;
    transition: 1s;
}
.cv_button:hover {
	color: rgba(71, 126, 232, 0.7);
    outline-color: rgba(71, 126, 232, 0);
    outline-offset: 100px;
    transition: 1s;
}
/*---------------------------FIN HOME*/

/*----------------------------SOBRE MI*/
.sobremi_container{
    display: flex;
    margin-top: 5%;
    align-items: center;
    align-content: center;
}
.sobremi{
    display: flex;
}
.sobremi img{
    align-content: center;
    height: 700px;
    width: 700px;
}
.sobremi p{
    text-align: justify;
    margin-right: 30px;
}
.title_sobremi{
    border-radius:3px;
    background-color: var(--morado-oscuro);
    color: white;
    text-align: center;
    padding: 2%;
    font-family: 'Alexandria', sans-serif;
    font-size: 200%;
}
/*---------------------------FIN SOBRE MI*/
/*-------------------------------HABILIDADES*/

.habilidades{
    background-color: #1a094e;
    display: flex;
    flex-direction: column;
    margin-top: 5%;
    align-items: center;
    align-content: center;
    width: 100%;
    height: 80%;
    border-radius:3px;
}

.habilidades h1{
    display: block;
    text-align: center;
    color: white;
    font-family: 'Alexandria', sans-serif;
    font-size: 200%;
    letter-spacing: .1rem;
    padding: 6rem 0 5rem 0;
}

.cards_container--habilidades {
    display: grid;
    grid-template-columns: 13rem 13rem 13rem 13rem;
    grid-template-rows: 14rem 14rem 14rem;
    gap: 3rem;
    justify-content: center;
    padding-bottom: 5rem;
}

.cards--habilidades {
    background-color: gray;
    border-radius:3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 13rem;
    height: 14rem;
    opacity: 0.7;
    filter:alpha(opacity=70);
	-moz-opacity:.70;
}
.cards--habilidades:hover{
    opacity: 100;
    transition: 1ms;
    border: 2px solid white;
}

.cards--habilidades img {
    margin-top: .7rem;
    width: 9rem;
}

.cards--habilidades p {
    color: white;
    font-family:'Raleway', sans-serif;
    letter-spacing: .1rem;
    font-size: 1.4rem;
    margin-bottom: .7rem;
}
/*---------------------------------FIN HABILIDADES*/
/*---------------------------------INICIO FORMACION*/
.formacion {
    width: 100%;
    height: auto;
}

.formacion h1 {
    display: block;
    text-align: center;
    color: black;
    font-family: 'Alexandria', sans-serif;
    font-size: 200%;
    letter-spacing: .1rem;
    padding: 6rem 0 5rem 0;
}

.cards_container--formacion {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 2rem 3rem 2rem;
}

.cards--formacion {
    background-color:var(--morado-oscuro);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 30rem;
    height: 25rem;
    margin: 0 1rem 2rem 1rem;
    padding: 1rem;
    justify-content: space-between;
    box-shadow:0 2px 3px 0px rgba(0,0,0,0.25);
    border-radius:3px;
    transition:.2s all; 
}

.cards_container--formacion{
    display:flex;
    align-items:center;
    justify-content:center;
}
.cards_container--formacion:hover .cards--formacion{
    filter:blur(3px);
    opacity:.5;
    transform: scale(.98);
    box-shadow:none;
}
.cards_container--formacion:hover .cards--formacion:hover{
    transform:scale(1);
    filter:blur(0px);
    opacity:1;
    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
}


.cards--formacion img {
    width: 25rem;
}

.container_texto--formacion {
    margin-bottom: 1.3rem;
}

img.logo-cmc {
    width: 15rem;
}

img.logo-inti {
    width: 20rem;
    margin: 7rem 0 6rem 0;
}

img.logo-egg {
    width: 12rem;
    margin: 2.5rem 0;
}
img.logo-gyl {
    width: 10rem;
    margin: 2.4rem 0;
}

.cards--formacion p:nth-child(1) {
    color: white;
    font-family:'Raleway', sans-serif;
    letter-spacing: .1rem;
    font-size: 1.2rem;
    margin-bottom: .7rem;
}

.cards--formacion p:nth-child(2) {
    color: rgb(255, 255, 255);
    font-family:'Raleway', sans-serif;
    letter-spacing: .1rem;
    font-size: 1rem;
}
/*---------------------------------FIN FORMACION*/
/*---------------------------------INICIO CONTACTO*/
.contact_form{	
	width: 800px; 
    height: auto;
    margin: 80px auto;
	border-radius: 3px;  
	padding-top: 30px;
	padding-bottom: 20px;  
    background-color: var(--claro); 
    padding-left: 100px; 
}


input{
	background-color: #fbfbfb; 
	width: 600px; 
	height: 40px; 
	border-radius: 5px;  
	border-style: solid; 
	border-width: 1px; 
	border-color: var(--morado-oscuro); 
	margin-top: 10px;  
	padding-left: 10px;
    margin-bottom: 20px; 
}


textarea{
    background-color: #fbfbfb; 
	width: 600px; 
	height: 150px; 
	border-radius: 5px;  
	border-style: solid; 
	border-width: 1px; 
	border-color: var(--morado-oscuro); 
	margin-top: 10px;  
	padding-left: 10px;
    margin-bottom: 20px; 
    padding-top: 15px; 
}


label{
    display: block; 
	float: center; 	
}


.form_button{
	height: 45px; 
	padding-left: 5px;
	padding-right: 5px; 	
	margin-bottom: 20px;
	margin-top: 10px; 	
    margin-left: 95px;
	text-transform: uppercase;
	background-color: var(--morado-oscuro); 
	border-color: #000000; 
	border-style: solid; 
	border-radius: 3px;	
	width: 420px;   
    cursor: pointer;
}

button p{
	color: #fff; 
}

span{
	color: #ab4493; 
}

.aviso{
	font-size: 13px;  
	color: #0e0e0e;  
}

.form_title{
	text-align: letf; 
	padding-bottom: 20px; 
	color: #000000;
    font-family: 'Alexandria', sans-serif;
    font-size: 200%;
}

.h3_title{
	font-size: 16px; 
	padding-bottom: 30px;
	color: #0e0e0e;
    font-family:'Raleway', sans-serif;
    letter-spacing: .1rem;
    font-size: 1.4rem;  
}

.form_p{
	font-size: 14px; 
	color: #0e0e0e; 
}

::-webkit-input-placeholder {
    color: #a8a8a8;
}

::-webkit-textarea-placeholder {
    color: #a8a8a8;
}

.formulario input:focus{
	outline:0;
	border: 1px solid #97d848;
}

.formulario textarea:focus{
	outline:0;
	border: 1px solid #97d848;
}

/*---------------------------------FIN CONTACTO*/

/*--------------------------------- INICIO FOOTER*/
.footer{
    background-color:var(--morado-oscuro);
    display: flex;
    align-items: center;
    width: 100%;
    height: 250px;
    justify-content: center;
    margin: 0;
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
}

.link_home a {
    font-size: 2rem;
    font-family:'Raleway', sans-serif;
    text-decoration: none;
    letter-spacing: 2px;
    color: var(--blanco);
}

.container_links--footer {
    padding: 2rem 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.container_links--footer a {
    color: var(--blanco);

    font-family:'Raleway', sans-serif;

    font-size: 1rem;
    margin: 0 .8rem;
    text-decoration: none;
}

.container_redes-footer a {
    text-decoration: none;
    margin-bottom: 1rem;
}

.container_redes-footer img {
    width: 3rem;
}

.container_text--footer {
    padding-bottom: 1rem;

}

.container_text--footer span {

    font-family:'Raleway', sans-serif;
    font-size: 1rem;
    letter-spacing: 1px;
}

.container_text--footer span:nth-child(1),
.container_text--footer span:nth-child(3) {
    color: var(--gris);
}

.container_text--footer span:nth-child(4) {
    color: var(--gris);
}

/*---------------------------------FIN FOOTER*/