@import 'content/image.css';
@import 'content/tipography.css';
@import 'content/forms.css';
@import 'content/tables.css';

@import 'layout/columns.css';
@import 'layout/display.css';
@import 'layout/header.css';
@import 'layout/margin.css';
@import 'layout/nav.css';

@import 'components/buttons.css';
@import 'components/cards.css';
@import 'components/alerts.css';
@import 'components/pagination.css';

:root {
    --color-primary: #293559;
    --color-white: white;
    --color-grey: #606060;
    --text-primary: .90em;
    --h3: 1.15em;
    --h4: 1.05em;
}

body {
    padding: 0px;
    margin: 0px;
    background-color: #F1F0F8;
}

.container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.content {
    width: 80%;
    padding: 20px;
}

/* JUSTIFY */

.j-end {
    justify-content: end;
}

.j-center {
    justify-content: center;
}

@media screen and (max-width: 400px) {

    .content {
        box-sizing: border-box;
        width: 100%;
    }
}

@media screen and (max-width: 900px) {

    .content {
        box-sizing: border-box;
        width: 100%;
    }

}