/*	Standard Screen Size Desktop	*/

@media print and (min-width:1000px) {
		* {
				display:none;
		}
}

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

		/*	Dark Mode	*/

		:root {
				--black: #000000;
				--subblack: #181818;
				--white: #ffffff;
				--footer: #545454;
				--parallelY: rgba(255, 189, 16, 1);
				--parallelP: rgba(255, 0, 255, 1);
				--parellelB: rgba(0, 11, 255, 1);
				--tricolorWhite: #D2D8FF;
				--tricolorYellow: Orange;
				--stripeYellowA: #ffe4a8;
				--stripeYellowB: #ffe8b3;
				--tricolorRed: rgb(255, 0, 76);
				--stripePinkA: #ffdff1;
				--stripePinkB: #ffe8f7;
				--tricolorBlue: rgb(89, 0, 255);
				--stripeBlkA: #2c2c2c;
				--stripeBlkB: #464646;
				--tricolorBlk: rgb(130, 129, 144);
				--navdark: #605c5c;
		}

		.dark-mode {
				background-color: var(--navdark);

				#dark-main,
				.gallery-block {
						background-color: var(--subblack);
				}

				main,
				h1,
				h2,
				h3,
				span,
				.works-title,
				.works-description,#top-button {
						background-color: var(--subblack);
						color: var(--white);
				}

				hr {
						border: var(--white);
						background-color: var(--white);
				}

				nav a {
						color: var(--white);
				}

				.block-white,
				.block-golden,
				.block-blk,
				.block-pink,
				.gallery-inline {
						background: repeating-linear-gradient(45deg, 
						var(--subblack) 0 33px, var(--subblack) 33px 66px);
						border-bottom: var(--subblack);
				}
				.dark-button::before {
						content: "";
						display: inline-block;
						background-image: url("../branding/sun-solid-full.svg");
						background-size: contain;
						background-repeat: no-repeat;
				}

		}

		/*	 Dark Mode Moon Button 	*/
		.dark-button {
				font-family: 'Futura PT Bold';
				font-size: 1.2em;
				color: var(--white);
				background-color: var(--subblack);
				border-radius: 3px;
				border: solid 1px var(--subblack);
				height: 1.2em;
				width: 1.2em;
				text-align: center;
		}

		.dark-button::before {
				content: "";
				display: inline-block;
				background-image: url("../branding/moon-solid-full.svg");
				background-size: contain;
				background-repeat: no-repeat;
		}

		.dark-button:hover {
				background-color: var(--footer);
				color: var(--tricolorWhite);
				opacity: 0.2;
				border-radius: 3px;
				border: solid 1px var(--footer);
		}

		/*	 Top Level Style 	*/
		* {
				box-sizing: border-box;
		}

		html {
				font-family: "Futura PT Book", sans-serif;
				margin: auto;
				text-align: center;
				color: var(--black);
				scroll-behavior: smooth;
				scrollbar-color: var(--tricolorBlue) var(--tricolorWhite);
		}

		body {
				display: flex;
				flex-direction: row;
				width: 100%;
				margin: 0%;
		}

		main {
				line-height: 1.5em;
				font-size: 20px;
				padding: 0 2.3em 1em 1em;
				width: 100%;
				margin-left: 25%;
		}

	
		#hoverEmail{
			display:30%;
		}

		/*	Headers	*/

		h3 {
				font-family: 'Futura PT Demi';
				font-size: 1.1em;
				color: var(--subblack);
				border-radius: 5px;
				padding: 1%;
		}

		/*	Horizontal Rulers	*/
		hr {
				height: 3px;
				background-color: var(--subblack);
				border: var(--subblack);
				width: 70%;
				margin-top: 2%;
				margin-bottom: 2%;
		}

		.gallery-ruler {
				height: 2.5px;
				background-color: var(--subblack);
				border: var(--subblack);
				width: 40%;
		}

		/*	Custom Headers	*/

		.pitch-title {
				font-family: "Futura PT Bold";
				font-size: 1.5em;
				font-weight: bold;
				color: var(--subblack);
				margin: 1% 6% 1% 5%;
		}

		.main-header,
		.sub-header {
				font-family: "The Bold Font Pro", sans-serif;
				font-size: 1.5em;
				letter-spacing: 0.1em;
				margin: 5%;
		}

		/*	Footer	*/

		footer {

				font-family: Verdana, Tahoma, sans-serif;
				font-size: 0.8em;
				color: var(--footer);
		}

		/*	Navigation Bar	*/

		header {
				position: fixed;
				padding: 1% 2%;
				margin-left: auto;
		}

		nav {
				display: flex;
				justify-content: center;
				font-size: 1.4em;

		}

		nav ul {
				margin: 0%;
				padding: 0%;
		}

		nav ul>li {
				margin-top: 10%;

		}

		/*	Navigation Link	*/

		nav a {
				color: var(--subblack);
				padding: 1em;
				text-decoration: none;
		}

		/*	Navigation Hover Colors	*/

		nav a:hover {
				color: var(--footer);
		}

		/*	Navigation SVGS	*/

		#social-iconlist {
				display: flex;
				margin: 0% 0% 0% 5%;
		}

		.social-icon {
				padding: .5em;
				margin-top: 0.5em;
		}

		.social-icon:hover {
				background-color: var(--white);
				opacity: 0.3;
		}


		/*	Top Button	*/

		#top-button {
				text-decoration-line: none;
				color: var(--footer);
				font-size: 1em;
				padding: 1% 0% 1% 0%;

		}

		/*	Lists */

		ul {
				list-style-type: none;
		}

		/*	About Page	*/

		/*	Images	*/

		.quill-welcome {
				display: block;
				margin-left: auto;
				margin-right: auto;
				position: relative;
				width: 50%;
				height: 50%;
				object-fit:contain;
		}

		.img-tricolor {
				display: block;
				margin-left: auto;
				margin-right: auto;
				width: 50%;
				position: relative;

		}

		.biography {
				font-family: "Futura PT Book";
				font-weight: bold;
		}

		/*	Education	*/

		.education-title {
				font-family: 'Futura PT Demi';
				font-size: 1.1em;
				color: var(--subblack);
		}

		/*	Works	*/

		.works {
				margin: 0%;
				padding: 0%;
		}

		.works-title {
				color: var(--subblack);
				font-family: "Futura PT Demi";
				font-size: 1.2em;
		}

		.works-description {
				color: var(--footer);
				padding: 1% 0%;
		}

		/*	Gallery Block	*/

		.gallery-block {
				background-color: var(--white);
				width: 100%;
				display: flex;
				flex-direction: column;
				margin: 0% 0% 0% 1%;
				padding: 0%;

		}

		.gallery-inline {
				background-color: var(--white);
				width: 100%;
				display: flex;
				flex-direction: row;
				margin: 0% 0% 0% 0%;
				padding: 0%;

		}

		.gallery-inline>img {
				height: 60%;
				width: 60%;
				margin: 1% 0% 1% 1%;
				object-fit: cover;
		}

		.gallery-image {
				height: 65%;
				width: 65%;
				margin-left: auto;
				margin-right: auto;
				padding: 2% 0% 2% 0%;
				object-fit: cover;
		}

		/*	Gallery Navigation	*/

		.gallery-navigation {
				display: flex;
				flex-direction: row;
				justify-content: center;
				background-color: var(--subblack);
				gap: 0%;
				margin: 0% 0% 0% 0%;
				padding: 0% 0% 0% 0%;
				width: 72%;
				position: fixed;
		}

		.gallery-nav {
				background-color: var(--subblack);
				width: 7em;
				clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
				padding: 1% 1%;
				opacity: 1;

		}

		.gallery-nav:hover {
				background-color: var(--footer);
		}

		.gallery-nav-link {
				color: var(--white);
				font-weight: bold;
				font-size: 0.7em;
				text-decoration-line: none;
		}

		/*	Parallelogram for About Page	*/

		.parallelogram-bar {
				margin-left: auto;
				margin-right: auto;
				width: 576px;
				height: 32px;
				transform: skew(-45deg);
				background: linear-gradient(90deg, 
				var(--parallelY) 0%, var(--parallelY) 35%, 
				var(--parallelP) 35%, var(--parallelP) 65%, 
				var(--parellelB) 65%, var(--parellelB) 100%);
		}

		/*	Contact */

		#contact-email {
				color: var(--subblack);
		}

	    #contact{
				display:100%;
		}

		/*	Margins	*/

		.margin-center {
				margin-left: auto;
				margin-right: 1%;
		}

		.margin-down {
				margin-top: 10%;
		}

		/*	Text Colors	*/

		.blue-text {
				color: var(--tricolorBlue);
		}

		/*	Quillopedia Custom Page	*/

		.color-red {
				color: var(--tricolorRed);
		}

		.color-blue {
				color: var(--tricolorBlue);
		}

		.color-yellow {
				color: var(--tricolorYellow);
		}

		.color-white {
				color: var(--white);
		}

		.quill-header {
				font-family: "The Bold Font Pro", sans-serif;
				font-size: 3em;
				letter-spacing: 0.1em;
				margin: 3%;
		}

		.quill-bold {
				font-family: 'Futura PT Bold';
		}

		.block-white {
				background-color: var(--tricolorWhite);
				margin-bottom: 0%;
				padding: 1% 0%;
				border-bottom: solid 10px var(--tricolorYellow);
		}

		.block-golden {
				margin-top: 0%;
				margin-bottom: 0%;
				padding: 1% 0%;
				background: repeating-linear-gradient(45deg, 
				var(--stripeYellowA) 0 33px, var(--stripeYellowB) 33px 66px);
				border-bottom: solid 10px var(--tricolorRed);

		}

		.block-pink {
				margin-top: 0%;
				margin-bottom: 0%;
				padding: 1% 0%;
				background: repeating-linear-gradient(45deg, 
				var(--stripePinkA) 0 33px, var(--stripePinkB) 33px 66px);
				border-bottom: solid 10px var(--tricolorWhite);
		}

		.block-blk {
				margin-top: 0%;
				padding: 1% 0%;
				background: repeating-linear-gradient(45deg, 
				var(--stripeBlkA) 0 33px, var(--stripeBlkB) 33px 66px);
				border-bottom: solid 10px var(--subblack);
		}

		.quill-text {
				height: 50%;
				width: 50%;
				margin-left: -25px;
				margin-right: auto;
				padding: 4%;
				object-fit: cover;
				text-align: center;
				color: var(--subblack);
				border: solid var(--subblack) 15px;
				background-color: var(--tricolorWhite);
				font-size: 1.1em;
				line-height: 1.5em;
		}

		.quill-long {
				font-family: 'Futura PT Bold';
				height: 40%;
				width: 80%;
				margin-left: auto;
				margin-right: auto;
				padding: 2%;
				object-fit: cover;
				text-align: center;
				color: var(--subblack);
				border: solid var(--subblack) 15px;
				font-size: 1.1em;
				line-height: 1.5em;
		}

		.quill-white {
				font-family: 'Futura PT Bold';
				height: 50%;
				width: 40%;
				margin-left: auto;
				margin-right: auto;
				padding: 1%;
				object-fit: cover;
				text-align: center;
				color: var(--tricolorWhite);
				border: solid var(--tricolorWhite) 15px;
				background-color: var(--subblack);
				font-size: 1.3em;
				line-height: 1.5em;
		}

		.quill-inline {
				width: 100%;
				display: flex;
				flex-direction: row;
				margin: 0% 0% 0% 0%;
				padding: 0%;

		}

		.quill-image {
				height: 75%;
				width: 75%;
				margin-left: auto;
				margin-right: auto;
				padding: 2% 0% 2% 0%;
				object-fit: cover;
		}

		.quill-fig {
				height: 50%;
				width: 50%;
				margin-left: auto;
				margin-right: -55px;
				padding: 0%;
				object-fit: cover;
				z-index: 1;
		}

		.quill-title {
				height: 50%;
				width: 50%;
				margin-left: auto;
				margin-right: auto;
				padding: 0%;
				object-fit: cover;
		}


		.display {
				font-family:"Futura PT Bold";
		}

}

/*	Screen Size for Mobile Phone	*/

@media print and (max-width:1000px) {
		* {
				display:none;
		}
}


@media screen and (max-width:1000px) {

		:root {
				--black: #000000;
				--subblack: #181818;
				--white: #ffffff;
				--footer: #a8a8a8;
				--parallelY: rgba(255, 189, 16, 1);
				--parallelP: rgba(255, 0, 255, 1);
				--parellelB: rgba(0, 11, 255, 1);
				--tricolorWhite: #D2D8FF;
				--tricolorYellow: Orange;
				--stripeYellowA: #ffe4a8;
				--stripeYellowB: #ffe8b3;
				--tricolorRed: rgb(255, 0, 76);
				--stripePinkA: #ffdff1;
				--stripePinkB: #ffe8f7;
				--tricolorBlue: rgb(89, 0, 255);
				--stripeBlkA: #2c2c2c;
				--stripeBlkB: #464646;
				--tricolorBlk: rgb(130, 129, 144);
				--navdark: #605c5c;
		}

		/*	Dark Mode	*/
		.dark-mode {
				background-color: var(--navdark);

				#dark-main,
				.gallery-block {
						background-color: var(--subblack);
				}

				main,
				h1,
				h2,
				h3,
				span,
				.works-title,
				.works-description, #top-button {
						color: var(--white);
				}

				hr {
						border: var(--white);
						background-color: var(--white);
				}

				nav a {
						color: var(--white);
				}
				.dark-button::before {
						content: "";
						display: inline-block;
						background-image: url("../branding/sun-solid-full.svg");
						background-size: contain;
						background-repeat: no-repeat;
				}

		}

		/*	 Dark Mode Moon Button 	*/
		.dark-button {
				font-family: 'Futura PT Bold';
				font-size: 1.2em;
				color: var(--white);
				background-color: var(--subblack);
				border-radius: 3px;
				border: solid 1px var(--subblack);
				height: 1.2em;
				width: 1.2em;    
				text-align:center;
		}

		.dark-button::before {
				content: "";
				display: inline-block;
				background-image: url("../branding/moon-solid-full.svg");
				background-size: contain;
				background-repeat: no-repeat;
		}

		.dark-button:hover {
				background-color: var(--footer);
				color: var(--tricolorWhite);
				opacity: 0.2;
				border-radius: 3px;
				border: solid 1px var(--footer);
		}


		/*	Top Level Elements	*/

		* {
				box-sizing: border-box;
		}

		html {
				font-family: "Futura PT Book", sans-serif;
				margin: auto;
				padding: 3%;
				display: flex;
				flex-direction: column;
				text-align: center;
				scroll-behavior: smooth;
				scrollbar-color: var(--tricolorBlue) var(--tricolorWhite);
		}

		body {
				display: flex;
				flex-direction: column;
				gap: 10px;
		}

		header {
				padding: 5% 5% 0% 5%;
		}

		main {
				line-height: 1.5em;
				font-size: 20px;
				padding: 0.1em;
		}

		/*	Horizontal Rulers	*/
		hr {
				height: 3px;
				background-color: var(--subblack);
				border: var(--subblack);
				width: 80%;
				margin-top: 2%;
				margin-bottom: 2%;

		}

		.gallery-ruler {
				height: 2.5px;
				background-color: var(--subblack);
				border: var(--subblack);
				width: 20%;
		}

		/*	Headers	*/


		h3 {
				font-family: 'Futura PT Demi';
				font-size: 1.1em;
				color: var(--subblack);
				border-radius: 5px;
				padding: 1%;
		}

		/*	Custom Headers	*/

		.pitch-title {
				font-family: "Futura PT Bold";
				font-size: 1.5em;
				font-weight: bold;
				color: var(--subblack);
		}

		.main-header,
		.sub-header {
				font-family: "The Bold Font Pro", sans-serif;
				font-size: 1.5em;
				letter-spacing: 0.1em;
				margin: 5% 0% 5% 0%;
		}

		/*	Navigation Bar	*/

		nav {
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-size: 1.5em;
		}

		nav ul {
				margin: 0px;
				padding: 0px;
		}

		nav ul>li {
				margin-top: 6%;

		}

		nav a {
				color: var(--subblack);
				padding: 5%;
				text-decoration: none;
		}

		nav a:hover {
				color: var(--footer);
		}

		/*	Navigation SVGS	*/

		#social-iconlist {
				display: inline;
				margin: 0% 0% 0% 0%;

		}

		.social-icon {
				padding: 0px;
				margin: 5% 0% 0% 0%;

		}

		/*	Top Button	*/

		#top-button {
				text-decoration-line: none;
				color: var(--footer);
				font-size: 1em;
				padding: 1% 0% 1% 0%;

		}

		/*	About Page	*/

		/*	Images	*/

		.quill-welcome {
				display: block;
				margin-left: auto;
				margin-right: auto;
				position: relative;
				width: 100%;
				height: 100%;
				object-fit: cover;
		}

		.img-tricolor {
			display: block;
				margin-left: auto;
				margin-right: auto;
				width: 50%;
				position: relative;

		}

		.biography {
				font-family: "Futura PT Book";
				font-weight: bold;
		}

		/*	Education	*/

		.education-title {
				font-family: 'Futura PT Demi';
				font-size: 1.1em;
				color: var(--subblack);
		}

		/*	Works	*/

		.works {
				margin: 0%;
				padding: 0%;
		}

		.works-title {
				color: var(--subblack);
				font-family: "Futura PT Demi";
		}

		.works-description {
				color: var(--footer);
				padding: 3% 0%;
		}

		/*	Page: Project (Sonic Underground)	*/

		.logo {
				width: 100%;
				margin: 0% 0% 0% 0%;
				padding: 0%;
				object-fit: cover;
		}

		/*	Gallery Block	*/

		.gallery-block {
				display: flex;
				flex-direction: column;
				margin: 0% 0% 0% 0%;
				padding: 0%;
				background-color: var(--white);
				width: 100%;
		}

		.gallery-inline {
				background-color: var(--white);
				width: 100%;
				display: flex;
				flex-direction: row;
				margin: 0% 0% 0% 0%;
				padding: 0%;

		}

		.gallery-inline>img {
				height: 50%;
				width: 50%;
				margin: 1% 0% 1% 1%;
				object-fit: cover;
		}

		.gallery-image {
				height: 100%;
				width: 100%;
				margin-left: auto;
				margin-right: auto;
				padding: 3% 0% 3% 0%;
				object-fit: cover;
		}

		/*	Gallery Navigation	*/

		.gallery-navigation {
				position: sticky;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin: 0%;
				padding: 0%;
		}

		.gallery-nav {
				background-color: var(--subblack);
				margin: 1% 15%;
				padding: 0.5%;
				opacity: 1;
		}

		.gallery-nav:hover {
				background-color: var(--footer);
		}

		.gallery-nav-link {
				color: var(--footer);
				font-weight: bold;
				font-size: 0.9em;
				text-decoration-line: none;
		}

		/*	Lists	*/

		ul {
				list-style-type: none;
		}

		/*	Footer	*/
		footer {

				font-family: Verdana, Tahoma, sans-serif;
				font-size: 0.8em;
				color: var(--footer);
		}

		/*	Parallelogram for About Page	*/

		.parallelogram-bar {
				margin-left: auto;
				margin-right: auto;
				width: 576px;
				height: 32px;
				transform: skew(-45deg);
				background: linear-gradient(90deg, 
				var(--parallelY) 0%, var(--parallelY) 35%, 
				var(--parallelP) 35%, var(--parallelP) 65%, 
				var(--parellelB) 65%, var(--parellelB) 100%);
		}

		
		/*	Contact */


		#contact-email {
				color: var(--subblack);
		}


		#hoverEmail{
			display:30%;
		}

		/*	Margins	*/

		.margin-center {
				margin-left: auto;
				margin-right: 5%;
		}

		.margin-down {
				margin-top: 10%;
		}

		/*	Quillopedia Custom Page	*/

		.color-red {
				color: var(--tricolorRed);
		}

		.color-blue {
				color: var(--tricolorBlue);
		}

		.color-yellow {
				color: var(--tricolorYellow);
		}

		.color-white {
				color: var(--white);
		}

		.quill-header {
				font-family: "The Bold Font Pro", sans-serif;
				font-size: 1.4em;
				letter-spacing: 0.1em;
				padding-top: 2%;
				margin: 3%;
		}

		.block-white {
				background-color: var(--tricolorWhite);
				margin-bottom: 0%;
				padding: 1% 0%;
				border-bottom: solid 10px var(--tricolorYellow);
		}

		.block-golden {
				margin-top: 0%;
				margin-bottom: 0%;
				padding: 1% 0%;
				background: repeating-linear-gradient(45deg, 
				var(--stripeYellowA) 0 33px, var(--stripeYellowB) 33px 66px);
				border-bottom: solid 10px var(--tricolorRed);
		}

		.block-pink {
				margin-top: 0%;
				margin-bottom: 0%;
				padding: 1% 0%;
				background: repeating-linear-gradient(45deg, 
				var(--stripePinkA) 0 33px, var(--stripePinkB) 33px 66px);
				border-bottom: solid 10px var(--tricolorBlue);
		}

		.block-blk {
				margin-top: 0%;
				padding: 1% 0%;
				background: repeating-linear-gradient(45deg, 
				var(--stripeBlkA) 0 33px, var(--stripeBlkB) 33px 66px);
				border-bottom: solid 10px var(--tricolorBlk);
		}


		.quill-text {
				height: 50%;
				width: 90%;
				margin-left: auto;
				margin-right: auto;
				padding: 4%;
				object-fit: cover;
				text-align: center;
				color: var(--subblack);
				border: solid var(--subblack) 15px;
				background-color: var(--tricolorWhite);
				font-size: 1.1em;
				line-height: 1.5em;
		}


		.quill-long {
				font-family: 'Futura PT Bold';
				height: 40%;
				width: 80%;
				margin-left: auto;
				margin-right: auto;
				padding: 2%;
				object-fit: cover;
				text-align: center;
				color: var(--subblack);
				border: solid var(--subblack) 15px;
				font-size: 1.1em;
				line-height: 1.5em;
		}

		.quill-white {
				font-family: 'Futura PT Bold';
				height: 50%;
				width: 50%;
				margin-left: auto;
				margin-right: auto;
				padding: 4%;
				object-fit: cover;
				text-align: center;
				color: var(--tricolorWhite);
				border: solid var(--tricolorWhite) 15px;
				background-color: var(--subblack);
				font-size: 1.1em;
				line-height: 1.5em;
		}


		.quill-inline {
				width: 100%;
				display: flex;
				flex-direction: row;
				margin: 0% 0% 0% 0%;
				padding: 0%;

		}

		.quill-fig {
				display: none;
		}

		.quill-image {
				height: 75%;
				width: 75%;
				margin-left: auto;
				margin-right: auto;
				padding: 2% 0% 2% 0%;
				object-fit: cover;
		}

		.quill-title {
				height: 50%;
				width: 50%;
				margin-left: auto;
				margin-right: auto;
				padding: 0% 0% 0% 0%;
				object-fit: cover;
		}



		.display {
				font-family:"Futura PT Bold";
		}

}