/* INICIALIZAR VARIABLES */
@import url(variables.css);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-margin-top: 68px;
}

body {
    background-color: var(--secondary-950);
    overflow-x: hidden;
}

img {
    display: block;
    width: 100%;
}

html {
    overflow-x: hidden;
    scrollbar-color: var(--primary-500) var(--primary-950);
}

a {
    cursor: pointer;
}

/* TYPOGRAPHY */
h1 {
    font-family: var(--ff-primary);
    font-weight: var(--fw-black);
    font-size: var(--fs-14);
    line-height: 120%;
    color: var(--primary-500);
}

h2 {
    font-family: var(--ff-primary);
    font-weight: var(--fw-extrabold);
    font-size: var(--fs-12);
    line-height: 120%;
    color: var(--primary-500);
}

h3 {
    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-10);
    line-height: 120%;
    color: var(--primary-500);
}

h4 {
    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-9);
    line-height: 120%;
    color: var(--primary-500);
}

h5 {
    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-7);
    line-height: 120%;
    color: var(--primary-500);
}

h6 {
    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-5);
    line-height: 120%;
    color: var(--primary-500);
}

p {
    font-family: var(--ff-secondary);
    font-weight: var(--fw-regular);
    color: var(--primary-200);
    line-height: 150%;
}

.p1 {
    font-size: var(--fs-8);
}

.p2 {
    font-size: var(--fs-7);
}

.p3 {
    font-size: var(--fs-6);
}

.p4 {
    font-size: var(--fs-5);
}

.p5 {
    font-size: var(--fs-4);
}

.p6 {
    font-size: var(--fs-3);
}

/* SECTIONS */
section {
    padding: 80px 40px;
}

.content {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

/* LISTS */
.writing ul,
.writing ol {
    list-style-position: outside;
    margin-left: 0;
    padding-left: 20px;
    margin-left: 15px;
}

.writing li {
    font-family: var(--ff-secondary);
    font-weight: var(--fw-regular);
    font-size: var(--fs-7);
    line-height: 150%;
    color: var(--primary-200);
    padding-left: 5px;
    margin-bottom: 10px;
}

.writing li:last-child {
    margin-bottom: 0;
}

/* MEDIA QUERIES NORMALIZE */

/* LAPTOP */
@media (max-width: 1280px) {

    /* TYPOGRAPHY */
    h1 {
        font-size: var(--fs-13);
    }

    h2 {
        font-size: var(--fs-11);
    }

    h3 {
        font-size: var(--fs-9);
    }

    h4 {
        font-size: var(--fs-8);
    }

    h5 {
        font-size: var(--fs-7);
    }

    h6 {
        font-size: var(--fs-5);
    }

    .p1 {
        font-size: var(--fs-7);
    }

    .p2 {
        font-size: var(--fs-6);
    }

    .p3 {
        font-size: var(--fs-5);
    }

    .p4 {
        font-size: var(--fs-4);
    }

    .p5 {
        font-size: var(--fs-3);
    }

    .p6 {
        font-size: var(--fs-2);
    }

    /* SECTIONS */
    section {
        padding: 68px 40px;
    }

    .content {
        max-width: 960px;
    }

}



/* TABLET */
@media (max-width: 880px) {

    /* TYPOGRAPHY */
    h1 {
        font-size: var(--fs-12);
    }

    h2 {
        font-size: var(--fs-10);
    }

    h3 {
        font-size: var(--fs-8);
    }

    h4 {
        font-size: var(--fs-7);
    }

    h5 {
        font-size: var(--fs-6);
    }

    h6 {
        font-size: var(--fs-4);
    }

    .p1 {
        font-size: var(--fs-6);
    }

    .p2 {
        font-size: var(--fs-5);
    }

    .p3 {
        font-size: var(--fs-4);
    }

    .p4 {
        font-size: var(--fs-4);
    }

    .p5 {
        font-size: var(--fs-3);
    }

    .p6 {
        font-size: var(--fs-2);
    }

    /* SECTIONS */
    section {
        padding: 56px 24px;
    }

    .content {
        max-width: 720px;
    }

}



/* MOBILE */
@media (max-width: 480px) {

    /* TYPOGRAPHY */
    h1 {
        font-size: var(--fs-11);
    }

    h2 {
        font-size: var(--fs-9);
    }

    h3 {
        font-size: var(--fs-7);
    }

    h4 {
        font-size: var(--fs-6);
    }

    h5 {
        font-size: var(--fs-5);
    }

    h6 {
        font-size: var(--fs-3);
    }

    .p1 {
        font-size: var(--fs-5);
    }

    .p2 {
        font-size: var(--fs-4);
    }

    .p3 {
        font-size: var(--fs-3);
    }

    .p4 {
        font-size: var(--fs-3);
    }

    .p5 {
        font-size: var(--fs-2);
    }

    .p6 {
        font-size: var(--fs-1);
    }

    /* SECTIONS */
    section {
        padding: 52px 24px;
    }

    .content {
        max-width: 432px;
    }

}