@charset "UTF-8";
/* CSS Document */

body {
	overflow:hidden;
}

.demo {
  	display: flex;
  	justify-content: center;
  	height: 100vh;
	width:100vw;
}
.perspective-container {
	perspective:1200px;
}
#wall {
	width:200vw;
	height:200vh;
	margin-top:-50vh;
	background-image:url("../images/am_bricks.png");
	background-repeat:round;
	position:relative;
	overflow: hidden; /* Try removing this to see how the sheen works! */
	--sheenX: 0; /* Set these with JavaScript */
  	--sheenY: 0;
}
.wall::after {
	content: "";
	background-color:pink;
  	position: absolute;
  	top: -600px;
  	right: -600px;
  	bottom: -600px;
  	left: -600px;
	background: linear-gradient(217deg, rgba(255,255,255,0), rgba(255,255,255,0) 35%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
  	transform: translateX(var(--sheenX)) translateY(var(--sheenY));
}

#content {
	width:100vw;
	height:100vw;
	margin:auto;
	margin-top:50vh;
}

h1 {
	text-align:center;
	width:100vw;
	position:fixed;
	z-index:0;
	font-size:12vw;
	margin-top:20vw;
	font-family: attic-antique, serif;
	font-weight: 400;
	font-style: normal;
}

#hangers {
	width:101vw;
	margin-left:-0.5vw;
	position:relative;
	z-index:100;
}
.hanger {
	background-color:goldenrod;
	width:20vw;
	height:1vw;
	float:left;
	margin-left:4vw;
	margin-top:3vw;
	transition-duration:3s;
	box-shadow:0vw 0.25vw 1vw 0vw black, inset 0vw -0.25vw 0.5vw 0vw black;
}
.rightend, .leftend {
	background-color:goldenrod;
	width:2vw;
	height:2vw;
	border-radius:100%;
	box-shadow:0vw 0.25vw 1vw 0vw black, inset 0vw -0.25vw 0.75vw 0vw black;
}
.leftend {
	margin-top:-0.5vw;
	margin-left:-1.5vw;
}
.rightend {
	margin-top:-2vw;
	margin-left:19.5vw;
}

.fabric {
	margin-top:-1vw;
	margin-left:4.5vw;
	margin-right:1.5vw;
	float:left;
	width:18vw;
	height:42vw;
	background-size:cover;
	background-position:bottom;
	transition-duration:3s;
	position:relative;
	z-index:101;
	box-shadow:0vw 0.5vw 1vw 0vw black, inset 0vw -0.5vw 1.5vw -0.75vw black;
	cursor:pointer;
}

#fabric1 {
	background-image:url("../images/am_fabric1.png");
}
#fabric2 {
	background-image:url("../images/am_fabric2.png");
}
#fabric3 {
	background-image:url("../images/am_fabric3.png");
}
#fabric4 {
	background-image:url("../images/am_fabric4.png");
}