/*
	IAT 339 with Prof. Andrew Hawryshkewich
	D101 with Elgin-Skye McLaren
	P03: Portfolio
	Josh Fernandez

	grids.css

	Main reference is from HTML & CSS: Design and Build Websites by Jon Duckett
	Some sections have been copied or inspired by Project 2: Richmond Dodgeball League website. Thank you to Priscilla Skylar-Lee and Heather Maskell.
	Other references will be noted at appropriate sections of this file.
*/


/* GENERAL */

*, *::after, *::before { /* All browsers need to have box sizing */
	-webkit-box-sizing: border-box; /* Other browsers */
	-moz-box-sizing: border-box; /* Mozilla Firefox */
	box-sizing: border-box;
}

[class^="grid-row"] {
	display: flex;
	flex-wrap: wrap;
}


/* FOR FOOTER TO SNAP TO BOTTOM */
/* Citation: https://stackoverflow.com/questions/3525581/how-to-align-footer-div-to-the-bottom-of-the-page */

.grid-row-main {
	min-height: 100vh;
	width: 100%;
	position: relative;
}

.grid-row-header-body {
	padding-bottom: 7rem;
}

.grid-row-footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 7rem;
}

/* OTHER MAIN GRID PROPERTIES */

.grid-col-header {
	margin: 0;
	padding: 0;
}

.grid-col-footer-link {
	width: initial;
}


/* ELEMENT STYLE CHANGES */

header {
	background-color: rgba(8, 37, 104, 1); /* Paletton Blue Dark */
	color: white;
	height: 100%;
}

footer {
	height: 7rem;
	padding: 1rem;
}

h1, h2, h3, h4 {
	margin: 0;
}

.h1-small {
	display: block;
	font-size: 2.5rem;
	line-height: 3rem;
}

h1 a {
	display: block;
	width: 100%;

	padding: 1rem;
	padding-left: 0.9rem;
	padding-bottom: 0.25rem;

	color: white;
	background-color: rgba(8, 37, 104, 1); /* Paletton Blue Dark */

	/*
		Transition Citations:
		https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit
		https://css-tricks.com/almanac/properties/t/transition/
	*/
	-moz-transition: background-color 0.5s ease-out; /* Mozilla Firefox */
	-o-transition: background-color 0.5s ease-out; /* Opera */
	-webkit-transition: background-color 0.5s ease-out; /* Google Chrome and Safari */
	transition: background-color 0.5s ease-out;
}

h1 a:hover, h1 a:focus, h1 a:active {
	color: white;
	background-color: rgba(87, 119, 192, 1); /* Paletton Blue Light */

	/*
		Transition Citations:
		https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit
		https://css-tricks.com/almanac/properties/t/transition/
	*/
	-moz-transition: background-color 0.5s ease-out; /* Mozilla Firefox */
	-o-transition: background-color 0.5s ease-out; /* Opera */
	-webkit-transition: background-color 0.5s ease-out; /* Google Chrome and Safari */
	transition: background-color 0.5s ease-out;
}

h2 {
	margin-bottom: 1rem;
}

.section-project h2 {
	margin-bottom: 0.5rem;
}

nav {
	margin: 0;
	margin-bottom: 0.5rem;
}

[class^="nav-item"] {
	display: inline-block;
	width: 100%;
	padding: 0.75rem 1rem;
	margin: 0;
	color: white;
	background-color: rgba(18, 64, 171, 1); /* Paletton Blue */

	/*
		Transition Citations:
		https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit
		https://css-tricks.com/almanac/properties/t/transition/
	*/
	-moz-transition: background-color 0.5s ease-out; /* Mozilla Firefox */
	-o-transition: background-color 0.5s ease-out; /* Opera */
	-webkit-transition: background-color 0.5s ease-out; /* Google Chrome and Safari */
	transition: background-color 0.5s ease-out;
}

[class^="nav-item"]:hover,
[class^="nav-item"]:focus,
[class^="nav-item"]:active {
	background-color: rgba(87, 119, 192, 1); /* Paletton Blue Light */
	color: white;

	/*
		Transition Citations:
		https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit
		https://css-tricks.com/almanac/properties/t/transition/
	*/
	-moz-transition: background-color 0.5s ease-out; /* Mozilla Firefox */
	-o-transition: background-color 0.5s ease-out; /* Opera */
	-webkit-transition: background-color 0.5s ease-out; /* Google Chrome and Safari */
	transition: background-color 0.5s ease-out;
}

.nav-item-index {
	background-color: rgba(18, 64, 171, 1); /* Paletton Blue */
}

.nav-item-index:hover,
.nav-item-index:focus,
.nav-item-index:active {
	background-color: rgba(87, 119, 192, 1); /* Paletton Blue Light */
}

.nav-item-project1 {
	background-color: rgba(255, 116, 0, 1); /* Paletton Orange */
}

.nav-item-project1:hover,
.nav-item-project1:focus,
.nav-item-project1:active {
	background-color: rgba(255, 170, 99, 1); /* Paletton Orange Light */
}

.nav-item-project2 {
	background-color: rgba(0, 153, 153, 1); /* Paletton Blue-Green */
}

.nav-item-project2:hover,
.nav-item-project2:focus,
.nav-item-project2:active {
	background-color: rgba(70, 178, 178, 1); /* Paletton Blue-Green Light */
}

.nav-item-about {
	background-color: rgba(255, 170, 0, 1); /* Paletton Yellow */
}

.nav-item-about:hover,
.nav-item-about:focus,
.nav-item-about:active {
	background-color: rgba(255, 203, 99, 1); /* Paletton Yellow Light */
}

#footer-links a {
	width: initial;
	display: inline-block;
	color: white;

	/*
		Transition Citations:
		https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit
		https://css-tricks.com/almanac/properties/t/transition/
	*/
	-moz-transition: color 0.5s ease-out; /* Mozilla Firefox */
	-o-transition: color 0.5s ease-out; /* Opera */
	-webkit-transition: color 0.5s ease-out; /* Google Chrome and Safari */
	transition: color 0.5s ease-out;
}

#footer-links a:hover, #footer-links a:focus, #footer-links a:active {
	color: #9E9E9E;

	/*
		Transition Citations:
		https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit
		https://css-tricks.com/almanac/properties/t/transition/
	*/
	-moz-transition: color 0.5s ease-out; /* Mozilla Firefox */
	-o-transition: color 0.5s ease-out; /* Opera */
	-webkit-transition: color 0.5s ease-out; /* Google Chrome and Safari */
	transition: color 0.5s ease-out;
}

#contact {
	margin-top: 1.5rem;
}

#list-of-core-skills {
	margin-bottom: 1.5rem;
}

/* INDEX PANEL OF PROJECTS */

[class^="index-project-button-"] {
	display: inline-block;
	width: 100%;
	background-color: white;

	/*
		Transition Citations:
		https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit
		https://css-tricks.com/almanac/properties/t/transition/
	*/
	-moz-transition: background-color 0.5s ease-out; /* Mozilla Firefox */
	-o-transition: background-color 0.5s ease-out; /* Opera */
	-webkit-transition: background-color 0.5s ease-out; /* Google Chrome and Safari */
	transition: background-color 0.5s ease-out;
}

[class^="index-project-button-"] h4 {
	margin: 0;
	padding: 0;
	border: none;
}

[class^="index-project-button-"] h4 a {
	display: inline-block;
	padding: 0.5rem;
	padding-bottom: 0.25rem;
	color: white;
	background-color: rgba(18, 64, 171, 1); /* Paletton Blue */
	border: none;

	/*
		Transition Citations:
		https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit
		https://css-tricks.com/almanac/properties/t/transition/
	*/
	-moz-transition: background-color 0.5s ease-out; /* Mozilla Firefox */
	-o-transition: background-color 0.5s ease-out; /* Opera */
	-webkit-transition: background-color 0.5s ease-out; /* Google Chrome and Safari */
	transition: background-color 0.5s ease-out;
}

[class^="index-project-button-"] h4 a:hover,
[class^="index-project-button-"] h4 a:focus,
[class^="index-project-button-"] h4 a:active {
	background-color: rgba(87, 119, 192, 1); /* Paletton Blue Light */

	/*
		Transition Citations:
		https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit
		https://css-tricks.com/almanac/properties/t/transition/
	*/
	-moz-transition: background-color 0.5s ease-out; /* Mozilla Firefox */
	-o-transition: background-color 0.5s ease-out; /* Opera */
	-webkit-transition: background-color 0.5s ease-out; /* Google Chrome and Safari */
	transition: background-color 0.5s ease-out;
}

[class^="index-project-button-"] [class^="index-project-description"] {
	display: inline-block;
	border: 2px solid rgba(87, 119, 192, 1); /* Paletton Blue Light */
	padding: 0.25rem;
}

[class^="index-project-button-"] p {
	width: initial;
	margin: 0.25rem 0.25rem 0.75rem 0.25rem;
}

[class^="index-project-button-"] a {
	/*
		Transition Citations:
		https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit
		https://css-tricks.com/almanac/properties/t/transition/
	*/
	-moz-transition: color 0.5s ease-out; /* Mozilla Firefox */
	-o-transition: color 0.5s ease-out; /* Opera */
	-webkit-transition: color 0.5s ease-out; /* Google Chrome and Safari */
	transition: color 0.5s ease-out;
}

.index-project-button-social-networking h4 a {
	background-color: rgba(255, 116, 0, 1); /* Paletton Orange */
}

.index-project-button-social-networking h4 a:hover,
.index-project-button-social-networking h4 a:focus,
.index-project-button-social-networking h4 a:active {
	color: white;
	background-color: rgba(255, 170, 99, 1); /* Paletton Orange Light */
}

.index-project-button-social-networking .index-project-description {
	border-color: rgba(255, 170, 99, 1); /* Paletton Orange Light */
}

.index-project-button-social-networking a {
	color: rgba(255, 116, 0, 1); /* Paletton Orange */
}

.index-project-button-social-networking a:hover,
.index-project-button-social-networking a:focus,
.index-project-button-social-networking a:active {
	color: rgba(255, 170, 99, 1); /* Paletton Orange Light */

	/*
		Transition Citations:
		https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit
		https://css-tricks.com/almanac/properties/t/transition/
	*/
	-moz-transition: color 0.5s ease-out; /* Mozilla Firefox */
	-o-transition: color 0.5s ease-out; /* Opera */
	-webkit-transition: color 0.5s ease-out; /* Google Chrome and Safari */
	transition: color 0.5s ease-out;
}

.index-project-button-website h4 a {
	background-color: rgba(0, 153, 153, 1); /* Paletton Blue-Green */
}

.index-project-button-website h4 a:hover,
.index-project-button-website h4 a:focus,
.index-project-button-website h4 a:active {
	color: white;
	background-color: rgba(70, 178, 178, 1); /* Paletton Blue-Green Light */
}

.index-project-button-website .index-project-description {
	border-color: rgba(70, 178, 178, 1); /* Paletton Blue-Green Light */
}

.index-project-button-website a {
	color: rgba(0, 153, 153, 1); /* Paletton Blue-Green */
}

.index-project-button-website a:hover,
.index-project-button-website a:focus,
.index-project-button-website a:active {
	color: rgba(70, 178, 178, 1); /* Paletton Blue-Green Light */

	/*
		Transition Citations:
		https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit
		https://css-tricks.com/almanac/properties/t/transition/
	*/
	-moz-transition: color 0.5s ease-out; /* Mozilla Firefox */
	-o-transition: color 0.5s ease-out; /* Opera */
	-webkit-transition: color 0.5s ease-out; /* Google Chrome and Safari */
	transition: color 0.5s ease-out;
}

.index-project-button-github {
	display: inline-block;
	padding: 0.5rem;
	margin: 0.5rem 0;
	background-color: #212121;
	color: white;

	/*
		Transition Citations:
		https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit
		https://css-tricks.com/almanac/properties/t/transition/
	*/
	-moz-transition: background-color 0.5s ease-out; /* Mozilla Firefox */
	-o-transition: background-color 0.5s ease-out; /* Opera */
	-webkit-transition: background-color 0.5s ease-out; /* Google Chrome and Safari */
	transition: background-color 0.5s ease-out;

	font-weight: normal;
	text-transform: none;
	text-align: left;
}

.index-project-button-github:hover,
.index-project-button-github:focus,
.index-project-button-github:active {
	background-color: #9E9E9E;

	/*
		Transition Citations:
		https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit
		https://css-tricks.com/almanac/properties/t/transition/
	*/
	-moz-transition: background-color 0.5s ease-out; /* Mozilla Firefox */
	-o-transition: background-color 0.5s ease-out; /* Opera */
	-webkit-transition: background-color 0.5s ease-out; /* Google Chrome and Safari */
	transition: background-color 0.5s ease-out;
}

.index-project-button-github .normal-weighted-text {
	font-size: 1rem;
	line-height: 1.5rem;
	color: white;
}

.index-project-button-github .bolded-text{
	display: inline-block;
	font-size: 1.25rem;
	line-height: 1.75rem;
	color: white;
}

/* CALLS TO ACTION */

.index-other-tasks{
	margin-top: 1rem;
}


/* COLUMN WIDTHS - OFFICIAL */

[class^="grid-col-body"] {
	padding: 1rem;
}

[class^="grid-col-styleguide-section"] section {
	width: auto;
}


/* MEDIA QUERIES */

@media (min-width: 0rem) {

	[class^="grid-col-"] {
		flex-basis: 100%;
	}

	/* FLEX DIRECTION */
	.grid-row-main,
	.grid-row-header-body,
	.grid-row-footer {
		flex-direction: column;
	}

	.grid-col-header,
	.grid-col-body,
	.grid-col-footer {
		flex-basis: auto;
	}

	/* HEADER LINKS */
	.grid-col-nav-item {
		flex-basis: 100%;
	}

	/* FOOTER LINKS */
	.grid-col-footer-link {
		padding: 0.4rem 0;
		flex-basis: 100%;
	}

	#footer-return-to-top {
		height: 2rem;
	}

	section {
		margin-bottom: 2rem;
	}

	.grid-row-header-body {
		padding-bottom: 18.5rem;
	}

	.grid-row-footer, footer {
		height: 18.5rem;
	}

	ol, ul {
		padding: 0 1rem;
	}

}

@media (max-width: 15rem) {

	[class^="nav-item"] {
		padding-right: 0;
	}

	* {
		word-break: break-all;
	}

}

@media (max-width: 20rem) {

	[class^="nav-item"] {
		padding-right: 0;
	}

	code {
		word-break: break-all;
	}

}


/* FOR THE HEADER, BODY, AND FOOTER */

@media (min-width: 47rem) {

	[class^="grid-col-header"] {
		flex-basis: 33.33%;
	}

	[class^="grid-col-body"] {
		flex-basis: 66.67%;
	}

	/* FLEX DIRECTION */
	.grid-row-main,
	.grid-row-header-body,
	.grid-row-footer {
		flex-direction: row;
	}

}

@media (min-width: 82rem) {

	[class^="grid-col-header"] {
		flex-basis: 25%;
	}

	[class^="grid-col-body"] {
		flex-basis: 75%;
	}

}

@media (min-width: 102rem) {

	[class^="grid-col-header"] {
		flex-basis: 20%;
	}

	[class^="grid-col-body"] {
		flex-basis: 80%;
	}

}

@media (min-width: 28rem) {

	.grid-col-nav-item {
		flex-basis: 50%;
	}

}

@media (min-width: 44rem) {

	.grid-col-nav-item {
		width: initial;
		flex-basis: auto;
		margin-right: 0.5rem;
	}

	.grid-col-nav-item:nth-child(1) {
		margin-left: 1rem;
	}

}

@media (min-width: 47rem) {

	.grid-col-nav-item, .grid-col-nav-item:nth-child(1) {
		width: 100%;
		flex-basis: 100%;
		margin: 0;
	}

}

@media (max-width: 22.5rem) {

	.grid-row-footer, footer {
		height: 19.5rem;
	}

	.grid-row-header-body {
		padding-bottom: 19.5rem;
	}

}

@media (min-width: 38rem) {

	.grid-col-footer-link {
		flex-basis: 50%;
	}

	.grid-row-footer, footer {
		height: 12.5rem;
	}

	.grid-row-header-body {
		padding-bottom: 12.5rem;
	}

	#footer-return-to-top {
		height: 1rem;
	}

}

@media (min-width: 47rem) {

	.grid-col-footer-link {
		flex-basis: 33.33%;
	}

	.grid-row-footer, footer {
		height: 10rem;
	}

	.grid-row-header-body {
		padding-bottom: 10rem;
	}

}

@media (min-width: 55rem) {

	.grid-col-footer-link {
		flex-basis: auto;
		padding: 0.05rem 0;
		padding-right: 2.5rem;
	}

	.grid-row-footer, footer {
		height: 7rem;
	}

	.grid-row-header-body {
		padding-bottom: 7rem;
	}

}

@media (min-width: 62rem) {

	.grid-col-footer-link {
		flex-basis: auto;
		padding: 0.15rem 0;
		padding-right: 2.5rem;
	}

	.grid-row-footer, footer {
		height: 7.25rem;
	}

	.grid-row-header-body {
		padding-bottom: 7.25rem;
	}

}


/* FOR THE TEXT */

@media (max-width: 70rem) {

	body, button, .button, .nav-item,
	form input, form input[type=text], form textarea,
	figcaption {
		font-size: 1rem;
	}

	h1 {
		font-size: 3rem;
	}

	.h1-small {
		font-size: 2rem;
		line-height: 2.5rem;
	}

	h2 {
		font-size: 2rem;
	}

	h3 {
		font-size: 1.5rem;
	}

	h4 {
		font-size: 1.25rem;
	}

	h5 {
		font-size: 1rem;
	}

	code {
		font-size: 0.8rem;
	}

}

@media (max-width: 62rem) {

	body, button, .button, .nav-item,
	form input, form input[type=text], form textarea,
	figcaption {
		font-size: 0.95rem;
	}

	p, ol, ul {
		margin: 1rem 0;
	}

	p {
		line-height: 1.75rem;
	}

	ol, ul {
		line-height: 1.6rem;
	}

	figcaption {
		line-height: 1.5rem;
	}

	[class^="index-project-button-"] p {
		margin-bottom: 0.5rem;
	}

	h1 {
		font-size: 2.5rem;
		line-height: 3rem;
	}

	.h1-small {
		font-size: 1.75rem;
		line-height: 2rem;
	}

	h2 {
		font-size: 1.5rem;
	}

	h3 {
		font-size: 1.25rem;
		padding-bottom: 0.15rem;
	}

	h4 {
		font-size: 1.1rem;
		padding-bottom: 0.05rem;
	}

	h5 {
		font-size: 0.9rem;
	}

	code {
		font-size: 0.75rem;
		line-height: 1.3rem;
	}

	.index-project-button-github .normal-weighted-text {
		font-size: 0.9rem;
		line-height: 1.5rem;
	}

	.index-project-button-github .bolded-text {
		font-size: 1.1rem;
		line-height: 2rem;
	}

}


/* FOR THE INDEX PANEL OF PROJECTS */

@media (min-width: 0rem) {

	[class^="grid-col-index-project"] {
		padding: 0 0.25rem;
	}

	[class^="grid-col-index-project"] section {
		margin: 0.25rem 0;
	}

	.index-project-button-social-networking {
		margin-top: 1rem !important;
	}

}

@media (min-width: 36rem) {

	[class^="grid-col-index-project"] {
		flex-basis: 50%;
	}

	[class^="grid-col-index-project"] section {
		margin: 0.5rem 0;
	}

	.index-project-button-social-networking {
		margin-top: 0.5rem !important;
	}

}

@media (min-width: 47rem) {

	[class^="grid-col-index-project"] {
		flex-basis: 100%;
	}

	[class^="grid-col-index-project"] {
		padding: 0 0.25rem;
	}

	[class^="grid-col-index-project"] section {
		margin: 0.25rem 0;
	}

	.index-project-button-social-networking {
		margin-top: 1rem !important;
	}

}

@media (min-width: 56rem) {

	[class^="grid-col-index-project"] {
		flex-basis: 50%;
	}

	[class^="grid-col-index-project"] section {
		margin: 0.5rem 0;
	}

	.index-project-button-social-networking {
		margin-top: 0.5rem !important;
	}

}

@media (min-width: 82rem) {

	[class^="grid-col-index-project"] {
		flex-basis: 33.33%;
	}

}

@media (min-width: 100rem) {

	[class^="grid-col-index-project"] {
		flex-basis: 25%;
	}

}


/* FOR THE ABOUT SECTION */

@media (min-width: 40rem) {

	[class^="grid-col-about-information"] ul {
		padding: 0 2.5rem;
	}

}

@media (min-width: 80rem) {

	[class^="grid-col-about-picture"] {
		flex-basis: 40%;
		padding-right: 1rem;
	}

	[class^="grid-col-about-information"] {
		flex-basis: 60%;
	}

}


/* FOR THE CONTACT FORM */

@media (min-width: 0rem) {

	[class^="grid-col-contact-form"] {
		flex-basis: 100%;
	}

}

@media (min-width: 26rem) {

	[class^="grid-col-contact-form-1of2"] {
		flex-basis: 50%;
	}

	[class^="grid-col-contact-form-1of2"]:nth-child(1) {
		padding-right: 0.25rem;
	}

	[class^="grid-col-contact-form-1of2"]:nth-child(2) {
		padding-left: 0.25rem;
	}

}

@media (min-width: 86rem) {

	[class^="grid-col-contact-form-1of2"] {
		flex-basis: 33.33%;
	}

	[class^="grid-col-contact-form-2of2"] {
		flex-basis: 66.67%;
	}

}

@media (min-width: 108rem) {

	[class^="grid-col-contact-form-1of2"] {
		flex-basis: 25%;
	}

	[class^="grid-col-contact-form-2of2"] {
		flex-basis: 50%;
	}

}



/* FOR THE PROJECT EXPLANATIONS */

[class^="grid-col-project-iteration-code"] figure {
	padding: 1rem;
	margin-bottom: 1rem;
}

@media (min-width: 0rem) {

	[class^="grid-col-project"] p,
	[class^="grid-col-project"] ol,
	[class^="grid-col-project"] ul {
		margin: 0.75rem 0;
	}

	.section-project {
		margin-bottom: 2.5rem;
	}

	[class^="grid-col-project-iteration-explanation"] p:nth-child(1) {
		margin-top: 1rem;
	}

}

@media (min-width: 40rem) {

	[class^="grid-col-project-main-explanation"] {
		flex-basis: 50%;
	}

	[class^="grid-col-project-main-points"] {
		flex-basis: 50%;
	}

	[class^="grid-col-project-main-points"] ul {
		margin-left: 0;
		padding: 0 2.5rem;
	}

}

@media (min-width: 47rem) {

	[class^="grid-col-project-main-"] {
		flex-basis: 100%;
	}

	[class^="grid-col-project-main-points"] ul {
		margin-left: -1rem;
	}

}

@media (min-width: 60rem) {

	[class^="grid-col-project-main-explanation"] {
		flex-basis: 50%;
	}

	[class^="grid-col-project-main-points"] {
		flex-basis: 50%;
	}

	[class^="grid-col-project-main-points"] ul {
		margin-left: 0;
		padding: 0 2.5rem;
	}

	.section-project {
		margin-bottom: 4rem;
	}

}

@media (min-width: 72rem) {

	[class^="grid-col-project-main-explanation"] {
		flex-basis: 55%;
	}

	[class^="grid-col-project-main-points"] {
		flex-basis: 45%;
	}

}


/* FOR THE PROJECT ITERATIONS */

@media (min-width: 60rem) {

	[class^="grid-col-project-iteration-explanation"] {
		flex-basis: 33.33%;
	}

	[class^="grid-col-project-iteration-code"] {
		flex-basis: 66.67%;
	}

}


/* FOR THE STYLEGUIDE SECTIONS */

@media (min-width: 0rem) {

	[class^="grid-col-styleguide-section-large"] {
		flex-basis: 100%;
	}

}

@media (min-width: 40rem) {

	[class^="grid-col-styleguide-section"] {
		flex-basis: 50%;
	}

	[class^="grid-col-styleguide-section-large"] {
		flex-basis: 100%;
	}

	[class^="grid-col-styleguide-section"] section {
		margin: 0 0.5rem;
		margin-bottom: 2rem;
	}

}

@media (min-width: 47rem) {

	[class^="grid-col-styleguide-section"] {
		flex-basis: 100%;
	}

	[class^="grid-col-styleguide-section"] section {
		margin: 1rem 0;
	}

}

@media (min-width: 62rem) {

	[class^="grid-col-styleguide-section"] {
		flex-basis: 50%;
	}

	[class^="grid-col-styleguide-section-large"] {
		flex-basis: 100%;
	}

	[class^="grid-col-styleguide-section"] section {
		margin: 0 0.5rem;
		margin-bottom: 2rem;
	}

}

@media (min-width: 100rem) {

	[class^="grid-col-styleguide-section"] {
		flex-basis: 25%;
	}

	[class^="grid-col-styleguide-section-large"] {
		flex-basis: 100%;
	}

}


/* FOR THE CITATION SECTIONS */

@media (min-width: 135rem) {

	[class^="grid-col-citations-section"] {
		padding: 0 0.5rem;
		flex-basis: 33.33%;
	}

	[class^="grid-col-citations-section"] ul {
		padding: 0 2.5rem;
	}

}


/*
	OTHER GRID COMPONENTS - Previous and Next Links
	Code was copied from my IAT 235 Extreme Cold Website Project
*/

#previous-and-next-links {
	position: relative;
	height: 8rem;
	max-width: 100%;
}

.previous-page-link, .next-page-link {
	width: initial;
	display: inline-block;
	text-align: left;
	max-width: 22rem;

	color: white;
	background-color: rgba(18, 64, 171, 1); /* Paletton Blue */
	padding: 0.75rem 1.5rem;

	font-size: inherit;
	text-decoration: none;
	transition: background-color 0.5s ease-out;
}

.previous-page-link {
	position: absolute;
	left: 0;
	bottom: 0;
}

.next-page-link {
	position: absolute;
	right: 0;
	bottom: 0;

}

.previous-page-link:hover, .previous-page-link:focus, .previous-page-link:active,
.next-page-link:hover, .next-page-link:focus, .next-page-link:active {
	color: white;
	background-color: rgba(87, 119, 192, 1); /* Paletton Blue Light */
	text-decoration: none;

	/*
		Transition Citations:
		https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit
		https://css-tricks.com/almanac/properties/t/transition/
	*/
	-moz-transition: background-color 0.5s ease-out; /* Mozilla Firefox */
	-o-transition: background-color 0.5s ease-out; /* Opera */
	-webkit-transition: background-color 0.5s ease-out; /* Google Chrome and Safari */
	transition: background-color 0.5s ease-out;
}

/* FIX THIS! */
/* #previous-and-next-links::before, #previous-and-next-links::after {
	content: "";
	display: block;
	clear: both;
} */

@media (max-width: 70rem) {

	#previous-and-next-links {
		height: auto;
		padding-top: 2rem;
	}

	.previous-page-link {
		position: static;
		width: 100%;
	}

	.next-page-link {
		position: static;
		width: 100%;
	}

	.previous-page-link, .next-page-link {
		padding: 0.75rem 0.25rem;
		margin: 0.25rem 0;
		max-width: none;
		text-align: center;
	}

}

@media (max-width: 46.99rem) {

	#previous-and-next-links {
		height: 8rem;
	}

	.previous-page-link {
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.next-page-link {
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.previous-page-link, .next-page-link {
		padding: 0.75rem 1.5rem;
		margin: 0;
		max-width: 16rem;
		text-align: left;
	}

}

@media (max-width: 36rem) {

	#previous-and-next-links {
		height: auto;
		padding-top: 2rem;
	}

	.previous-page-link {
		position: static;
		width: 100%;
	}

	.next-page-link {
		position: static;
		width: 100%;
	}

	.previous-page-link, .next-page-link {
		padding: 0.75rem 0.25rem;
		margin: 0.25rem 0;
		max-width: none;
		text-align: center;
	}

}

/*
	OTHER GRID COMPONENTS - Return To Top Link
*/

#footer-return-to-top {
	position: relative;
	/* height is determined by the media queries */
	max-width: 100%;
}

.return-to-top-link {
	width: initial;
	text-align: center;
	/* max-width: 22rem; */

	position: absolute;
	right: 0;
	bottom: 0;

	color: white;

	font-size: inherit;
	text-decoration: none;

	/*
		Transition Citations:
		https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit
		https://css-tricks.com/almanac/properties/t/transition/
	*/
	-moz-transition: color 0.5s ease-out; /* Mozilla Firefox */
	-o-transition: color 0.5s ease-out; /* Opera */
	-webkit-transition: color 0.5s ease-out; /* Google Chrome and Safari */
	transition: color 0.5s ease-out;
}

.return-to-top-link:hover, .return-to-top-link:focus, .return-to-top-link:active {
	color: #9E9E9E;

	/*
		Transition Citations:
		https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit
		https://css-tricks.com/almanac/properties/t/transition/
	*/
	-moz-transition: color 0.5s ease-out; /* Mozilla Firefox */
	-o-transition: color 0.5s ease-out; /* Opera */
	-webkit-transition: color 0.5s ease-out; /* Google Chrome and Safari */
	transition: color 0.5s ease-out;
}