/* Import CSS Variables */
@import url(../../css/partials/_variables.css);

/* Import CSS Global */
@import url(../../css/partials/_global.css);

/* Import CSS Addons */
@import url(../../css/partials/_addons.css);

/* Import CSS Header */
@import url(../../css/header.css);

/* Import CSS Footer */
@import url(../../css/footer.css);

main {
    width: 100%;
    justify-content: center;
}

main p {
    font-size: 15px;
}

main .category-holder{
    margin: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 120rem;
}

main .separator {
    border: 1px solid var(--color-dark);
    opacity: 0.5;
}

main .category {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

main .category .pdf-holder {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

main .category .pdf-holder a {
    display: grid;
    grid-row: max-content auto;
    gap: 0.5rem;
    text-align: center;
    max-width: 13rem;
}

main .category .pdf-holder img {
    vertical-align: middle;
    width: 100%;
}

main .category .pdf-holder p {
    overflow-wrap: break-word;
    hyphens: auto;
    word-wrap: break-word;
    text-align: center;
    justify-content: center;
    color: var(--color-dark);
}


main .important-msg {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: auto;
    padding-top: 1rem;
    text-align: center;
    max-width: 120rem;
}

main .it-warning .separator {
    margin-top: 1rem;
    margin-bottom: 2rem;
}

main .important-msg a {
    color: var(--color-primary);
}

main .important-msg pre {
    width: 100%;
    word-wrap: break-word;
}


/* ============================== Media Query ============================== */

/* Special devices (landscape tablets, 1400px and up) */
@media only screen and (max-width: 1400px) {

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 1024px) {

}

/* Extra small devices (phones, 413px and down) */
@media only screen and (max-width: 600px) {
    main .category {
        align-items: center;
    }

    main .pdf-holder {
        justify-content: center;
    }
}