/* Fonts */
@import url("https://use.typekit.net/tnc6cod.css");
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');


/* Variables */

:root {
	/* Colours */
		--zekrom: oklch(0.247 0.0151 285.24);
		--reshiram: oklch(0.9636 0.0129 185.1);
		--trevant: oklch(0.4545 0.073 113.96);
		--fuecoco: oklch(0.5846 0.2133 28.18);
		/* darker */
		--zekrom-dark: oklch(from var(--zekrom) 25% 0.0151 285.24);
		--reshiram-dark: oklch(from var(--reshiram) 80% 0.0129 185.1);
		--trevant-dark: oklch(from var(--trevant) 25% 0.073 113.96);
		--fuecoco-dark: oklch(from var(--fuecoco) 25% 0.2133 28.18);
	
	/* Category Colours */
		--UI-UX: oklch(0.7 0.1334 318.34);
		--3D: oklch(0.7 0.1334 270.27);
		--PKG: oklch(0.7 0.1334 226.06);
		--POSTER: oklch(0.7 0.1334 173.64);
		--WEB: oklch(0.7 0.1334 133.53);
		--TYPE: oklch(0.7 0.1334 81.19);
		--BRANDING: oklch(0.7 0.1334 30.98);
		--TAFE: oklch(0.5711 0.2103 25.79);
		
	
	/* Animation */
		--animation-spring: linear(0, 0.0018, 0.0069 1.16%, 0.0262 2.32%, 0.0642, 0.1143 5.23%, 0.2244 7.84%, 0.5881 15.68%, 0.6933, 0.7839, 0.8591, 0.9191 26.13%, 0.9693, 1.0044 31.93%, 1.0234, 1.0358 36.58%, 1.0434 39.19%, 1.046 42.39%, 1.0446 44.71%, 1.0404 47.61%, 1.0118 61.84%, 1.0028 69.39%, 0.9981 80.42%, 0.9991 99.87%);
		--animation-spring-speed: 0.4300s;
	
	/* Fonts */
		--body: "Work Sans", sans-serif;
		--heading: "Neighbor", sans-serif;
}

/* Presets */

	*,
	html,
	body {
		box-sizing: border-box;
		margin: 0;
		/* transition: all var(--animation-spring-speed) var(--animation-spring) allow-discrete; */
		font-optical-sizing: auto;
		orphans: 2;
	}
	
	html, body {
		height: 95vh;
	}

	h1, h2, h3, h4, h5 {
		font-family: var(--heading);
		font-feature-settings: 'ss01' on, 'ss02' on;
		text-transform: uppercase;
	}
	
	p, a, button {
		font-family: var(--body);
		font-feature-settings: 'ss04' on;
		font-variant-alternates: styleset(ss04);
	}
	
	.tadamaLeaf {
		background-image: url("data:image/svg+xml,%3Csvg fill='oklch(0.9636 0.0129 185.1)' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.528661 44.9355C-0.449344 47.8814 -0.0581421 51.1128 1.60052 53.7458C3.25877 56.3695 6.00591 58.128 9.10189 58.5238C18.8487 59.7849 30.7135 61.3225 30.7135 61.3225C30.7135 61.3225 22.5315 68.9361 15.6423 75.3343C13.3628 77.461 12.1468 80.4896 12.3507 83.6015C12.5463 86.7038 14.1285 89.5578 16.6714 91.3806C20.941 94.4464 25.8825 97.9906 30.135 101.038C32.6442 102.833 35.8166 103.441 38.8104 102.677C41.8042 101.922 44.3047 99.8871 45.6482 97.1161C49.8924 88.3518 55.0889 77.6266 55.0889 77.6266C55.0889 77.6266 59.92 87.6244 63.9682 95.9929C65.3121 98.7732 67.8126 100.808 70.8064 101.572C73.8002 102.327 76.9813 101.728 79.4901 99.924C83.7343 96.8767 88.6759 93.3325 92.9538 90.2667C95.4883 88.4531 97.0705 85.5991 97.2744 82.4875C97.47 79.3849 96.2624 76.3561 93.9828 74.2296C86.8897 67.6286 78.3335 59.6654 78.3335 59.6654C78.3335 59.6654 89.5006 58.266 98.8563 57.0968C101.944 56.7102 104.699 54.9701 106.375 52.3465C108.042 49.7319 108.45 46.5097 107.489 43.5545C105.873 38.5923 103.993 32.8476 102.377 27.8948C101.425 24.9581 99.2051 22.6012 96.3217 21.4505C93.4471 20.3089 90.2066 20.493 87.4765 21.9661C78.8269 26.615 68.2548 32.3138 68.2548 32.3138C68.2548 32.3138 70.3217 21.4689 72.0651 12.3364C72.6436 9.29834 71.8272 6.14967 69.8454 3.76541C67.8636 1.38092 64.9126 0 61.7996 0H45.0614C41.94 0 38.989 1.38092 36.9985 3.77463C35.0168 6.17732 34.209 9.32598 34.8041 12.3731C36.6331 21.791 38.8441 33.1423 38.8441 33.1423C38.8441 33.1423 28.9357 27.7934 20.6772 23.3286C17.9559 21.8555 14.7237 21.6622 11.849 22.7945C8.9744 23.9269 6.74596 26.2745 5.77625 29.1928C4.11801 34.1643 2.19563 39.9458 0.528661 44.9355Z' fill='white' style='fill:white;fill-opacity:1;'/%3E%3C/svg%3E%0A");
		width: 6.25rem;
		position: relative;
		display: inline-block;
	}



/* Pages */

	/* Presets */
	
	.primaryContent * {
		transition: all var(--animation-spring-speed) var(--animation-spring) allow-discrete;
	}
	
	.primaryBody {
		display: grid;
		grid-template-columns: 1fr 3fr;
		grid-template-rows: repeat(1, 1fr);
		gap: 8px;
		background: var(--fuecoco);
		margin: 1rem;
		border-radius: 20px;
		overflow: hidden;
	}
	
	/* mobile */
		@media screen and (max-width: 960px) {
			.primaryBody {
				grid-template-columns: 1fr;
			}
		}
	
	/* --- */
	
	.primaryContent {
		/* grid-column: span 2 / span 2; */
		background: var(--reshiram);
		overflow: scroll;
		padding: 1rem;
		border-radius: 2rem;
	}
	
		@media screen and (max-width: 960px) {
			.primaryContent {
				width: 100%;
				height: 97vh;
				transform: translateY(-1rem);
			}
		}
	


	/* Introduction */
	
	.introductionBackground {
		background-color: var(--zekrom);
	}
	
	/* Portfolio (Home) */
	
	.portfolioGrid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
		gap: 1rem;
	}
	
	.portfolioGridCard {
		border-radius: 1rem;
		padding: 1rem;
		background: var(--zekrom);
		display: flex;
		justify-content: space-between;
		gap: 0.5rem;
		flex-direction: column;
		text-wrap: balance;
		color: var(--reshiram)
	}
		.portfolioGridCard p {
			font-size: 0.8rem;
		}
		
		.portfolioGridCard h3 {
			text-align: center;
		}
		
		.portfolioGridCard img {
			width: 100%;
			border-radius: calc(1rem - 0.5rem);
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-webkit-user-drag: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		
		.portfolioGridCard button {
			border-radius: calc(1rem - 0.5rem);
			border: none;
			padding: 0.5rem;
			width: 100%;
			height: 3rem;
			font-family: var(--body);
			text-transform: uppercase;
			background-color: var(--trevant);
			color: var(--reshiram);
			font-weight: bold;
		}
		
			.portfolioGridCard button:hover {
				margin-top: 0.5rem;
				cursor: pointer;
				background-color: var(--fuecoco);
				transform: scale(1.2) rotate(-5deg);
				border-radius: 100px;
				box-shadow: -1px 1px 70px 0px rgba(0,0,0,0.42);
			}
			
			.portfolioGridCard button:active {
				transform: scale(1) rotate(-5deg);
				box-shadow: inset;
			}
		
		.portfolioGridCardCategories {
			display: flex;
			gap: 0.5rem;
		}
		
			.portfolioGridCardCategoriesPill {
				padding: 0.25rem 0.5rem 0.25rem 0.5rem;
				border-radius: 100px;
				width: 100%;
				text-align: center;
				display: flex;
				justify-content: center;
				align-content: center;
				align-items: center;
				gap: 0.5rem;
				color: var(--reshiram);
				max-width: 6.25rem;
				container-type: inline-size;
				container-name: pillSizeDetector;
			}
			
			.portfolioGridCardCategories img {
				width: 20px;
				height: 20px;
			}
			
			@container pillSizeDetector (max-width: 60px){
				#BG-TAFE p{
					display: none;
				}
				
				#BG-TAFE {
					padding: 0.5rem 0;
					width: 5.5rem !important;
				}
			}
			
			/* colours are handled via an ID, in the ID section. */
		
	/* Portfolio Expanded ("project info" pages) */
	
	.portfolioExpandedGrid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
		overflow: scroll;
		height: 100%;
		border-radius: 1rem;
		background: linear-gradient(in oklch, var(--reshiram), var(--reshiram-dark));
		transition: none !important;
	}
		@media screen and (max-width: 719px) {
			.portfolioExpandedGrid { 
				grid-template-columns: 1fr; 
				/* background: green; */
			} 
			.portfolioExpandedRationale {
				overflow: visible !important; /* dont look at me */
			}
			
			#span2 {
				grid-column: revert !important;
			}
		}
		
		
		
		@media screen and (min-width: 960px) {
			.portfolioExpandedGrid {
				grid-template-columns: 1fr 1fr; /* double column */
				/* background: yellow; */
			}
			
			.portfolioExpandedRationale {
				min-height: 20rem;
				/* background: purple; */
			}
		}
		
		.portfolioExpandedGrid h1 {
			font-size:calc(80% + 4vw); /* so it wont clip when you shrink the window. hopefully :] */
			text-align: center;
			line-height: 0.9;
			padding-bottom: 1rem;
		}
		
	.portfolioExpandedRationale {
		background: var(--zekrom);
		color: var(--reshiram);
		border-radius: 1rem;
		padding: 1rem;
		overflow: scroll; 
		/* noah in the future don't be an idiot like noah in the past and spend 10 thousand years trying to fix this. if you set overflow to scroll, it means that a grid won't be happy when its one column. if you have a one-column layout and want the content to be visible, just use a media query like ive done below to set the overflow to visible and save yourself the stress. */
		container-name: portfolioExpandedRationaleContainer;
		
		.portfolioExpandedRationale h2 {
			font-size: 3rem;
		}
	}
		.portfolioExpandedRationale p, h2 {
			margin-bottom: 1rem;
			max-width: 75ch;
		}
		
		.portfolioExpandedRationale p:last-child {
			margin-bottom: 0;
		}
		
		.portfolioExpandedRationale a {
			color: var(--fuecoco);
			text-decoration-line: underline;
			text-decoration-style: wavy;
			text-decoration-color: var(--fuecoco);
		}
		
		
	.portfolioExpandedScrollingImages {
		display: flex;
		flex-direction: row;
		overflow: scroll;
		border-radius: 1rem;
		cursor: ew-resize;
		gap: 1px;
		height: 29.125rem;
		background: var(--zekrom);
	}
		.portfolioExpandedScrollingImages img {
			height: 29rem;
			width: auto;	
		}
		
	.portfolioExpandedProjectInfo .portfolioGridCardCategories {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	
	.portfolioExpandedProjectInfo {
		background: var(--zekrom);
		padding: 1rem;
		border-radius: 1rem;
		color: var(--reshiram);
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	
	.expandedPill {
		height: 2.5rem;
	}
	
	.figmaEmbed {
		border: 1px solid rgba(0, 0, 0, 0.1);
		min-width: 20rem;
		width: 100%;
		height: 100%;
		border-radius: 1rem;
		min-height: 20rem;
	}
	
	/* About Page */
	
	.aboutPageContent {
		grid-template-columns: 1fr 1fr;
		display: grid;
		height: 100%
	}
	
	.aboutPageText {
		container-name: aboutPageTextContainer;
		container-type: inline-size; /* or 'size' */
		width: 100%;
		/* background-color: oklch(var(--zekrom, 0.5)); */
	}

	
		.aboutPageText p {
			line-height: 1.5;
		}
		
		.aboutPageText h1 {
			font-size: calc(80% + 7vw);
			line-height: 0.9;
		}
	
	.aboutPageBadges {
		padding-top: 1rem;
	}
		.aboutPageBadges img {
			image-rendering: crisp-edges;
			image-rendering: pixelated;
			height: 2rem;
			width: auto;
		}
	
	.aboutPageSocialLinks svg {
		width: 2rem;
		height: auto;
	}
	
	@media screen and (max-width: 719px) {
		#bigNoah {
			background: var(--reshiram);
		}
		
		.aboutPageContent {
			grid-template-columns: 1fr;
		}
	}
	
	
		.aboutPageBigNoahContainer {
			width: 100%;
			height: 100%;
			/* transform: scale(1.2) translateX(2rem);
			background: url('./assets/about/reflection.png') no-repeat center; */
			background-size: contain;
			overflow: hidden;
			
			/* my "don't select me" spell... ahem...! */
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-webkit-user-drag: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
	
	
	/* Contact Page */
	
	.contactBlockGrid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(2, minmax(0, 1fr));
		height: 100%;
		gap: 1rem;
	}
	
	.contactBlockGrid a {
		height: 100%;
		text-decoration: none;
	}
	
	.contactBlock {
		background: var(--zekrom);
		border-radius: 1rem;
		padding: 1rem;
		overflow: hidden;
		height: 100%;
		line-height: 1;
	}
	
	.contactBlock:hover {
		background: var(--fuecoco);
		cursor: pointer;
	}
	
	.contactBlock:active {
		transform: scale(0.9);
		box-shadow: 1px 29px 28px 0px rgba(0,0,0,0.09) inset;
		-webkit-box-shadow: 1px 29px 28px 0px rgba(0,0,0,0.09) inset;
		-moz-box-shadow: 1px 29px 28px 0px rgba(0,0,0,0.09) inset;
	}
	
		.contactBlock h1 {
			color: var(--reshiram);
			font-size: calc(80% + 3vw);
			max-width: 4.375rem;
		}
		
	
	.logoContainer {
		width: 6.25rem;
		position: relative;
		display: inline-block;
		filter: invert(1);
		transform: scale(3.5) translate(87px, 42px);
		opacity: 5%;
	}
	
	.blueskyLogo::after {
	   vertical-align: -0.125em;
	   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23000' d='M5.892 2.93c-1.78-1.06-3.813.446-3.63 2.359l.398 4.185c.176 1.855 1.84 4.026 4.195 3.823C4.5 14 3.132 15.865 4.88 18.145c.286.373.597.745.914 1.062s.69.628 1.062.914c1.88 1.441 4.375-.65 5.055-2.69l.09-.268l.09.269c.68 2.04 3.174 4.13 5.055 2.689c.372-.286.745-.597 1.062-.914s.628-.69.914-1.062c1.747-2.28.379-4.145-1.976-4.848c2.355.203 4.018-1.968 4.195-3.823l.399-4.185c.182-1.913-1.852-3.418-3.631-2.36C15.2 4.66 13.485 7.393 12 9.902C10.515 7.392 8.8 4.66 5.892 2.93'/%3E%3C/g%3E%3C/svg%3E");
   }
	
	.instagramLogo::after {
	  vertical-align: -0.125em;
	  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23000' d='M16 3a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V8a5 5 0 0 1 5-5zm0 2H8a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3m-4 3a4 4 0 1 1 0 8a4 4 0 0 1 0-8m0 2a2 2 0 1 0 0 4a2 2 0 0 0 0-4m4.5-3.5a1 1 0 1 1 0 2a1 1 0 0 1 0-2'/%3E%3C/g%3E%3C/svg%3E");
	}
	
	.emailSymbol::after {
	  vertical-align: -0.125em;
	  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 13.68a1 1 0 0 0-1 1v7.5a1 1 0 0 0 2 0v-7.5a1 1 0 0 0-1-1m-4.5-1.5a1 1 0 0 0-1 1v5.5a1 1 0 0 0 2 0v-5.5a1 1 0 0 0-1-1m9 0a1 1 0 0 0-1 1v5.5a1 1 0 0 0 2 0v-5.5a1 1 0 0 0-1-1M2.17 1A1.5 1.5 0 0 0 0 2.32V3a1.49 1.49 0 0 0 .94 1.41l1 .41a1.42 1.42 0 0 0-.49.87a1.52 1.52 0 0 0 .28 1.16l.76 1a1.48 1.48 0 0 0 1.2.59a1.4 1.4 0 0 0 1-.39l.7-.91a.46.46 0 0 0 .11-.3V3.2a.48.48 0 0 0-.25-.43Zm15.22 2.83a.2.2 0 0 0-.21 0L13 6.45a1.9 1.9 0 0 1-2 0L6.82 3.83A.22.22 0 0 0 6.5 4v5a1.28 1.28 0 0 0 1.27 1.28h8.46A1.28 1.28 0 0 0 17.5 9V4a.2.2 0 0 0-.11-.17'/%3E%3Cpath fill='%23000' d='M16.23.82H7.77A1.27 1.27 0 0 0 6.5 2.09a.1.1 0 0 0 0 .06l5.13 3.22a.64.64 0 0 0 .68 0l5.13-3.23a.05.05 0 0 0 0-.05A1.27 1.27 0 0 0 16.23.82m7.06.18a1.52 1.52 0 0 0-1.49 0l-3.05 1.77a.48.48 0 0 0-.25.43v3.64a.46.46 0 0 0 .11.3l.7.91a1.45 1.45 0 0 0 1 .39a1.48 1.48 0 0 0 1.2-.59l.77-1a1.52 1.52 0 0 0 .27-1.15a1.42 1.42 0 0 0-.49-.87l1-.41A1.49 1.49 0 0 0 24 3v-.7a1.51 1.51 0 0 0-.71-1.3'/%3E%3C/svg%3E");
	}
	
	.carrierPigeon::after {
	  vertical-align: -0.125em;
	  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cmask id='ipSPigeon0'%3E%3Cg fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='M14 26c-1.04-1.793-2.15-5.551 2.008-10.244c1.213-1.141 2.806-2.64 5.716-3.423C24.842 10.867 26.401 8.52 24.323 5C25.882 5.978 29 9.693 29 16.733'/%3E%3Cpath fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='M16.253 27.93C8 23.57 4.51 30.195 4 33.755c4 0 8.679 2.911 10.721 5.823c3.676 4.66 9.36 3.56 11.742 2.427c7.352-3.883 9.87-3.56 10.21-2.912c.41 3.106 1.532 3.883 2.043 3.883c3.676.388 4.935-4.045 5.105-6.31c.817-9.319-1.361-9.707-2.552-8.736c-4.902 5.824-7.829 6.957-8.68 6.795c-3.675-.777-3.233-2.265-2.552-2.913C36.572 26.377 36.504 14.34 35.653 9c-2.45 5.825-6.467 8.251-8.169 8.737c-10.21 2.718-11.742 7.928-11.231 10.193'/%3E%3Ccircle cx='12' cy='31.412' r='2' fill='%23000'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cpath fill='%23000' d='M0 0h48v48H0z' mask='url(%23ipSPigeon0)'/%3E%3C/svg%3E");
	}

	/* Landing Page */

		.landingPageTomatoGrow {
			animation: landingPageTomatoGrow 1.5s var(--animation-spring) forwards;
		}

		@keyframes landingPageTomatoGrow {
			to {
				transform: scale(100);
			}
		}

		

/* IDs */

	#disableScroll {
		overflow: hidden;
	}

	/* Introduction Page IDs */
		#introductionTomatoContainer {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
			#introductionTomato {
				width: 11.9375rem;
				height: 12.0625rem;
				aspect-ratio: 191/193;
				transition: all 1s var(--animation-spring);
			}
		
			#introductionTomato:hover {
				transform: scale(0.9);
				transform-origin: center;
				cursor: pointer;
			}
			
			#introductionTomato:active {
				transform: scale(0.8);
			}
		
		#introductionLogo {
			background: var(--reshiram);
			mask-image: url('./assets/logo.svg');
			width: 10.5625rem;
			height: 1.9375rem;
			z-index: -1;
			position: absolute;
			bottom: 5%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		
		
	/* Index/Portfolio Page IDs */
	
	#BG-UIUX {
		background-color: var(--UI-UX);
	}
	
	#BG-3D {
		background-color: var(--3D);
	}
	
	#BG-PKG {
		background-color: var(--PKG);
	}
	
	#BG-POSTER {
		background-color: var(--POSTER);
	}
	
	#BG-WEB {
		background-color: var(--WEB);
	}
	
	#BG-TYPE {
		background-color: var(--TYPE);
	}

	#BG-TAFE {
		background-color: var(--TAFE);
	}
	
	#BG-BRANDING {
		background-color: var(--BRANDING);
	}
	
	#BG-EVERYTHING {
		background: conic-gradient(
			oklch(0.7 0.1334 318.34),
			oklch(0.7 0.1334 270.27),
			oklch(0.7 0.1334 226.06),
			oklch(0.7 0.1334 173.64),
			oklch(0.7 0.1334 133.53),
			oklch(0.7 0.1334 81.19),
			oklch(0.7 0.1334 30.98),
			oklch(0.7 0.1334 318.34)
		);
	}
	
	#BG-TADAMA {
		background: radial-gradient(
			oklch(0.4545 0.073 113.96),
			oklch(0.5846 0.2133 28.18)
		)
	}
	
	/* Portfolio Expanded Pages */
	
	#span2 {
		grid-column: auto / span 2;
	}
	
	/* About Page */
	#age {
		cursor: context-menu;
		text-decoration-line: underline;
		text-decoration-style: wavy;
		text-decoration-color: var(--fuecoco);
	}
	
	#bigNoah {
		background: url('./assets/about/noah.png') no-repeat right, var(--reshiram);
		background-size: contain;
	}
	
		@media screen and (max-width: 1213px) {
			#bigNoah {
				background: var(--reshiram);
			}
		}