@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cascadia+Mono:ital,wght@0,200..700;1,200..700&family=Exile&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rampart+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{      

        margin: 0;
        padding: 0;

}

html, body {

        max-width: 100%;
        overflow-x: hidden;

}

#fondo-inicio{  

        height: 100vh;
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        
        }

#fondo-inicio-izquierda{height: 100%;
                        background-image: url(img/Fondo-izquierdo-inicio.png);
                        zoom: 40%;}
        
#fondo-inicio-izquierda h1{     font-size: 5em;
                                padding-top: 1.3em;
                                color: white;
                                font-family: "Russo One", sans-serif;
                                font-weight: 400;
                                font-style: normal;
                                text-align: center;}

#fondo-inicio-derecha{  height: 100%;
                        background-image: url(img/Fondo-derecho-inicio.jpeg);
                        background-position: center;
                        zoom: 80%;
                        background-repeat: no-repeat;}

#fondo-inicio-derecha nav{      width: 100%;
                                height: 8%;
                                margin-top: 2em;
                                background-color: rgb(160, 158, 153);}

#fondo-inicio-derecha button{   width: 15%;
                                height: 50%;
                                margin-top: 1.4%;
                                margin-left: 13.25%;
                                background-color: rgb(160, 158, 153);
                                border: 1px rgb(160, 158, 153) solid;
                                font-size: 1.4em;
                                font-family: "Cascadia Mono", sans-serif;
                                font-optical-sizing: auto;
                                font-weight: weight;
                                font-style: normal;}

nav button a{       text-decoration: none;
                color: white;
                transition: 0.3s ease;}
nav button:hover{   transform:scale(1.2);}

#nombre{width: 30%;
        height: auto;
        top: 60%;
        left: 15%;
        position: absolute;}

#nombre p{      font-family: "Oxygen", sans-serif;
                font-weight: 400;
                font-style: normal;}

#nombre .p1{    font-size: 1.5em;
                letter-spacing: 2px;
                color: white;
                text-align: initial;}

#nombre .p2{    font-size: 4em;
                letter-spacing: 20px;
                margin-top: -6vh;
                color: white;}

#nombre .p3{    font-size: 2em;
                background-color: rgb(255, 230, 0);
                width: 100%;
                text-align: center;
                margin-top: -4vh;
                border-radius: 5px;}

#fondo-proyectos{       background-image: url(img/Fondo-proyectos.png);
                        background-repeat: no-repeat;
                        height: 100vh;
                        width: 100%;
                        object-fit: contain;
                        margin-top: 0;}

#fondo-proyectos h1{    text-align: center;
                        font-family: "Exile", system-ui;
                        font-weight: 400;
                        font-style: normal;
                        padding-top: 5vh;}        
    
        .proyectos{     width: 100%;
                        height: 80vh;
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;}

        .proyectos div{ width: 15%;
                        height: 30vh;
                        margin-top: 5%;
                        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);}

        .proyectos div:hover{   box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.5);}

        .proyectos a{   text-decoration: none;
                        color: rgb(0, 0, 0);}
    
        .proyectos div p{       text-align: center;
                                font-size: 1.25em;
                                font-family: "Bebas Neue", sans-serif;
                                font-weight: 400;
                                font-style: normal;}

        a img{  width: 100%;
                height: 25vh;}  

        .pr1{   margin-top: 0;
                width: 15%;
                margin-left: 22.5%;}

        .pr2{   margin-top: 0;
                margin-left: 5%;}
        
        .pr3{   margin-top: 0;
                margin-left: 5%;}
                
        .pr4{   margin-left: 22.5%;
                margin-top: 5%;}


#sobre-mi{      background-color: rgb(90, 85, 85);
                height: 100vh;
                display: flex;}

.avatar{width: 30%;
        text-align: center;
        align-content: center;}

        .avatar img{    width: 80%;
                        box-shadow: -30px -40px  rgb(65, 64, 64);}

#sobre-mi .presentacion{width: 100%;
                        text-align: center;
                        padding-left: 2em; padding-right: 2em;}

        #sobre-mi .presentacion p{      font-size: 3em;
                                        color: white;
                                        margin-top: 20vh;
                                        font-family: "Rampart One", sans-serif;
                                        font-weight: 400;
                                        font-style: normal;}

        #sobre-mi .presentacion .mi{    text-align: left;
                                        font-size: 1.5em;
                                        text-align: justify;
                                        font-family: "Fredericka the Great", serif;
                                        font-weight: 400;
                                        font-style: normal;
                                        background-color: rgb(112, 107, 107);
                                        border-radius: 10px;
                                        height: 30vh;
                                        padding-left: 1em; padding-right: 1em;
                                        align-content: center;}

#contacto{

        margin-top: 0;
        width: 100%;
        height: auto;

}

#contacto h1{

        margin-top: 7vh;
        text-align: center;
        font-family: "Raleway", sans-serif;
        font-size: 3em;
        margin-bottom: 10vh;

}

#contacto .form-colum{

        width: 50%;
        margin: auto;

}

#contacto #contactForm{

        display: flex;
        flex-direction: column;
        gap: 50px;
        background: #fff;
        padding: 40px;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.09);

}

#contactForm label{

        margin-left: 20%;
        font-family: "Poppins", sans-serif;
        font-size: 1.4em;
        margin-bottom: -2vh;
        color: green;
        font-weight: bolder;

}

#contactForm input, textarea{

        width: 60%;
        margin: auto;
        height: 4vh;
        border: none;
        border-bottom: 1px solid black;
        transition: all .3s ease;
        resize: vertical;

}

input:focus, textarea:focus {

        border-bottom-color: #FFD700;
        outline: none;

}

#contactForm #send-form{

        border-radius: 999px;
        width: 30%;
        height: 5vh;
        background: linear-gradient(to right, #3b3838, #000);
        font-weight: bold;
        color: white;
        margin: auto;
        margin-top: 8vh;
        font-size: 1em;

}

#decoration-right{

        position: absolute;
        right: 0px;
        top: 0px;
        height: 100vh;
        z-index: -1;
        width: 100%;

}

@media (max-width: 576px){
        #fondo-inicio{  flex-direction: column;}
        #fondo-inicio-izquierda{        width: 100%;}
        #fondo-inicio-derecha nav{    height: 15%;}
        #fondo-inicio-derecha button{   font-size: 1.3em;}
        #nombre{        width: 80%;
                        top: 80%;
                        left: 5%;}
        #nombre .p1{    font-size: 1em;}
        #nombre .p2{    font-size: 2em;
                        margin-top: -2vh;}
        #nombre .p3{    margin-top: -2vh;}
        #fondo-proyectos{       height: auto;}
        .proyectos{     flex-direction: column;
                        height: auto;}
        .proyectos div{ width: 70%;}
        .pr1,.pr2,.pr3,.pr4{   margin-left: 15%;}
        #sobre-mi{      flex-direction: column;
                        align-items: center;
                        height: 100%;}
        .avatar{        width: 100%;
                        margin-top: 10vh;}
        .avatar img{    width: 60%;}
        #sobre-mi .presentacion{        width: 100%;
                                        height: 100%;}
        #sobre-mi .presentacion p{      margin-top: 5vh;}
        #sobre-mi .presentacion .mi{    width: 100%;
                                        font-size: 1.3;}

        
}