/**
 * @author Josh Theriault 0315799
 * @description Common external style sheet for UPEI CS-2060 assignment 3 website
 * @updated 11/29/2021
 */

*, ::before, ::after
{
	box-sizing: border-box;
}

html, body
{
	margin: 0;
	height: 100%;
	width: 100%;
}


/**
 * Flow helpers
 */

.block
{
	display: block;
}

.inline
{
	display: inline-block;
}

.flex
{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}

.float-left
{
	float: left;
}
.float-right
{
	float: right;
}
.float-group::after
{
	content: "";
	display: block;
	clear: both;
}

.center
{
	text-align: center;
}

.no-resize
{
	resize: none;
}

/**
 * Flexbox helpers
 */

.flex-ycenter, .flex-center
{
	align-items: center;
}

.flex-xcenter, .flex-center
{
	justify-content: center;
}

.flex-x
{
	flex-flow: row wrap;
}

.flex-y
{
	flex-flow: column wrap;
}

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

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

/**
 * Container helpers
 */

.container-xs
{
	padding: 0 33%;
}

.container-sm
{
	padding: 0 30%;
}

.container-md
{
	padding: 0 25%;
}

.container-lg
{
	padding: 0 20%;
}

.container-xl
{
	padding: 0 10%;
}

@media only screen and (max-width: 1200px)
{
	.container-sm { padding: 0 25%; }
	.container-md { padding: 0 20%; }
	.container-lg { padding: 0 10%; }
	.container-xl { padding: 0 15px; }
}

@media only screen and (max-width: 1024px)
{
	.container-xs { padding: 0 25%; }
	.container-sm { padding: 0 20%; }
	.container-md { padding: 0 10%; }
	.container-lg { padding: 0 15px; }
}

@media only screen and (max-width: 768px)
{
	.container-xs { padding: 0 20%; }
	.container-sm { padding: 0 10%; }
	.container-md { padding: 0 15px; }
	.container-lg { padding: 0 15px; }
	.container-xl { padding: 0 15px; }
}

@media only screen and (max-width: 480px)
{
	.container-xs { padding: 0 10%; }
	.container-sm { padding: 0 15px; }
	.container-md { padding: 0 15px; }
	.container-lg { padding: 0 15px; }
	.container-xl { padding: 0 15px; }
}

/**
 * Gap helpers
 */

.g-0 { gap: 0; }
.g-5 { gap: 5px; }
.g-10 { gap: 10px; }

.gy-0 { row-gap: 0; }
.gy-5 { row-gap: 5px; }
.gy-10 { row-gap: 10px; }

.gx-0 { column-gap: 0; }
.gx-5 { column-gap: 5px; }
.gx-10 { column-gap: 10px; }

/**
 * Margin helpers
 */

.m-0 { margin: 0 !important; }
.m-5 { margin: 5px !important; }
.m-10 { margin: 10px !important; }
.m-20 { margin: 20px !important; }

.mt-0, .my-0 { margin-top: 0 !important; }
.mt-5, .my-5 { margin-top: 5px !important; }
.mt-10, .my-10 { margin-top: 10px !important; }
.mt-20, .my-20 { margin-top: 20px !important; }

.mb-0, .my-0 { margin-bottom: 0 !important; }
.mb-5, .my-5 { margin-bottom: 5px !important; }
.mb-10, .my-10 { margin-bottom: 10px !important; }
.mb-20, .my-20 { margin-bottom: 20px !important; }

.ml-0, .mx-0 { margin-left: 0 !important; }
.ml-5, .mx-5 { margin-left: 5px !important; }
.ml-10, .mx-10 { margin-left: 10px !important; }
.ml-20, .mx-20 { margin-left: 20px !important; }

.mr-0, .mx-0 { margin-right: 0 !important; }
.mr-5, .mx-5 { margin-right: 5px !important; }
.mr-10, .mx-10 { margin-right: 10px !important; }
.mr-20, .mx-20 { margin-right: 20px !important; }

/**
 * Padding helpers
 */

.p-0 { padding: 0 !important; }
.p-5 { padding: 5px !important; }
.p-10 { padding: 10px !important; }
.p-20 { padding: 20px !important; }

.pt-0, .py-0 { padding-top: 0 !important; }
.pt-5, .py-5 { padding-top: 5px !important; }
.pt-10, .py-10 { padding-top: 10px !important; }
.pt-20, .py-20 { padding-top: 20px !important; }

.pb-0, .py-0 { padding-bottom: 0 !important; }
.pb-5, .py-5 { padding-bottom: 5px !important; }
.pb-10, .py-10 { padding-bottom: 10px !important; }
.pb-20, .py-20 { padding-bottom: 20px !important; }

.pl-0, .px-0 { padding-left: 0 !important; }
.pl-5, .px-5 { padding-left: 5px !important; }
.pl-10, .px-10 { padding-left: 10px !important; }
.pl-20, .px-20 { padding-left: 20px !important; }

.pr-0, .px-0 { padding-right: 0 !important; }
.pr-5, .px-5 { padding-right: 5px !important; }
.pr-10, .px-10 { padding-right: 10px !important; }
.pr-20, .px-20 { padding-right: 20px !important; }

/**
 * Width helpers
 */
.w-100 { width: 100%; max-width: 100%; }