@import url('./styles.css');
@import url('./globalStyles.css');

@media (min-width: 624px) and (max-width: 767px){
    *, p {
        font-size: calc(var(--font-12) * 1.05);
    }

    main {
        margin: 30px 18px;
    }

    .headerMain {
        position: sticky;
    }

    .headerButtonMenu {
        display: none;
    }

    .headerCheckShowMenu {
        display: none;
    }

    nav {
        display: flex;
        justify-content: center;
        margin-top: 0;
    }

    nav a {
        font-weight: bold;
        margin: var(--font-12);
    }
}

/* Tablets en vertical */
@media (min-width: 768px) and (max-width: 1024px) {
    *, p {
        font-size: calc(var(--font-12) * 1.1);
    }

    main {
        margin: 60px 60px 30px 60px;
    }

    .headerMain {
        position: sticky;
    }

    .headerButtonMenu {
        display: none;
    }

    .headerCheckShowMenu {
        display: none;
    }

    nav {
        display: flex;
        justify-content: center;
        margin-top: 0;
    }

    nav a {
        font-size: calc(var(--font-12) * 1.1);
        margin: var(--font-12);
    }

    .title {
        display: flex;
        flex-direction: row !important;
        gap: var(--font-12);
        margin-bottom: var(--font-12);
    }

    .profile {
        display: flex;
        flex-direction: row;
        margin-bottom: 5rem;
    }

    .profile_img {
        margin: 0%;
        width: 260px;
    }


    .experency {
        margin-bottom: 5rem;
    }

    .projects {
        margin-bottom: 5rem;
    }

    .project {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0% 0% 1rem;
    }

    .project .img_projects {
        height: 300px;
        margin: 0%;
        width: 45%;
    }

    .project .div_projects {
        margin-left: 1rem;
        width: 50%;
    }

    .project footer .div_projects {
        margin: var(--font-12) 0 0 0;
        width: 100%;
    }

    footer .div_projects {
        width: 100%;
    }
  }

/* Dispositivos mayores a 1024 px, laptop, monitor de escritorio hd, etc */
@media (min-width: 1025px) {
    *, p {
        font-size: calc(var(--font-12) * 1.2);
    }

    main {
        margin: 60px 260px;
    }

    .headerMain {
        position: sticky;
    }

    .headerButtonMenu {
        display: none;
    }

    .headerCheckShowMenu {
        display: none;
    }

    nav {
        display: flex;
        justify-content: center;
        margin-top: 0;
    }

    nav a {
        font-size: calc(var(--font-12) * 1.2);
        margin: var(--font-12);
    }

    .title {
        display: flex;
        flex-direction: row !important;
        gap: var(--font-12);
    }

    .profile {
        display: flex;
        flex-direction: row;
        margin-bottom: 7rem;
    }

    .profile_img {
        margin: 0%;
        width: 300px;
    }

    h1 {
        margin-bottom: 0rem;
    }

    .experency {
        margin-bottom: 7rem;
    }

    .projects {
        margin-bottom: 7rem;
    }

    .project {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0% 0% 2rem;
    }

    .project .img_projects {
        height: 360px;
        margin: 0%;
        width: 45%;
    }

    .project .div_projects {
        margin-left: 1rem;
        width: 50%;
    }

    .project footer .div_projects {
        margin: var(--font-12) 0 0 0;
        width: 100%;
    }

    footer .div_projects {
        width: 100%;
    }
}