/*
? @document-start
===================
| CSS POSITIONING |
==================================================================================================================================

? @author:                 William J. Horn
? @document-name:          positioning.css
? @document-created:       03/24/2022
? @document-modified:      03/24/2022
? @document-version:       v1.0.0

==================================================================================================================================

? @document-info
==================
| ABOUT DOCUMENT |
==================================================================================================================================

CSS file with classes designed for positioning, sizing, and responsiveness

==================================================================================================================================

? @document-changelog
======================
| DOCUMENT CHANGELOG |
==================================================================================================================================

==================================================================================================================================

? @document-todo
=================
| DOCUMENT TODO |
==================================================================================================================================

==================================================================================================================================
*/

/* ---------------- */
/* Global Variables */
/* ---------------- */

:root {
    --smallPadding: 5px;
    --mediumPadding: 15px;
    --largePadding: 30px;

    --smallMargin: 5px;
    --mediumMargin: 15px;
    --largeMargin: 30px;
}

/* --------------- */
/* Resize Children */
/* --------------- */

/* resize element to the user's entire screen dimensions */
.fill-viewport {
    width: 100vw;
    height: 100vh;
}

/* resize element to fill it's parent element */
.fill-parent {
    width: 100%;
    height: 100%;
}

/* --------------- */
/* Center Children */
/* --------------- */

/* center children of this element vertically */
.cent-all-vt {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* center children of this element horizontally */
.cent-all-hz {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ----------- */
/* Center Self */
/* ----------- */

/* center the element itself horizontally */
.cent-self-hz {
    display: block;
    margin: 0 auto;
}

/* ----- */
/* Other */
/* ----- */

/* fit all content in parent within vertical viewport */
.start-top {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.start-left {
    display: flex;
    justify-content: flex-start;
}

.space-btwn {
    display: flex;
    justify-content: space-between;
}

.space-around {
    display: flex;
    justify-content: space-around;
}

.space-even {
    display: flex;
    justify-content: space-evenly;
}

.space-wrap {
    flex-wrap: wrap;
}

.content-grid {
    align-content: flex-start;
}

.align-start {
    align-items: flex-start;
}

.align-center {
    align-items: center;
}

/* ----------- */
/* Resize Self */
/* ----------- */

.flex-1 {
    display: flex;
}

.flex-1 > * {
    flex: 1;
}

.break-all p {
    word-break: break-all;
}

.width-25 {
    width: 25%;
}

.width-50 {
    width: 50%;
}

.width-75 {
    width: 75%;
}

.width-100 {
    width: 100%;
}

.full-height {
    height: 100%;
}

.half-height {
    height: 50%;
}

.half {
    width: 50%;
    height: 50%;
}

.align-all-txt-cent p {
    text-align: center;
}

.sm-p {
    padding: var(--smallPadding);
}

.md-p {
    padding: var(--mediumPadding);
}

.lg-p {
    padding: var(--largePadding);
}

.sm-m-hz {
    margin-left: var(--smallMargin);
    margin-right: var(--smallMargin);
}

.md-m-hz {
    margin-left: var(--mediumMargin);
    margin-right: var(--mediumMargin);
}

.lg-m-hz {
    margin-left: var(--largeMargin);
    margin-right: var(--largeMargin);
}

.sm-m-vt {
    margin-top: var(--smallMargin);
    margin-bottom: var(--smallMargin);
}

.md-m-vt {
    margin-top: var(--mediumMargin);
    margin-bottom: var(--mediumMargin);
}

.lg-m-vt {
    margin-top: var(--largeMargin);
    margin-bottom: var(--largeMargin);
}

.sm-m-bot {
    margin-bottom: var(--smallMargin);
}

.md-m-bot {
    margin-bottom: var(--mediumMargin);
}

.lg-m-bot {
    margin-bottom: var(--largeMargin);
}

.sm-m-top {
    margin-top: var(--smallMargin);
}

.md-m-top {
    margin-top: var(--mediumMargin);
}

.lg-m-top {
    margin-top: var(--largeMargin);
}

.sm-m-all-vt > *:not(:last-child) {
    margin-bottom: var(--smallMargin);
}

.md-m-all-vt > *:not(:last-child) {
    margin-bottom: var(--mediumMargin);
}

.lg-m-all-vt > *:not(:last-child) {
    margin-bottom: var(--largeMargin);
}

.sm-p-all > * {
    padding: 5px;
}

.md-p-all > * {
    padding: 15px;
}

.lg-p-all > * {
    padding: 30px;
}

.half-width-all > * {
    width: 50%;
}

.half-height-all > * {
    height: 50%;
}