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

body, html {
    width: 100%;
    overflow-x: hidden;
}

/* dar estilos al componente wrapper (div class wrapper)*/
.wrapper {
    width: 100vw;
    height: 100vh;
    background-color: #191c32;
    color: #ffffff;
}

.navbar {
    display: flex;
    justify-content: space-between;
    padding: 2em;
}

.brand {
    margin-top: -7px;
}

.brand span{
    color: #ff4d00;
}

.menu {
    display: flex;
    width: 50%;
    justify-content: space-around;
}

.menu li {
    list-style: none;
}
/* dar estilos al componente menu (ul class menu)*/
.menu a {
    color: #ffffff;
    text-decoration: none;
    padding: 10px 20px;
}

.menu .activa {
    color: aqua;
}

.menu a:hover{
    background-color: aqua;
    color: #191c32;
    transition: ease-in .4s;
}

.main{
    margin: 0 auto;
    width: 80vw;
    height: 80vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
}

.h1 {
    font-size: 3em;
}

span {
    color: aqua;
}

.download-cv {
    padding: 10px 20px;
    background: #ff4d00;
    border: none;
    border-radius: 20px;
    margin-top: 10px;
    cursor: pointer;
    box-shadow: 1px 3px 11px -5px rgba(167, 81, 65, 0.393);
}

.download-cv:hover {
    background: #fff;
    box-shadow: none;
}

.main img {
    width: 350px;
    border: 7px solid aqua;
    height: 520px;;
}

.about {
    background-color: rgb(224, 224, 224);
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    width: 100vw;
    align-items: center;
}

.about img {
    width: 100%;
    grid-column: 1/5;
}

.about-info {
    grid-column: 5/10;
    padding: 3em;
}

.about-info h2 {
    font-size: 2em;
    color:#191c32;
}

.divider {
    width: 60px;
    height: 4px;
    background-color: aqua;
    margin-top: 5px;
    margin-bottom: 3em;
}

.about p {
    margin-bottom: 1em;
}

.portfolio{
    width: 100vw;
    height: 100vh;
    background-color: #191c32;
    color: #ffffff;
}
.portfolio-headings {
    width: 100vw;
    padding: 5em;
}

.portfolio-headings h2 {
    font-size: 2.5em;
}

.portfolio .container {
    width: 70vw;
    height: 60vh;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.card {
    width: 300px;
    height: 350px;
    color: #ffffff;
    background-color: #273289;
    margin: 1em;
}

.card__img {
    width: 100%;
    height: 150px;
    background-color: #2b3058;
}

.card__tittle {
    padding: 20px;
}

.card__project-links {
    display: flex;
    justify-content: space-evenly;
}

.card__project-links a{
    color: #ffffff;
    text-decoration: none;
}

.card__project-links i {
    font-size: 1.5em;
}

.card .project-details {
    margin: 0 auto;
    margin: 1em;
    width: 70%
}

.card .project-details a {
    text-decoration: none;
    color: #191c32;
}

.project-details-content {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 1em;
}

.contact-headings h2 {
    font-size: 3em;
    color: #fff;
}

.contact-section {
    background-color: #191c32;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-contact {
    padding: 3em;
    margin: 0 auto;
}

.form {
    display: flex;
    flex-direction: column;
    width: 30vw;
    margin-top: 2em;
}

.form input {
    padding: 10px 20px;
    margin-bottom: 1em;
    background: none;
    border: none;
    border-bottom: 1px solid #fff;
    color: #fff;
}

.form textarea {
    height: 150px;
    background: none;
    color: #fff;
    padding: 1.5em;
}

.btn-submit {
    padding: 10px 20px;
    margin: 1em;
    border: none;
    text-transform: uppercase;
    background-color: aqua;
    border-radius: 20px;
    cursor: pointer;
}

.footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 200px;
    background-color: aqua;
}

.footer h2 {
    font-size: 3em;   
}

.footer h5 {
    font-size: 1.5em;   
}

.social-network i {
    cursor: pointer;
}

.social-network {
    display: flex;
    justify-content: space-evenly;
    width: 300px;
    margin-top: 1em;
}