@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,900i|Lexend+Deca:400|Fugaz+One&display=swap");

body {
	/*background-color: #0042e6;*/ /*#000036;*/
	/*background: linear-gradient(to bottom right, #fcb795, #fbf7af);*/
	font-family: "Montserrat", sans-serif;
	/*color: #D6DEEB;*/
	/*
	-ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
	font-smooth: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	*/
}

main {
	max-width: 800px; /* TEST */
	margin: 0 auto;
}

main > h1 {
	/*font-size: 4rem;*/ /* Viewport unit fallback */ 
  /*font-size: 10vmin;*/
	font: 900 italic 8vw "Montserrat", sans-serif;
	color: #ED225D;
	text-transform: uppercase;
	letter-spacing: 0.25rem;
}

/* 
@supports (animation: ease-in) {
	main > h1 {
		animation: colors 10s ease-in 0s infinite alternate;
	}
	
	@keyframes colors {
		0% {
			color: #FFF;
		}
		50% {
			color: #000;
		}
		100% {
			color: #ED225D;
		}
	}
}
*/

.intro p {
	/*margin-left: 10%;*/
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 2.5rem;
	/*letter-spacing: .003rem;*/
}

@media (min-width: 992px){
	/*
	main > h1 {
		font-size: 5em;
	}
	*/
	.intro p {
		font-size: 2rem;
		font-weight: 400;
		line-height: 3rem;
	}
}

.signature {
	font-family: "Fugaz One", sans-serif;
}

main > h2 {
	font: italic 2.5rem "Montserrat", sans-serif;
	color: #ED225D;
}

.responsive-collection {
	/*background: #9DE4C0;*/
	/*background: #F6F3EA;*/ /* hsl(45, 40%, 94.1%);*/
}

@supports(display: grid){
	.responsive-collection ul {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); /* TEST */
		grid-gap: 48px; /* 3rem */
		margin: 16px; /* 1rem */
	}
}

ul {
	list-style: none;
	margin: 0 0 0 2rem;
	padding: 2.2rem;
}

.highlight {
	/*
	display: block;
	position: relative;
	width: 20%;
	*/
	padding: 0.1em 0.5em; /* rem */
	background-color: #7FDBCA; /*#9DE4C0;*/ /*#DCF4EF;*/
	border-radius: 5px;
	transform: rotate(-2deg) translateX(-0.5em); /* rem */
	color: #333333;
	/*font-size: 70%;*/
	/*top: 0;*/
	/*left: 0;*/
}

/*
section.responsive-collection {
		cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🔍</text></svg>") 16 0, auto;
}
*/

.grid-paper {
	 /* TEST */
	background-image: linear-gradient(to right, #FAEBD7 1px, transparent 1px), linear-gradient(to bottom, #FAEBD7 1px, transparent 1px);
	background-size: 10px 10px;
	/*background-color: #F6F3EA; #9DE4C0; */
}

.grid-container {
}

.thumbnail {
	display: block;
	width: 300px; /* TEST: 375px */
	height: 200px; /* TEST: 250px */
	background: linear-gradient(90deg, hsl(316,74%,62%, 1) 0%, hsl(316,74%,62%, 1) 21%,hsl(7.428571428571445,74%,62%, 1) 21%, hsl(7.428571428571445,74%,62%, 1) 28%,hsl(58.857142857142875,74%,62%, 1) 28%, hsl(58.857142857142875,74%,62%, 1) 39%,hsl(110.2857142857143,74%,62%, 1) 39%, hsl(110.2857142857143,74%,62%, 1) 46%,hsl(161.71428571428572,74%,62%, 1) 46%, hsl(161.71428571428572,74%,62%, 1) 90%,hsl(213.14285714285717,74%,62%, 1) 90%, hsl(213.14285714285717,74%,62%, 1) 97%,hsl(264.5714285714286,74%,62%, 1) 97%, hsl(264.5714285714286,74%,62%, 1) 100%);
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🔍</text></svg>") 16 0, auto;
}

.credit {
	font-weight: 500;
}

.blurb {
	font-family: "Lexend Deca", sans-serif;
	color: #333; /* TEST */
	line-height: 1.35rem;
}

ul.tags {
	margin: 0;
	list-style: none;
	/*display: grid;
	place-items: center;
	justify-content: center;
	grid-template-columns: repeat(auto-fit, 275px);*/
	font: 400 0.7rem Montserrat, sans-serif;
	display: inline-grid;
  grid-auto-flow: row;
  grid-gap: 25px;
  /*justify-items: center;*/
  margin: auto;
	/*
	display: flex;
	flex-wrap: wrap;
	margin: -10px;
	*/
}

ul.tags .tag-decoration {
	padding: .4rem .9rem;
	border: dashed #7FDBCA;
	border-radius: 1.7rem;
	color: #333;
	/*line-height: 2.5;*/
}

/*
.submissions button {
	font-family: "Montserrat", sans-serif;
	font-size: 1rem;
	padding: 1rem;
	border-style: dotted;
	border-radius: 5px;
	background: #ED225D;
	color: #FFFFFF;
}
*/

.feature {
	/* 
	display: flex;
	flex-direction: row;
	*/
	/* justify-content: space-between; */
}

.project {
}

.project h2 {
	font: italic 2.5rem "Montserrat", sans-serif; /* 2rem */
}

.project h3 {
	font: 500 1rem "Montserrat", sans-serif;
	/*text-transform: uppercase;*/
}

.project p {
	/* margin: 10%; */
}

.title h3 {
	font: italic 1rem "Montserrat", sans-serif;
}

.title a, a:visited {
	font-size: 1.025rem; /* TEST */
	font-style: italic;
	text-decoration: underline dotted #ED225D;
	color: #ED225D;
}

/*
.title a::after {
	content: "→";
}
*/

.divider {
	clear: both;
	z-index: 100;
	width: 100%;
	background: #1a006d;
	background: -moz-linear-gradient(-45deg, #1a006d 0%, #6b0159 18%, #900e53 34%, #b23350 47%, #cb494e 56%, #f48449 100%);
	background: -webkit-linear-gradient(-45deg, #1a006d 0%, #6b0159 18%, #900e53 34%, #b23350 47%, #cb494e 56%, #f48449 100%);
	background: linear-gradient(135deg, #1a006d 0%, #6b0159 18%, #900e53 34%, #b23350 47%, #cb494e 56%, #f48449 100%);
}

.description {
	position: relative;
	margin: 5%;
}

.description h2 {
	font: italic 2rem "Montserrat", sans-serif;
}

sup.annotation {
	font: italic 1rem "Montserrat", sans-serif;
}

.description h3 {
	/*font: 600 1rem "Montserrat Alternates", sans-serif;*/
	font: 500 1rem "Montserrat", sans-serif;
	/*text-transform: uppercase;*/
}

.description p {
	font: 1rem "Lexend Deca", sans-serif;
	line-height: 1.5rem; /* TEST */
}

/*.description a, a:visited {
	font: 1rem "Montserrat", serif;
}*/

code.code-snippet {
	padding: 0.1em 0.5em; /* rem */
	/* background-color: #DCF4EF; */ /* #D6DEEB */
	background: -webkit-gradient(linear, left top, right top, from(#DCF4EF), to(#7FDBCA));
	background: linear-gradient(90deg, #DCF4EF, #7FDBCA);
	border-radius: 0.5rem;
	transform: rotate(-2deg) translateX(-0.5em); /* rem */
	color: #333;
	font-size: 0.85rem;
	line-height: 1.58rem;
}

.footer-nav {
	display: flex;
	justify-content: space-between;
	margin: 5%;
}

.footer-nav a {
	text-decoration: underline dotted #ED225D;
	color: #ED225D;
}

section.decoration {
	margin: 24px 0; /* TEST */
	text-align: center; /* TEST */
	/*
	display: flex;
	justify-content: space-between;
	margin-top: 50px;
	*/
}

.decoration a, a:visited {
	/*text-decoration: underline dotted #ED225D;*/
	padding: 10px 10px;
	text-decoration: none;
	color: #ED225D;
	font-size: 2rem;
	border: solid #ED225D 2px;
	box-shadow: 4px 4px 0 #ED225D;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.decoration a:focus, a:hover {
	border: solid #ED225D 2px;
	box-shadow: 4px 4px 0 #ED225D;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	-webkit-transition: translate3d(10px,10px,0);
	transform: translate3d(10px,10px,0);
}

p.animation {
	font-size: 2rem;
}

/*
section.decoration a:hover ~ p.animation {
  animation: wave-animation 0.3s infinite;
}

@keyframes wave-animation {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(20deg);
  }
  75% {
    transform: rotate(-15deg);
  }
}
*/

/* 
 #circle { width: 100px; height: 100px; background: red; border-radius: 50% }

 #oval { width: 200px; height: 100px; background: red; border-radius: 100px / 50px; } 
*/