@font-face {
	font-family: 'PPSimpleSans-20';
	src: url('./../fonts/front/ppsimplesans-20.woff2') format('woff2'),
		 url('./../fonts/front/ppsimplesans-20.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'PPSimpleSans-60';
	src: url('./../fonts/front/ppsimplesans-60.woff2') format('woff2'),
		 url('./../fonts/front/ppsimplesans-60.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'CirrusCumulus';
	src: url('./../fonts/front/CirrusCumulus.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

:root{
	font-family: 'PPSimpleSans-20';
	font-size: 14px;
	color: black;
	padding: 0;
	margin: 0;
}

body{
	padding: 0;
	margin: 0;
	max-width: 100vw;
	min-height: 100vh;
	/* overflow-y: hidden; */
	background: rgb(205,200,204);
	background: linear-gradient(0deg, #F0F0F0 18%, rgba(238,238,238,1) 100%);
}

.dark{
	background: gray;
}

#full-height{
	position: relative;
	height: 100vh; 
	overflow: hidden;
}

.jiggle:hover {
	transform: rotate(.5deg) translateX(5px) !important;
	-webkit-transform: rotate(.5deg) translateX(5px) !important; /* Safari & Chrome */
	-moz-transform: rotate(.5deg) translateX(5px) !important; /* Firefox */
	-ms-transform: rotate(.5deg) translateX(5px) !important; /* Internet Explorer */
	-o-transform: rotate(.5deg) translateX(5px) !important; /* Opera */
}

a {
	color: inherit;
	text-shadow: none;
	transition: text-shadow 200ms;
	text-decoration-style: wavy; 
	/* text-decoration-color: #f06d06; */
	text-decoration-color: lightgray;
}

a:hover{
	text-shadow: 2px 2px 10px #bac0be;
}

.back__link{
	position: absolute; 
	right: 25px
}

.bottom__links{
	display: flex;
	justify-content: center;
	position: fixed; 
	z-index: 10000; 
	bottom: 15px; 
	color: inherit; 
	width: 100%;
	align-items: center;
	flex-flow: row wrap;
}

.button__link{
	font-size: 1.1rem; 
	margin: 0 7px;
	/* padding: 7px 17px; */
	padding: 10px 25px;
	/* background: darksalmon; */
	background: rgb(221, 238, 217);
	font-family: 'PPSimpleSans-20';
	border-radius: 7px;
	box-shadow: 4px 4px 5px rgb(196, 194, 194);
	transition: background 200ms;
}

.button__link a, .bottom__links > a{
	text-decoration: none;
}

.button__link:not(.previous):hover{
	/* background: orange; */
	background: rgb(198, 230, 191);
	cursor: pointer;
	/* box-shadow: 4px 4px 5px gray; */
}

.button__link > a:hover{
	text-shadow: none;
}

.buy__link{
	top: 85%;
	position: absolute;
	transform: translate(-50%);
	left: 50%;
	background: lightgreen;
	font-family: 'CirrusCumulus';
	font-size: 1.2rem;
	border-radius: 10px;
	padding: 6px 15px;
	border: 0;
	min-width: 50px;
	cursor: pointer;
	box-shadow: 4px 4px 5px rgb(196, 194, 194);
	transition: background 200ms;
}

.buy__link:hover{
	background: rgb(90, 231, 90);
}

/* Homepage */

.header{
	position: fixed; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%);
	z-index: 10;
	width: 100%;
}

.header__inner{
	font-family: 'CirrusCumulus';
	font-size: 9vw;
	transform: scale(1, 1.3) skew(3); 
	width: 100%;
	text-align:center; 
	line-height: 10rem;
}

.header__home{
	cursor: ne-resize;
}

.home__links{
	position: fixed;
	display: inline-block;
	z-index: 2;
	padding: 20px;
}

.home__links--title {
	color: inherit;
	padding: 6px 30px;
	background:  rgb(248, 248, 248);
	font-family: 'PPSimpleSans-20';
	cursor: pointer;
	border-radius: 7px;
	box-shadow: 4px 4px 5px rgb(219, 219, 219);
	transition: background 200ms;
	font-size: 1.1rem;
	letter-spacing: 2px;
	text-decoration: none;
}

.home__links--title:hover{
	background:  rgb(255, 255, 255);
}

.home__links--christina{
	margin: 0px 7px
}

.popover__content {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	max-width: 300px;
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content;
	word-break: break-word;
}

.home__links:hover .popover__content {
	background: lightgray;
	opacity: 1;
	visibility: visible;
	transition: all 200ms cubic-bezier(0.75, -0.02, 0.2, 0.97);
}

.home__links > .popover__content::after{
	content: "";
	position: absolute;
	margin-left: -7px;
	border-width: 7px;
	border-style: solid;
	transition: transform 200ms;
}

.popover__message {
  text-align: left;
  font-size: 1.2rem;
  padding: 0;
  margin: 0;
}

.home__links:nth-child(1){
	top:0;
	left:0;
}

.home__links:nth-child(1) > .popover__content{
	top: 80%;
	left: 15%;
}

.home__links:nth-child(1) > .popover__content::after{
	bottom: 100%;  /* At the top of the tooltip */
	left: 25%;
	border-color: transparent transparent lightgray transparent;
}

/* Note Modules */

.note {
	position: absolute;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 4px rgba(0,0,0,.25);
	cursor: move;
	text-align: left;
	font-size: 14px;
	line-height: 150%;
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content;
	word-break: break-word;
	opacity: 1;
	transition: opacity 200ms, transform 1200ms ease;
	z-index: 20;
}

.close-note{
	position: absolute; 
	top: 15px; 
	right: 15px; 
	cursor: pointer; 
	font-size: 1.3rem;
}

.home__module{
	background: rgba(238,238,238,1);
	width: calc(300px + 7vw);
	font-size: 1.1rem;
	line-height: 1.4rem;
}

.home__content{
	max-height: 200px; 
	overflow-y: scroll;
	padding: 15px;
}

.home__content > p{
	margin: 5px 0;
}

#about{
	z-index: 100!important;
	padding: 15px;
	width: 45vw; 
	max-height: 400px; 
	overflow: scroll; 
	background: white; 
	color: blue;
	font-size: 1.1rem;
}

.about__apass{
	padding: 15px;
	width: 38vw; 
	max-height: 350px; 
	overflow: scroll; 
	background: white; 
	color: blue;
	font-size: 1.15rem;
}

.about__module{
	padding: 15px;
	width: 350px;
	opacity: .3;
}

/* Project Modules */
.project__module{
	/* width: 30vw; */
	width: 38vw;
	/* background: rgba(238,238,260,1); */
	/* background: rgb(255, 255, 255); */
	background: #F0F0F0;
	opacity: 1; 
	overflow-y: scroll;
	padding: 0;
}

.project__module--height{
	max-height: 450px;
	overflow-y: scroll;
}

.project__module--mediascroll{
	display: flex; 
	max-width: 100%; 
	overflow-x: scroll; 
	align-items: center
}

.project__module--mediascroll > img{
	object-fit: contain; 
	max-height: 300px; 
	max-width: 98%
}

.module__content > h2{
	line-height: 1.2em;
}

.play, .pause{
	color: inherit;
	padding: 5px 30px;
	margin-right: 10px;
	background:  rgb(248, 248, 248);
	font-family: 'PPSimpleSans-20';
	cursor: pointer;
	border-radius: 7px;
	box-shadow: 4px 4px 5px rgb(219, 219, 219);
	transition: background 200ms;
	font-size: 1.1rem;
	letter-spacing: 2px;
}

.play:hover, .pause:hover{
	background:  rgb(255, 255, 255);
}


.module__content{
	/* max-height: 20vw; 
	overflow: scroll;  */
	padding: 0 15px; 
	font-size: 1.1rem
}

.module__content > h1{
	font-size: 1.2em;
}
.module__content > p > strong{
	color: blue;
}

.module__title{
	font-family: 'CirrusCumulus'; 
	font-size: 1.6rem;
	line-height: 1.6rem;
	padding: 12px;
}

/* Muslin Shop */

.muslin__shop{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 5%;
}

.muslin__header{
	font-size: 5rem;
}

.muslin__shop--grid{
	display: flex; 
	flex-flow: row wrap; 
	width: 90%; 
	justify-content: space-between;
}

.muslin__item{
	display: flex; 
	flex-flow: column nowrap; 
	flex: 0 0 22%; 
	margin: 0 15px;
}

.muslin__product{
	display: flex; 
	flex-flow: column nowrap; 
	max-width: 50%
}

.muslin__item:hover .muslin__title::after{
	content: '\27F6';
}

.muslin__title:hover{
	text-shadow: 1px 1px 7px white;
}


.muslin__item--image{
	display: flex; 
	flex-flow: column nowrap; 
	height: 550px; 
	justify-content: flex-end;
}

.muslin__item--image > a > img{
	object-fit: contain; 
	max-width: 100%; 
	max-height: 550px;
}

.muslin__title{
	font-family: 'PPSimpleSans-60'; 
	font-size: 1.2rem; 
	line-height: 1.5rem;
	padding: 15px;
	transform: skew(-10deg); 
	margin-bottom: 50px;
	color: blue;
	font-family: 'PPSimpleSans-60';
}

.muslin__cart--block{
	max-width: 40vw;
}

.chloe__project{
	margin: 2% 12%; 
	font-size: 25px; 
	padding-top:80vh
}

.chloe__colophon{
	position: fixed; 
	z-index: 15; 
	overflow-y: scroll; 
	top: 15px; 
	right: 15px; 
	width: calc((100% - 30px) / 3); 
	height: 50px; 
	background: lightgray; 
	font-family: CirrusCumulus; 
	font-size: 2rem; 
	padding: 5px 15px; 
	transition: height 240ms;
}

@media screen and (max-width: 1200px){
	.project__module{
		width: 85vw;
	}

	.home{
		display: flex;
		flex-direction: column-reverse;
		justify-content: center;
	}

	.home__module{
		padding: 15px;
	}

	.home__links--christina{
		margin: 10px 5px
	}

	.header--christina{
		display: none;
	}

	.header{
		top: 15%;
		z-index: initial;
		position: initial;
		z-index: 0;
		transform: none;
		width: 100%;
	}

	.header__inner{
		font-size: 9vw;
		line-height: 4rem;
	}

	.note{
		position: initial;
		transform: none;
		margin: 10px auto;
	}

	.about__apass{
		width: calc(300px + 10vw);
		visibility: visible!important;
		opacity: 1!important;
	}

	.about__button{
		display: none!important;
	}

	#full-height{
		position: relative;
		height: initial; 
		overflow: scroll;
	}

	.dark{
		background: initial;
	}

	.close-note{
		display: none;
	}

	#about{
		/* opacity: 1!important; */
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: calc(300px + 5vw);
	}

	.bottom__links{
		position: fixed;
	}

	.button__link{
		font-size: 1.2rem;
		margin: 10px 5px
	}

	.button--scatter{
		display: none; 
	}

	.back__link{
		position: initial;
		right: unset;
	}

	.project__module{
		width: calc(300px + 10vw)!important;
	}

	.muslin__item{
		flex: 0 0 100%;
		margin: 0 0;
	}

	.muslin__product{
		max-width: 100%;
		margin-bottom: 40px;
	}

	.muslin__cart--block{
		max-width: 100%;
		margin-bottom: 50px;
	}

	.muslin__header{
		font-size: 9vw;
	}
	
	.muslin__shop{
		margin-bottom: 150px;
	}

	.muslin__title{
		text-align: left;
		margin-bottom: 20px;
	}

	.muslin__item--image{
		min-height: 250px;
		height: unset;
	}

	.chloe__header{
		margin-top: 20px;
		margin-bottom: 15px;
	}

	.chloe__colophon{
		position: relative;
		width: 90%;
		margin: auto;
		right: 0;
	}

	.chloe__project{
		padding-top: 0;
		height: 60vh;
		overflow: hidden;
		margin: 0% 5%;
	}


}

/* Project Title Fade */
#title{
	transition: opacity 250ms linear;
}