@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

/* ROOT VARIABLES */
:root {
    --bg-color: #f6f7de;

    --text-color: #191919;
	--pink-color: #d77bba;
	--purp-color: #b883ca;
	--cyan-color: #5fcde4;

	--red-color: #b44837;
	--blue-color: #5b6ee1;
	--green-color: #8bdf92;
}

html {
	background-color: var(--bg-color);
	display: block;
	margin: auto;
	font-family: 'Lexend', sans-serif;
}

/******************/
/* HEADER SECTION */
/******************/
#header {
	display: block;
    margin-left: -32px;
}

#header > img { 
	width: auto;
	height: 200px;
}

#name {
	width: 96px;

	position: sticky;

	top: 20px;
	left: 0;
}

/****************/
/* MAIN CONTENT */
/****************/
body {
	overflow-x: hidden !important;
	display: block;
	width: 98%;
	
	margin: 0px auto;
	padding: 1em .5em;

	background-color: var(--bg-color);
}

a {
	text-decoration: none;
	font-weight: bold;
}

embed {
	width: 100%;
	height: max-content;
}

.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	list-style-position: inside;
}

img.invert { filter: invert(1) !important; }

#content {
	display: block;
	width: 96%;
	height: auto;
	
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
}

div {
	margin: 6px;
}

p {
	color: var(--text-color);
	font-size: 18px;
	
	text-align: center;
}

p a { color: var(--pink-color); }
h3 a { color: var(--pink-color); }

/*******************/
/* GALLERY SECTION */
/*******************/
div.gallery > img,
div.gallery > a > img {
	display: inline-flexbox;
	margin: 4px;
	padding: 2px;

	height: 120px;
	width: auto;

	border: dashed;
	border-color: var(--text-color);
	image-rendering: pixelated;
}

@keyframes credAnim {
  0%   {background-color:var(--purp-color); transform:scale(1.2);}
  5%   {background-color:var(--purp-color); transform:rotate(10deg); transform:scale(0.9);}
  20%  {background-color:var(--blue-color); transform:rotate(-5deg);}
  45%  {background-color:var(--green-color); transform:scale(1.2);}
  60%  {background-color:var(--cyan-color); transform:rotate(5deg);}
  80%  {background-color:var(--cyan-color); transform:scale(1.2);}
  100% {background-color:var(--pink-color); transform:scale(2.0);}
}

div.gallery > img:hover,
div.gallery > a > img:hover{
	animation-name: credAnim;
	animation-duration: 2.5s;

	/* END STATE */
	transform:scale(2.0);
	padding: 0;
	margin: 6px;
}

/******************/
/* FOOTER SECTION */
/******************/
#footer {
	display: block;
	margin: auto;

	width: 100%;
	padding-top: 12px;
	padding-bottom: 32px;
	height: 36px;

	background-color: var(--bg-color);
	border-top: 3px dashed var(--text-color);
}

#footer p {
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	color: var(--text-color);

	margin-top: 6px;
	margin-bottom: 0px;
	padding: 0px;
}

#footer > h3 { 
	margin-top: 6px;
	padding-bottom: 1em;
}

#footer img {
	padding: .5em;
	filter: brightness(1);
}

#footer > a > img {
	height: 60px;
	width: auto;
}

#footer img:hover { transform: scale(120%); }

/* END OF STYLES */