/*Importación de fuentes de Google fonts*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Roboto+Slab:wght@400;700&family=Roboto:wght@400;500;700;900&display=swap');

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    margin: 0;
    padding: 0;

}
.principal{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

a{
    text-decoration: none;
    display: inline;
    color: black;
}
header{
    width: 100%;
    height: 140px;
    display: grid;
    grid-template-rows: 1fr 2fr;
}

header .header-icon-container{
    width: 100%;
    display: grid;
    align-items: center;
    justify-items: end;
    background-color: #EC7063;
}

header .header-icon-container .icons{
    width: 300px;
    height: auto;
    display: flex;
    justify-content: space-around;
    margin-right: 30px;
}

header .header-icon-container .icons span{
    color: white;
}


/*Clase 8 */

nav{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.nav-logo-container{
    margin-left: 50px;
    margin-top: 15px;
}

.profile-link{
    margin-right: 50px;
    align-self: center;
    text-align: end;
}

.nav-logo-container img{
    width: 220px;
}

.profile-link a{
    border-bottom: 1px solid black;
    font-family: 'Roboto Mono', monospace;
    font-weight: 500;
}

/*Reto clase 8 */

.main__principal{
    width: 100%;
    height: 100%;
    background-image: url(../assets/cover.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.main__principal h1{
    margin-top: 0;
    text-align: center;
    color: white;
    font-family: 'Roboto Mono', monospace;
    width: 51%;
    margin: 0 auto;
    line-height: 40px;
    padding-top: 100px;
    font-weight: 700;
    word-spacing: 5px;
    letter-spacing: 10px;
    text-shadow: 4px 4px 10px #EC7063;
}

.main__principal a{
    display: block;
    background-color: #EC7063; /**/
    width: 135px; /**/
    height: 55px; /**/
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 900;
    text-align: center;
    margin-top: 140px;
    padding-top: 15px;
    box-sizing: border-box;
    box-shadow: 2px 2px 30px #FEF9E7;

}

/* Clase 15: Estilos en el main de blogs.html*/

.blogs--main{
    width: 100%;
    height: auto;
}

.main__entrada--principal{
    width: 100%;
    height: auto;
    display: grid;
    padding: 20px 100px 30px 145px;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto auto auto ;
    grid-template-areas: 
    "news ."
    "image title"
    "image text"
    "image btn "
    ;
    background-color: #E6E9ED;
    row-gap: 10px;
}

.item1{
    grid-area: news;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    align-self: center;
}

.item2{
    grid-area: image;
    width: 90%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    border:4px solid #EC7063;
}

.item3{
    grid-area: title;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 22px;
    align-self: center;
}

.item4{
    grid-area: text;
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    font-size: 15px;
    align-self: center;
}
.item5, .btn{
    grid-area: btn;
    width: 100px;
    height: 40px;
    align-self: self-start;
    background-color: #EC7063;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    color: white;
}

.btn:hover{
    background-color: #A6E3B3;
}

/* Clase 18: Trabajando la sección de post*/

.main__entrada--secundaria{
    width: 100%;
    height: auto;
}

.main__entrada--secundaria .main--title, .main--title{
    width: 80%;
    margin: 0 auto;
    text-align: center;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 2px solid #D4D8DF;
}

.blogs--container{
    width: 77%;
    height: auto;
    margin: 0 auto;
}

.blogs--container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 500px;
    row-gap: 20px;
    column-gap: 25px;
    margin-bottom: 100px;
}

.blogs__article{
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    width: 100%;
    height: auto;
    box-shadow: 1px 5px 10px #EC7063;
    padding: 5px;
}

.blogs__article img{
    width: 100%;
    height: 40%;
    object-fit: cover;
}

.blogs__article h3{
    font-family: 'Roboto Mono', monospace;
    margin: 15px 0 20px 0;
    font-size: 16px;
    font-weight: 600;
    color: #616A6B ;
    height: 7%;
    display: flex;
    align-items: center;
}

.blogs__article p{
    font-size: 16px;
    font-family: 'Roboto Mono', monospace;
    color: #616A6B ;
    height: 25%;
    margin-bottom: 20px;
    overflow: hidden;
}

footer{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-rows: 2fr 4fr;
}

.footer_green{
    background-color: #EC7063;
}
.footer_black{
    background-color: #22272D;
}

.footer_black p{
    width: 80%;
    padding-top: 30px;
    padding-bottom: 30px;
    margin: 0 auto;
    color:white;
    text-align: center;
    font-family: 'Roboto Mono', monospace;
}

/* Clase 21: Crear la pantalla de blog */

.blog--main{
    width: 100%;
    height: auto;
}

.blog--main__img{
    padding: 0px 45px 0px 45px;
}

.blog--main__img img{
    width: 100%;
}

.blog--main__entry{
    width: 80%;
    margin: 0 auto;
    padding-bottom: 15px;
}

.blog--main .blog--main__entry .main--title{
    text-align: left;
    width: 100%;
}

.blog--main__entry article{
    width: 100%;
    height: auto;
}

.blog--main__entry article .item3{
    padding-bottom: 40px;
    padding-top: 20px;
    font-size: 32px;
}

.blog--main__entry article p{
    padding-bottom: 20px;
    text-align: justify;

}

/*Clase 22*/

.blog--main__contact{
    width: 100%;
    height: auto;
    max-height: 250px;
    background-color: #E6E9ED;
    padding: 50px 125px 120px 110px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    " left . right"
    ;
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    font-weight: 500;
}

.part--left{
    grid-area: left;
    align-items:flex-end;

}

.part--right{
    grid-area: right;
    align-items:flex-end;

}

.blog--main__contact img{
    width: 80px;
    height: 90%;
}

.part--left, .part--right{
    display: flex;
    column-gap: 20px;
}

.contact-left, .contact-right{
    display: flex;
    flex-direction: column;  
    justify-content: end;
    row-gap: 10px;
}

.contact-left a, .contact-right a{
    text-decoration: underline;
    text-underline-offset:6px;
 
}

/* Clase 23: Reto*/

.perfil--main .main__entrada--principal{
    grid-template-columns: 1fr 2fr;
    background: linear-gradient(
        107deg,
        #E6E9ED 23% ,
        #F5B7B1 100% 
        );    
    padding-right: 140px;
    grid-template-rows: 60px 60px 190px 30px ;
    grid-template-areas: 
    ". ."
    "image title"
    "image text"
    ". btn "
    ;
}
/*Mejoras*/

#project-1, #project-2, #project-3, #project-4,#project-5{
    padding: 10px;
}



.pefil--projects{
    padding-top: 30px;
    padding-bottom: 40px;
}

.blogs__article .paragraph--article{
    overflow:visible;
}
.perfil--main .item4{
    align-self: start;
    padding-top: 20px;
}

.perfil--main .item3 {
    align-self: end;
};