/* ~~~CSS Stylesheet for Olivia Cruz's Website~~~ */
/*
---------------------
--- PAGE SETTINGS ---
---------------------
*/
	html {
		font-size: 62.5%;
	}
	
	:root {
		/* COLORS */
			/* Color Names */
			--color-yellow-piss: #F7E44B;
			--color-yellow-spit: #ffffcc;
			--color-green-snot: #88F7A4;
			--color-green-frankenstein: #A9f76A;
			--color-blue-sweat: #A5EBFB;
			--color-blue-tear: #40D2FF;
			--color-blue-vein: #1E78C2;
			--color-blue-bruise: #444E63;
			--color-pink-brain: #D71493;
			--color-pink-organ: #930687;
			--color-pink-olivia: #ff8aff;
			--color-pink-olivia-alt: #fabaff;
			--color-white: #f9f9f9;
			--color-white-cum: #fdfcf1;
			--color-grey-wool: #D9D9D4;
			--color-grey-cement: #BDBDB7;
			--color-grey-smoke: #C0C0B9;
			--color-grey-gunmetal: #56564E;
			--color-black-void: #070322;
			
			/* Element Colors */
			/* Element Colors */
			--color-background: var(--color-white-cum);
			--color-background-alt: var(--color-blue-bruise);
			--color-background-white: var(--color-white);
			--color-background-black: var(--color-black-void);
			--color-background-focus1: var(--color-pink-olivia-alt);
			--color-background-focus2: var(--color-blue-sweat);
			--color-text: var(--color-black-void);
			--color-text-alt: var(--color-white-cum);
			--color-text-accent: var(--color-grey-gunmetal);
			--color-text-accent-alt: var(--color-grey-smoke);
			--color-accent: var(--color-yellow-piss);
			--color-accent-alt: var(--color-yellow-spit);
			--color-highlight: var(--color-blue-tear);
			--color-highlight-alt: var(--color-blue-sweat);


			--color-a: var(--color-blue-vein);
			--color-a-alt: var(--color-blue-tear);
			--color-nav: var(--color-accent);
			--color-nav-alt: var(--color-accent-alt);
			--color-tag: var(--color-highlight);
			--color-tag-alt: var(--color-highlight-alt);
		
		/*typography*/
		--font-size-h1: 4rem;
		--font-size-h2: 2.8rem;
		--font-size-h3: 2.6rem;
		--font-size-h4: 2.3rem;
		--font-size-h5: 2rem;
		--font-size-body: 1.6rem;

		--font-family-body: 'trebuchet MS', sans-serif;
		--font-family-accent: 'Courier New', monospace;
		
		/* SPACING */
			/* REM */
			--spacing-min-rem: 0.1rem;
			--spacing-tiny-rem: 0.4rem;
			--spacing-sml-rem: 1rem;
			--spacing-mid-rem: 1.6rem;
			--spacing-lrg-rem: 3rem;
			--spacing-xl-rem: 6rem;
			
			/* PX */
			--spacing-min-px: 8px;
			--spacing-sml-px: 10px;
			--spacing-mid-px: 16px;
			--spacing-lrg-px: 30px;
		
		/*element size */
		--element-min: 2.8rem;
		--element-sml: 6.4rem;
		--element-mid: 240px;
		--element-lrg: 420px;
		--element-xl: 620px;
		--element-xxl: 840px;
		--element-post: 1400px;
		--element-comic: 720px;
		--element-panel-max: 420px;
		--element-panel-min: 350px;


		/*Border Radius*/
		--border-radius-min: 0.3rem;
		--border-radius-sml: 0.8rem;
		--border-radius-mid: 1.4rem;


		/*Screen Sizes*/
		--screen-mobile: 600px;
		--screen-tablet: 1024px;

		/*Responsive*/
		@media only screen and (max-width: 1024px) {
			--spacing-mid-rem: 1.4rem;
			--spacing-lrg-rem: 1.8rem;
			--spacing-xl-rem: 2rem;
		}

		@media only screen and (max-width:600px) {
			--font-size-h1: 3rem;
			--font-size-h2: 2.4rem;
			--font-size-h3: 2.2 rem;
			--font-size-h4: 1.8 rem;
			--font-size-body: 1.4rem;

			--element-min: 2rem;
			--element-sml: 5rem;
		}
	}
	/*TEXT END*/


	/*DEBUG*/
	.debug-hitbox {
		border-style: solid;
		border-width: 1px;
		border-color: rgb(250, 0, 0);
		background: rgba(0, 250, 0, 0.17);
	}

	
/*
------------
--- TEXT ---
------------
*/
	* {
		margin: 0;
		padding: 0;
	}

	/*Base Text*/
	body {
		background-color: var(--color-background);
		color: var(--color-text);
		font-size: var(--font-size-body);
		font-family: var(--font-family-body);
	}
	
	p {
		padding: var(--spacing-tiny-rem) 0 var(--spacing-tiny-rem) 0;
		font-size: var(--font-size-body);
	}

	a {
		text-decoration: none;
		font-variant: small-caps;
		color: var(--color-a);
		transition: all .1s ease-in-out;
	}
	a:hover {
		color: var(--color-a-alt);
	}

	.text-large {
		font-family: var(--font-family-body);
		font-size: var(--font-size-h2);
		font-variant: small-caps;
	}

	.text-accent {
		font-family: var(--font-family-accent);
		color: var(--color-text-accent);
	}
	
	.text-info {
		font-family: var(--font-family-accent);
	}
	
	/*HEADINGS*/
	h1 {
		font-size: var(--font-size-h1);
		padding: var(--spacing-sml-rem) 0 var(--spacing-mid-rem) 0;
		text-align: center;
		font-variant: small-caps;
	}
	h2 {
		font-size: var(--font-size-h2);
		padding: var(--spacing-tiny-rem) 0 var(--spacing-sml-rem) 0;
		font-variant: small-caps;
	}
	
	h3 {
		font-size: var(--font-size-h3);
		padding: var(--spacing-tiny-rem) 0 var(--spacing-sml-rem) 0;
		font-variant: small-caps;
	}
	
	h4 {
		font-size: var(--font-size-h4);
		padding: var(--spacing-tiny-rem) 0 var(--spacing-sml-rem) 0;
		font-variant: small-caps;
	}

	h5 {
		font-size: var(--font-size-h5);
		padding: var(--spacing-tiny-rem) 0 var(--spacing-sml-rem) 0;
		font-variant: small-caps;
	}

	.iconitem {
		display: flex;
		column-gap: var(--spacing-tiny-rem);
		align-items: center;
	}
/*TEXT END*/


/*
-------------
--- LINKS ---
-------------
*/
	/*NAV*/
	.nav {
		color: var(--color-nav);
	}

	.nav:hover {
		color: var(--color-nav-alt);
	}

	/*LINK BUTTONS*/
	.button {
		display: flex;
		align-items: center;
		justify-content: center;
		height: var(--element-min);
		width: fit-content;
		min-width: var(--element-sml);
		padding: var(--spacing-tiny-rem);
		background: var(--color-nav);
		border-radius: var(--border-radius-mid);
		transition: all .1s ease-in-out;
		text-align: center;
		font-weight: bold;
		color: var(--color-text);
		gap: var(--spacing-tiny-rem);
	}
	.button:hover {
		transform: scale(1.05);
		background: var(--color-nav-alt);
		color: var(--color-text-accent);
	}

	.button.tag {
		background: var(--color-tag);
		padding: var(--spacing-min-rem);
		border-radius: var(--border-radius-min);
		color: var(--color-text);
	}
	.button.tag:hover {
		background: var(--color-tag-alt);
	}

		/*LINKPANEL*/
		.linkpanel {
			display: grid;
			grid-template-areas:
				"header"
				"menu"
				"footer";
			text-align: center;
			margin: auto;
			background: var(--color-highlight);
			padding: var(--spacing-tiny-rem) var(--spacing-sml-rem);
			min-height: var(--element-lrg);
			min-width: var(--element-panel-min);
			max-width: var(--element-panel-max);
		}
		
		.linkpanel > h2{
			display: flex;
			justify-content: center;
			align-items: center;
			grid-area: header;
			padding: var(--spacing-mid-rem);
		}
		
		.linkpanel > div.menu {
			grid-area: menu;
			display: grid;
			row-gap: var(--spacing-mid-rem);
		}

		.linkpanel > div.menu > h3 {
			justify-content: center;
			align-items:center;
		}
		
		.linkpanel > div.menu > a {
			display: grid;
			margin: auto;
			grid-template-columns: 43px auto;
			text-align: left;
			background: var(--color-yellow-piss);
			width: 75%;
			max-width: var(--element-lrg);
			border-radius: 1.1rem;
			transition: all .1s ease-in-out;
			text-decoration: inherit;
			color: inherit;
		}
		
		.linkpanel > div.menu > a:hover {
			transform: scale(1.05);
			background: var(--color-yellow-spit);
		}
		
		.linkpanel > div.menu > a > img {
			justify-self: center;
			align-self: center;
			padding: var(--spacing-min-px);
			height: 25px;
			width: 25px;
		}
		
		.linkpanel > div.menu >  a > p {
			align-items: center;
			align-content: center;
			padding: var(--spacing-min-px) var(--spacing-min-px);
			text-transform: uppercase;
			font-weight: bold;
		}
		.linkpanel > div.footer {
			height: 50;
			padding: var(--spacing-mid-rem);
		}
/*LINK END*/

/*
--------------
--- HEADER ---
--------------
*/
#header {
	display: flex;
	justify-content: center;
	background: var(--color-background-alt);
}

/*TOP MENU */
#topmenu {
	display: grid;
	grid-template-areas:
	"logo menu";
	align-items: center;
	padding: var(--spacing-tiny-rem) var(--spacing-mid-rem);
	width:1400px;
}

#topmenu > div.logo {
	grid-area: logo;
}

#topmenu > .logo > a {
	display: flex;
	color: var(--color-pink-olivia-alt);
}

#topmenu > .logo > a > img {
  object-fit: contain;
  display: block;
}

#topmenu > div.menu {
	grid-area: menu;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-tiny-rem);
	justify-self: end;
	justify-content: end;
}

#topmenu > .menu > a {
	display: flex;
	align-items: center;
}
/*HEADER END*/



/*
------------------
--- CONTAINERS ---
------------------
*/
	/*CANVAS
	The base container for content on most pages.*/
	.canvas {
		display:flex;
		justify-content: center;
	}
	/*
	[RESPONSIVE CONTAINER SCREEN SIZE]
	(NOTE to self: think of a better system than this)
	*/
	.canvas > div{
			max-width:1400px;
	}

	/*ITEMS*/
	.item {
		padding: var(--spacing-tiny-rem) var(--spacing-sml-rem);
	}
	
	/*FLEXBOXES*/
	.flexbox{	
		display: flex;
		flex-wrap: wrap;
		align-content: stretch;
		justify-content: center;
		margin: auto;
	}
	
		/*ITEMS*/
		.flexbox > div.item {
			flex: 1;
		}
		.flexbox > div.x2 {
			flex-grow: 2;
		}
		.flexbox > div.x3 {
			flex-grow: 3;
		}
		
		.flexbox > div.x4 {
			flex-grow: 4;
		}
	
	/*GRIDS*/
	.gridbox{
		display:grid;
	}

	/*CONTAINER SIZES*/
	.halfsize{width:50%}

	/*CONTAINER COLORS*/
	.bg-alt{background-color:var(--color-baccground-alt);}
	.bg-focus1{background-color:var(--color-background-focus1);}
	.bg-focus2{background-color:var(--color-background-focus2);}

	/*DISCLAIMER BORDER*/
	.disclaimer-border {
		border-style: solid;
		border-width: 0px 0px 0px 1rem;
		border-color: var(--color-highlight);
	}

	/*DISCLAIMER BORDER*/
	.disclaimer-box {
		background-color: var(--color-grey-gunmetal);
		padding: var(--spacing-tiny-rem) var(--spacing-sml-rem) var(--spacing-tiny-rem) var(--spacing-tiny-rem);
	}

/*CONTAINER END*/


/*
-------------
--- POST ---
-------------
*/

/* .post { */
	/* display: grid; */
	/* grid-template-areas: */
    /* "title" */
	/* "nav-top" */
    /* "content" */
	/* "nav-btm"; */
	/* max-width: var(--element-post); */
	/* background-color: var(--color-white-cum); */
	/* border: 2px solid var(--color-yellow-spit); */
	/* border-radius: 6px; */
	/* padding: var(--spacing-tiny-rem); */
/* } */

/* .post > div.title { */
	/* grid-area: title; */
	/* text-align: center; */
/* } */

/* .post > div.content { */
	/* grid-area: content; */
	/* max-width: var(--element-comic); */
/* } */

/* .post > div.content > img { */
	/* display: block; */
	/* width: 95%; */
	/* margin: auto; */
	/* border: 1px solid var(--color-blue-bruise); */
	/* border-radius: 4px; */
/* } */

/* .post > div.nav { */
	/* display: flex; */
	/* justify-content: center; */
/* } */

/* .post > div.nav > a { */
	/* padding: var(--spacing-tiny-rem); */
/* } */

/*
-------------
--- MEDIA ---
-------------
*/
	/*IMAGES*/
	.img-icon {
	  max-width: 160px;
	  max-height: 160px;
	  width: auto;
	  height: auto;
	}
	
	.img-small {
	  max-width: var(--element-mid);
	  max-height: var(--element-sml);
	  width: auto;
	  height: auto;
	}
	.img-medium {
	  max-width: var(--element-lrg);
	  max-height: var(--element-mid);
	  width: auto;
	  height: auto;
	}
	
	.img-center {
		display: block;
		margin: auto;
	}
/*MEDIA END*/

/*
-----------------
--- ACCORDION ---
-----------------
*/

 /* Style the buttons that are used to open and close the accordion panel */
.accordion {
	display: grid;
	color: inherit;
	cursor: pointer;
	text-align: left;
	border: none;
	outline: none;
	grid-template-columns: 25px auto;
	background: var(--color-grey-wool);
	border-radius: 1.1rem;
	transition: all .1s ease-in-out;
}

.accordion > img {
	justify-self: center;
	align-self: center;
	height: 20px;
	width: 20px;
	rotate: 90deg;
	transition: all .1s;
}

.accordion > p {
	align-items: center;
	align-content: center;
	padding: var(--spacing-min-px) var(--spacing-min-px);
	font-size: var(--font-size-info)
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: var(--color-grey-cement);
}

.active > img {
	rotate: 180deg;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: var(--spacing-tiny-rem);
  background-color: white;
  display: none;
  overflow: hidden;
} 
/*ACCORDION END*/

/*
--------------
--- SHAPES ---
--------------
*/
	.shape-square {
		display: inline-block;
		width:40px;
		height: 40px;
	}
/*SHAPES END*/

/*
------------------
--- ANIMATIONS ---
------------------
*/
	@keyframes falling {
		0% {rotate: 5deg; top: 0px;}
		15% {rotate: -8deg; bottom: 25px;}
		45% {rotate: 3deg; top: 14px;}
		74% {rotate: -5deg; bottom: 15px;}
		100% {rotate: 5deg; top:0px;}
	}
	
	.falling {
		position:relative;
		animation-name: falling;
		animation-duration: 5s;
		animation-iteration-count: infinite;
		animation-direction: alternate
	}
/*ANIMATIONS END*/