/*
    The "page wrapper" is the outermost container for the page. It mimics
    the behavior of the body tag, but is a div so that it can be styled
    with more flexibility than the body tag.
*/
.page-wrapper {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
.page-wrapper.justify-center {
    justify-content: center;
}
.page-wrapper.align-center {
    align-items: center;
}

/*
    The "container", sometimes referred to as a "section", is a container
    element (semantic when applicable) that vertically separates different
    areas on the page based on their purpose or topic. It can allow different
    background colors and properties for each section that help users associate
    content within it as belonging to the same subject.
*/
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Combo classes to extend the container's versatility */
.container.grow {
    flex: 1 0 0;
}
.container.justify-center {
    justify-content: center;
}
.container.justify-end {
    justify-content: end;
}

/*
    The "row" is a container element that horizontally separates its
    children, which are usually columns. It also performs a secondary role
    of keeping the content of the site within a reasonable width, so that
    wider screens don't disrupt the intended layout.
*/
.row {
    display: flex;
    width: 100%;
    max-width: 1100px;
    padding: 0 20px;
}
/* Combo classes to extend the row's versatility */
.row.full-width {
    max-width: unset;
}
.row.align-center {
    align-items: center;
}
.row.align-top {
    align-items: start;
}
.row.align-bottom {
    align-items: end;
}
.row.justify-center {
    justify-content: center;
}
.row.justify-end {
    justify-content: end;
}
.row.justify-space-between {
    justify-content: space-between;
}
.row.no-padding {
    padding: unset;
}
.row.grow {
    flex: 1 0 0;
}

/*
    The "column" is a container element that vertically separates its
    children, which are usually content elements. When paired with sibling columns,
    it allows for the creation of a flexible grid system that can be used
    to create a variety of layouts.
*/
.column {
    display: flex;
    flex-direction: column;
    flex: 1 0 0;
}
/* Combo classes to extend the column's versatility */
.column.shrink {
    flex: 0 1 auto;
}
.column.align-start {
    align-items: start;
}
.column.align-center {
    align-items: center;
}
.column.align-end {
    align-items: end;
}
.column.justify-center {
    justify-content: center;
}
.column.justify-end {
    justify-content: end;
}
.column.justify-space-between {
    justify-content: space-between;
}

/*
    Flexbox utilities
*/
.d-flex {
    display: flex;
}
.d-flex.flex-column {
    flex-direction: column;
}
.d-flex.justify-center {
    justify-content: center;
}
.d-flex.justify-end {
    justify-content: end;
}
.d-flex.justify-space-between {
    justify-content: space-between;
}
.d-flex.justify-space-evenly {
    justify-content: space-evenly;
}
.d-flex.justify-space-around {
    justify-content: space-around;
}
.d-flex.align-center {
    align-items: center;
}
.d-flex.align-end {
    align-items: end;
}
.d-flex.align-self-stretch {
    align-self: stretch;
}
.d-flex.full-width {
    width: 100%;
}


/*
    Misc. utility classes
*/
.gap-5 {
    gap: 5px;
}
.gap-10 {
    gap: 10px;
}
.gap-15 {
    gap: 15px;
}
.gap-20 {
    gap: 20px;
}
.gap-25 {
    gap: 25px;
}
.gap-30 {
    gap: 30px;
}
.gap-40 {
    gap: 40px;
}