/* ------------------------ */
	/* --------- TEXT --------- */
	/* ------------------------ */
	
	@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');
	
	:root {
		font-family: "Bricolage Grotesque", sans-serif;
		font-optical-sizing: auto;
		font-variation-settings: "wdth" 100;
		font-size: 18px;
		color: #848484;
		
		--color-hoodie: #7D00C6;
		--color-youtube: #E32446;
		--color-twitch: #9445E1;
		--color-bluesky: #206CDC;
		--color-twitter: #219EEE;
		--color-instagram: #FF8D00;
		--color-tumblr: #E95F7A;
		--color-tiktok: #4641A5;
		--color-email: #16A5A2;
		--color-refsheet: #FF8D00;
		
		--mobile-content-width: 600px; /* Maximum width in Mobile mode */
		--desktop-content-width: 1200px; /* Maximum width in Desktop mode */

		
	}
	
	a {
		text-decoration: none;
	}
	
	b {
		font-weight: bold;
	}
	
	i {
		font-style: italic;
	}
	
	.desktopOnly {
		display: none;
	}
	
	.mobileOnly {
		display: block;
	}
	
	/* ------------------------ */
	/* ------ MAIN BOXES ------ */
	/* ------------------------ */
	
	body, html {
		min-height: 100%;
	}
	
	body {
		background-image: url("../img/bg.jpg");
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		
		padding: 0 5%;
	}
	
	section {
		width: 100%;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	section#landing { /* First page */
		min-height: 80vh; /* Fills the page but lets the next section show up */
	}
	
	#main, #infoContainer {	
		box-sizing: border-box;
		position: relative;
		margin: 2em auto;
	}
	
	#main, .infoPanel {
		height: auto;
		box-sizing: border-box;
		padding: 10px;
		
		background-color: #D7D7D7;
		border-radius: 30px;
	}
	
	#main {
		position: relative; /* Forces the main to be a POSITIONED element, so that the absolute elements under refer to it instead of higher elements */
		display: flex;
		flex-direction: column; /* Up to Down */
		
		width: 100%;
		max-width: var(--mobile-content-width);
		
		box-shadow: rgba(31, 6, 229, 0.4) 0 30px 30px -20px; /* Left, Down, Blur, Spread */
		
		background-image: url("../img/grid.png");
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	#mainInfo {
		position: relative;
		width: 100%;
		
		box-sizing: border-box;
		padding-left: 10%; /* Sides on mobile */
		padding-right: 10%; /* Sides on mobile */
	}
	
	#mainPhoto {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 200px;
		border-radius: 20px;
		background-color: #FF72B4;
	}
	
	.parallaxElement {
		position: absolute;
		inset: 0 0; /* Helps with extending the box */
	}
	
	.parallaxPhoto {
		background-image: url(../img/andre_moraph_profile_picture.jpg);
		background-size: cover;
		background-position: 25% 60%; /* 25% only affects Desktop version and 60% only affects Mobile version */
		z-index: 0;
		
		height: 115%; /* Taller reference */
	}
	
	#presentation {
		margin-bottom: 2em;
		max-width: 500px;
		
		line-height: 1.5em;
	}
	
	/* ---------------------------- */
	/* --------  LOGO  ----------- */
	/* ---------------------------- */
	
	#mainInfo .andreLogo {
		margin-top: 2em; /* Mobile only */
		margin-bottom: 1em;
	}
	
	#mainPhoto .andreLogo {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		
		width: 100%;
		height: 100%;
		
		z-index: 1;
	}
	
	.andreLogo svg { 
		width:auto;
	}
	
	#mainInfo .andreLogo svg { /* Desktop */
		height: 80px;
	}
	
	#mainPhoto .andreLogo svg { /* Mobile */
		height: 40px;
		width: 120px;
		position: relative;
	}
	
	/* ---------------------------- */
	/* --------  LINKS  ----------- */
	/* ---------------------------- */
	
	#linkPanel { /* Mobile First */
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;

		border-radius: 15px;
		margin-bottom: 1.25em;
		
		position: relative; /* Necessary for z-index */
		z-index: 10;
	}
	
	.linkContainer {
		display: block;
		position: relative;
		
		padding-bottom: 0.5em;
		width: 100%; /* Mobile */
		
		animation-name: slideUp;
		animation-duration: 600ms;
		animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
		animation-fill-mode: backwards;
		
		transform: translateY(0);
		transform: scale(1);
		transition: transform 200ms ease-out 0s;
	}
	
	.linkButton {		
		position: relative;
		display: flex;
		align-items: center;
		
		box-sizing: border-box;
		padding-left: 1em;
		height: 2.5em; /* Relative to the font size of the current element */
		width: 100%;
		border-radius: 100px; /* Large on purpose */
		
		z-index: 10;
		transform: scale(1);
		
		transition: box-shadow 200ms ease-out 0s,
					transform 100ms ease-out 0s;
	}
	
	.linkContainer:hover {
		transform: translateY(-0.5em);
	}
	
	.linkContainer:hover > .linkButton {
		transform: scale(1.1);
	}
	
	.linkContainer:hover > .linkDesc {
		top: 0.4em;
	}
	
	.linkContainer:nth-of-type(1){ animation-delay: 0ms }
	.linkContainer:nth-of-type(2){ animation-delay: 50ms }
	.linkContainer:nth-of-type(3){ animation-delay: 100ms }
	.linkContainer:nth-of-type(4){ animation-delay: 150ms }
	.linkContainer:nth-of-type(5){ animation-delay: 200ms }
	.linkContainer:nth-of-type(6){ animation-delay: 250ms }
	.linkContainer:nth-of-type(7){ animation-delay: 300ms }
	.linkContainer:nth-of-type(8){ animation-delay: 350ms }
	.linkContainer:nth-of-type(9){ animation-delay: 400ms }
	
	.linkIcon svg {
		height: 1.5em;
	}
	
	.linkName {
		position: absolute;
		font-weight: bold;
		color: #D7D7D7;
		
		width: 100%;
		text-align: center;
		
		transform: translateX(-0.7em); /* Realign towards the center */
	}
	
	.linkDesc {
		position: relative;
		top: -2em; /* Hide at first */
		
		display: inline-block;
		width: 100%;
		text-align: center;
		
		font-size: 0.7em;
		
		transition: top 400ms cubic-bezier(0,.2,0,1) 0s;
		
		-webkit-user-select: none; /* Safari */
		-ms-user-select: none; /* IE 10 and IE 11 */
		user-select: none; /* Standard syntax */
	}
	
	/* ------------------------ */
	/* ----- LINK COLORS ------ */
	/* ------------------------ */

/* Turn the highlight shadows in 0.4% rgba */

	.linkButton.hoodie { background-color: var(--color-hoodie); }
	.linkButton.hoodie:hover { box-shadow: var(--color-hoodie) 0 0 15px; }
	.linkDesc.hoodie { color: var(--color-hoodie); }	

	.linkButton.twitch { background-color: var(--color-twitch); }
	.linkButton.twitch:hover { box-shadow: var(--color-twitch) 0 0 15px; }
	.linkDesc.twitch { color: var(--color-twitch); }	
	
	.linkButton.youtube { background-color: var(--color-youtube); }
	.linkButton.youtube:hover { box-shadow: var(--color-youtube) 0 0 15px; }
	.linkDesc.youtube { color: var(--color-youtube); }
	
	.linkButton.bluesky { background-color: var(--color-bluesky); }
	.linkButton.bluesky:hover { box-shadow: var(--color-bluesky) 0 0 15px; }
	.linkDesc.bluesky { color: var(--color-bluesky); }
	
	.linkButton.twitter { background-color: var(--color-twitter); }
	.linkButton.twitter:hover { box-shadow: var(--color-twitter) 0 0 15px; }
	.linkDesc.twitter { color: var(--color-twitter); }		
	
	.linkButton.instagram { background-color: var(--color-instagram); }
	.linkButton.instagram:hover { box-shadow: var(--color-instagram) 0 0 15px; }
	.linkDesc.instagram { color: var(--color-instagram); }
	
	.linkButton.tiktok { background-color: var(--color-tiktok); }
	.linkButton.tiktok:hover { box-shadow: var(--color-tiktok) 0 0 15px; }
	.linkDesc.tiktok { color: var(--color-tiktok); }		
	
	.linkButton.tumblr { background-color: var(--color-tumblr); }
	.linkButton.tumblr:hover { box-shadow: var(--color-tumblr) 0 0 15px; }
	.linkDesc.tumblr { color: var(--color-tumblr); }
	
	.linkButton.email { background-color: var(--color-email); }
	.linkButton.email:hover { box-shadow: var(--color-email) 0 0 15px; }
	.linkDesc.email { color: var(--color-email); }
	
	.linkButton.refsheet { background-color: var(--color-refsheet); }
	.linkButton.refsheet:hover { box-shadow: var(--color-refsheet) 0 0 15px; }
	.linkDesc.refsheet { color: var(--color-refsheet); }
	
	/* ---------------------------- */
	/* --------  INFOS  ----------- */
	/* ---------------------------- */
	
	#infoContainer {
		width: 100%;
		max-width : var(--mobile-content-width);
		
		display: flex;
		align-items: stretch; /* STRETCH is AWESOME -- It stretches the height when multiple elements are next to eachother */
		justify-content: center;
		flex-wrap: wrap;
	}
	
	#mainPhoto {
		background-position: 25% 50%; /* Desktop only */
	}
	
	
	.infoPanel {
		position: relative;
		width: 100%;
		
		box-sizing: border-box;
		padding-left: 2em; /* Inside */
		padding-right: 2em;
		margin: 10px;  /*Between other panels */
		
		background-repeat: no-repeat;
		background-size: 60%;
		background-position: 90% 90%;
	}
	
	.infoPanel ul {
		margin-bottom: 3em; /* Extra margin below */
	}
	
	.list li {
		margin-top: 1em;
		
		color: #707070;
	}
	
	#infoSharing {
		background-image: url( '../svg/share-bg.svg' );
		box-shadow: #38ADFF 0 -6px,
					rgba(31, 6, 229, 0.4) 0 30px 30px -20px;
	}
		
	#infoCommissions {
		background-image: url( '../svg/lock-bg.svg' );
		box-shadow: #FF5383 0 -6px,
					rgba(31, 6, 229, 0.4) 0 30px 30px -20px;
	}
		
	#infoFanarts {
		background-image: url( '../svg/art-bg.svg' );
		box-shadow: #FF791F 0 -6px,
					rgba(31, 6, 229, 0.4) 0 30px 30px -20px;
	}
	
	h2 {
		font-size: 1.8em;
		font-weight: bold;
		margin-top: 1em;
		margin-bottom: 0.7em;
	}
	
	.subtitle {
		display: block;
		margin-top: 0.25em;
		margin-left: 2em;
		font-size: 14px;
		line-height: 18px;
	}
	
	.smallersub {
		font-size: 12px;
		
	}
	
	.linkContainer.refsheet {
		margin-top: 2em;
	}
	
	/* ---------------------------- */
	/* ---------  FOOTER  --------- */
	/* ---------------------------- */
	
	footer {
		padding-top: 2em;
		padding-bottom: 6em;
	}
	
	footer p {
		color: #DDD;
		font-weight: bold;
		text-align: center;
		
		text-shadow: 0 0.3em 1em rgb(31, 6, 229, 0.4); /* Left, Down, Blur */
	}
	
	/* ---------------------------- */
	/* -------  DECORATIONS  ------- */
	/* ---------------------------- */
	
	.transitionArrowContainer {
		position: relative;
		width: 100%;
		height: 5vh;
		
		display: none; /* Not shown on mobile */
		justify-content: center;
		align-items: center;
	}
	
	.transitionArrow {
		position: relative;
		
		height: 50px;
		width: 50px;
		margin: 0;
		padding: 0;
		
		background-image: url('../svg/arrow.svg');
		background-repeat: no-repeat;
		background-size: 100%;
		background-position: 50% 50%;
		
		animation-name: upDownHalf;
		animation-duration: 1s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-fill-mode: backwards;
	}
	
	.decoration {
		pointer-events: none;
	}
	
	body::before {
		content: "";
		position: fixed;
		
		background-image: url("../img/dot.png");
		background-position: center;
		background-repeat: repeat;
		background-size: 10px;
		
		inset: -30%; /* Extends the box */
		z-index: -1;
		opacity: 0.3;
		transform: rotate(20deg);
	}
	
	.starsContainer {
		position: absolute;
		
		width: 100px;
		height: 100px;
		
		z-index: 1;
	}
	
	.star {
		position: absolute;
		
		animation-name: upDown;
		animation-duration: 1s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-fill-mode: backwards;
	}
	
	.star svg {
		height: 100%;
		width: 100%;
	}
	
	.starBig {
		height: 80px;
	}
	
	.starSmall {
		height: 20px;
		width: 20px;
		animation-delay: 500ms;
	}
	
	.starRight {
		right: 15px;
	}
	
	.above {
		z-index: 100;
	}
	
	/* ---------------------------- */
	/* -------  ANIMATIONS  ------- */
	/* ---------------------------- */
	
	@keyframes slideUp {
		from {
			opacity: 0;
			transform: translateY(50px);
		} to {
			opacity: 1;
			transform: translateY(0px);
		}
	}
	
	@keyframes upDown {
		from {
			transform: translateY(10px);
		} to {
			transform: translateY(-10px);
		}
	}
	
	@keyframes upDownHalf {
		from {
			transform: translateY(5px);
		} to {
			transform: translateY(-5px);
		}
	}