/* @override 
	http://localhost:55358/css/style.css
	http://localhost:1313/css/style.css */

/* @group Fonts */

	@font-face {
		font-display: swap;
		font-family: "Franklin Gothic";
		font-style: normal;
		font-weight: normal;
		src: url("../fonts/ITCFranklinGothicStd-DmCd.eot");
		src: url("../fonts/ITCFranklinGothicStd-DmCd.eot?#iefix") format("embedded-opentype"), url("../fonts/ITCFranklinGothicStd-DmCd.woff2") format("woff2"), url("../fonts/ITCFranklinGothicStd-DmCd.woff") format("woff"), url("../fonts/ITCFranklinGothicStd-DmCd.ttf") format("truetype"), url("../fonts/ITCFranklinGothicStd-DmCd.svg#ITCFranklinGothicStd-DmCd") format("svg");
	}
	
	@font-face {
		font-display: swap;
		font-family: "Holligate Signature";
		font-style: normal;
		font-weight: normal;
		src: url("../fonts/HolligateSignatureDemo.eot");
		src: url("../fonts/HolligateSignatureDemo.eot?#iefix") format("embedded-opentype"), url("../fonts/HolligateSignatureDemo.woff2") format("woff2"), url("../fonts/HolligateSignatureDemo.woff") format("woff"), url("../fonts/HolligateSignatureDemo.ttf") format("truetype"), url("../fonts/HolligateSignatureDemo.svg#HolligateSignatureDemo") format("svg");
	}
	
	@font-face {
		font-display: swap;
		font-family: "Trixie";
		font-style: normal;
		font-weight: normal;
		src: url("../fonts/Trixie-Plain.eot");
		src: url("../fonts/Trixie-Plain.eot?#iefix") format("embedded-opentype"), url("../fonts/Trixie-Plain.woff2") format("woff2"), url("../fonts/Trixie-Plain.woff") format("woff"), url("../fonts/Trixie-Plain.ttf") format("truetype"), url("../fonts/Trixie-Plain.svg#Trixie-Plain") format("svg");
	}

/* @end */

/* @group Colours */

	:root {
		--black: rgba(0, 0, 0, 1); /* Black */
		--hymalayan: rgba(250, 158, 205, 1); /* Hymalayan Balsam */
		--katydid: rgba(249, 97, 173, 1); /* Katydid Pink */
		--palidpink: rgba(255, 220, 237, 1); /* Palid Pink */
		--white: rgba(255, 255, 255, 1); /* White */
	}

/* @end */

/* @group Base */

	* {
		margin: 0;
		padding: 0;
	}
	
	/* Body background: gradient + grain noise
	   Grain layered over the gradient via an inline SVG with baked-in opacity. */
	html {
		background-color: var(--palidpink);
		background-image:
			url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E"),
			linear-gradient(180deg, var(--white) 0%, var(--palidpink) 100%);
		background-size: 200px 200px, 100% 100%;
		min-height: 100%;
	}
	
	body {
		color: var(--black);
		font-family: "Trixie", "Courier New", monospace;
		font-size: medium;
		line-height: 1.4;
		overflow-x: clip;
		text-align: center;
		text-shadow: 0.02em 0.02em 0 var(--palidpink), 0.04em 0.04em 0 var(--hymalayan);
	}
	
	/* Centred container: 800px max */
	article {
		margin: 0 auto;
		max-width: min(50rem, 100% - 2rem);
		padding: 0.5em 0 3em;
	}
	
	article > * {
		margin: 0 auto 1.25em;
	}
	
	a {
		color: inherit;
		text-decoration-thickness: 0.08em;
		text-underline-offset: 0.15em;
	}
	
	a:focus,
	a:hover {
		color: var(--katydid);
	}
	
	footer {
		padding: 2em 0;
	}

/* @end */

/* @group Elements */

/* Navigation and photo stay in front of the signature */
	nav,
	img {
		position: relative;
		z-index: 1;
	}
	
	/* Language switcher */
	nav, footer {
		color: color-mix(in srgb, var(--black) 50%, transparent);
		font-size: small;
	}
	
	nav a {
		text-decoration: none;
	}
	
	/* Signature with animated gradient. Vertical padding keeps swashes inside the clipped background */
	.name {
		animation: name-gradient 6s ease-in-out infinite alternate;
		-webkit-background-clip: text;
		background-clip: text;
		background-image: linear-gradient(179deg, var(--hymalayan) 6%, var(--palidpink) 25.5%, var(--katydid) 25.5%, var(--black) 43%, var(--hymalayan) 56%, var(--palidpink) 75.5%, var(--katydid) 75.5%, var(--black) 93%);
		background-size: 100% 200%;
		color: transparent;
		filter: drop-shadow(0.01em 0.01em 0 var(--palidpink)) drop-shadow(0.01em 0.01em 0 var(--hymalayan)) drop-shadow(0 0.02em 0.04em var(--hymalayan));
		font-family: "Holligate Signature", cursive;
		font-size: clamp(2.5rem, 11vw, 6rem);
		line-height: 1.2;
		margin-bottom: -1em;
		padding: 0.4em 0.2em;
		text-shadow: none;
		transform: rotate(-7deg);
		white-space: nowrap;
		width: fit-content;
	}
	
	h1, h2 {
		font-family: "Franklin Gothic", "Arial Narrow", sans-serif;
		font-size: clamp(1.5rem, 5vw, 2.25rem);
		font-weight: normal;
		line-height: 1.1;
		margin: 1em 0;
		position: relative;
		text-shadow: 0.01em 0.01em 0 var(--palidpink), 0.02em 0.02em 0 var(--hymalayan), 0.03em 0.03em 0 var(--katydid), 0 0.06em 0.1em var(--hymalayan);
		text-transform: uppercase;
		z-index: 2;
	}
	
	h2 {
		font-size: 1.5em;
		margin: 2em auto 1em;
	}

	/* @group Main Figure */
	
		/* Portrait: soft Gaussian glow following the PNG silhouette */
		figure {
			margin: 0 auto;
			max-width: 400px;
		}
		
		figure img {
			animation-name: floating;
		    animation-duration: 7s;
		    animation-iteration-count: infinite;
		    animation-timing-function: ease-in-out;
			display: block;
			height: auto;
			max-width: 100%;
			transition: filter 0.6s ease;
		}
		
		figure img:hover {
			filter: drop-shadow(0 0 1em var(--hymalayan));
		}
		
	/* @end */
		
		ul {
			overflow: hidden;
		}
	
		ul>li {
			float: left;
			overflow: hidden;
			width: 25%;
		}
			ul>li>span {
				font-size: .8em;
				padding: 2%;
				text-transform: uppercase;
				}
		
			ul>li li {
				display: list-item;
				float: none;
				width: auto;
			}
			
				ul>li li a {
					display: block;
					padding: 2%;
				}

/* @end */

/* @group Animations */

	@keyframes name-gradient {
	to {
		background-position: 0 100%;
	}
}

	@keyframes
	floating {
	    0% { transform: translate(0,  30px); }
	    50%  { transform: translate(0, 10px); }
	    100%   { transform: translate(0, 30px); }    
	}
	
/* @end */


/* @group Media queries */

@media screen and (max-width: 600px) {
  figure img {
	margin: 0 auto;
    max-width: 300px;
  }
  
  ul>li {
  			min-height: 200px;
  			width: 50%;
  }
  
  	ul>li li {
  			min-height: inherit;
  			width: inherit;
  }
  
}