@media only screen and (min-width: 320px) and (max-width: 599px){

	footer{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(1, auto);
		grid-auto-rows: auto;
		grid-column-gap: 10px;
		margin-left: 16px;
		margin-right: 16px;
		padding-bottom: 35px;
		padding-top: 35px;
	}

	.copyright{
		grid-column: 1/2;
		grid-row: 1/2;
		font-size: 70%;
	}

	.color-mode{
		grid-column: 2/3;
		grid-row: 1/2;
		display: inline-grid;
		grid-template-columns: repeat(1, auto);
		grid-template-rows: repeat(2, auto);
		grid-auto-rows: auto;
	}
	
	.color-mode-prompt{
		grid-column: 1/2;
		grid-row: 1/2;
		font-size: 70%;
		text-align: left;
	}

	.swatch{
		grid-column: 1/2;
		grid-row: 2/3;
		transition: .3s;
		display: block;
		height: 27px;
		width: 27px;
		border-radius: 50%;
		float: left;
		cursor: pointer;
	}

	:hover.swatch{
		opacity: .8;
		transition: .3s;
	}
	
	:active.swatch{
		opacity: .6;
		transition: .3
	}

	.toggle {
		position: relative;
	}

	.toggle-input {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}

	.toggle-label {
		background-color: var(--another-var);
	}

	.toggle-label:hover {
		background-color: var(--yet-another-var);
	}

	.toggle-label:active {
		transform: scale(0.95);
	}

	.contact{
		grid-column: 3/4;
		grid-row: 1/2;
		font-size: 70%;
	}

	ul.list{
		list-style-type: none;
		float: right;
		line-height: 130%;
	}

	.social{
		grid-column: 4/5;
		grid-row: 1/2;
		font-size: 70%;
	}
}

@media only screen and (min-width: 600px) and (max-width: 799px){

	footer{
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: repeat(1, auto);
		grid-auto-rows: auto;
		margin-left: 65px;
		margin-right: 65px;
		margin-top: 75px;
		padding-bottom: 35px;
	}

	.copyright{
		grid-column: 1/2;
		grid-row: 1/2;
	}

	.color-mode{
		grid-column: 3/4;
		grid-row: 1/2;
		display: inline-grid;
		grid-template-columns: repeat(3, auto);
		grid-template-rows: 20px auto;
		grid-auto-rows: auto;
		grid-row-gap: 7px;
	}
	
	.color-mode-prompt{
		grid-column: 1/4;
		grid-row: 1/2;
	}

	.swatch{
		grid-column: 1/2;
		grid-row: 2/3;
		transition: .3s;
		display: inline-block;
		height: 27px;
		width: 27px;
		border-radius: 50%;
		cursor: pointer;
	}

	:hover.swatch{
		opacity: .8;
		transition: .3s;
	}
	
	:active.swatch{
		opacity: .6;
		transition: .3
	}

	.toggle {
		position: relative;
	}

	.toggle-input {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}

	.toggle-label {
		background-color: var(--another-var);
	}

	.toggle-label:hover {
		background-color: var(--yet-another-var);
	}

	.toggle-label:active {
		transform: scale(0.95);
	}

	.contact{
		grid-column: 4/5;
		grid-row: 1/2;
	}

	ul.list{
		list-style-type: none;
		float: right;
		line-height: 130%;
	}

	.social{
		grid-column: 5/6;
		grid-row: 1/2;
	}
}

@media only screen and (min-width: 800px){

	footer{
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: repeat(1, auto);
		grid-auto-rows: auto;
		margin-left: 65px;
		margin-right: 65px;
		margin-top: 75px;
		padding-bottom: 35px;
	}

	.copyright{
		grid-column: 1/2;
		grid-row: 1/2;
	}

	.color-mode{
		grid-column: 3/4;
		grid-row: 1/2;
		display: inline-grid;
		grid-template-columns: repeat(3, auto);
		grid-template-rows: 20px auto;
		grid-auto-rows: auto;
		grid-row-gap: 7px;
	}
	
	.color-mode-prompt{
		grid-column: 1/4;
		grid-row: 1/2;
	}

	.swatch{
		grid-column: 1/2;
		grid-row: 2/3;
		transition: .3s;
		display: inline-block;
		height: 27px;
		width: 27px;
		border-radius: 50%;
		cursor: pointer;
	}

	:hover.swatch{
		opacity: .8;
		transition: .3s;
	}
	
	:active.swatch{
		opacity: .6;
		transition: .3
	}

	.toggle {
		position: relative;
	}

	.toggle-input {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}

	.toggle-label {
		background-color: var(--another-var);
	}

	.toggle-label:hover {
		background-color: var(--yet-another-var);
	}

	.toggle-label:active {
		transform: scale(0.95);
	}

	.contact{
		grid-column: 4/5;
		grid-row: 1/2;
	}

	ul.list{
		list-style-type: none;
		float: right;
		line-height: 130%;
	}

	.social{
		grid-column: 5/6;
		grid-row: 1/2;
	}
}

@media print {

	footer{
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: repeat(1, auto);
		grid-auto-rows: auto;
		margin-left: 48.75pt;
		margin-right: 48.75pt;
		margin-top: 56.25pt;
		padding-bottom: 26.25pt;
	}

	.copyright{
		grid-column: 1/2;
		grid-row: 1/2;
	}

	.color-mode{
		grid-column: 3/4;
		grid-row: 1/2;
		display: inline-grid;
		grid-template-columns: repeat(3, auto);
		grid-template-rows: 20pt auto;
		grid-auto-rows: auto;
		grid-row-gap: 5.25pt;
	}
	
	.color-mode-prompt{
		grid-column: 1/4;
		grid-row: 1/2;
	}

	.swatch{
		grid-column: 1/2;
		grid-row: 2/3;
		transition: .3s;
		display: inline-block;
		height: 20.25pt;
		width: 20.25pt;
		border-radius: 50%;
		cursor: pointer;
	}

	:hover.swatch{
		opacity: .8;
		transition: .3s;
	}
	
	:active.swatch{
		opacity: .6;
		transition: .3
	}

	.toggle {
		position: relative;
	}

	.toggle-input {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}

	.toggle-label {
		background-color: var(--another-var);
	}

	.toggle-label:hover {
		background-color: var(--yet-another-var);
	}

	.toggle-label:active {
		transform: scale(0.95);
	}

	.contact{
		grid-column: 4/5;
		grid-row: 1/2;
	}

	.social{
		grid-column: 5/6;
		grid-row: 1/2;
	}

	ul.list{
		list-style-type: none;
		float: right;
		line-height: 130%;
	}

	h1 {
		font-size: 18pt;
		line-height: 22pt;
	}

	h2{
		font-size: 16pt;
		line-height: 20pt;
	}

	h3{
		font-size: 12pt;
		line-height: 16pt;
	}

	p{
		font-size: 10pt;
		line-height: 14pt;
	}
	
}