body {

	font-family: "Irish Grover", system-ui;
	font-weight: 400;
	font-style: normal;
	text-align: left;
	margin: 0;

}

/*hr {
	margin-top: 150px;
	margin-bottom: 25px;
	height:5px;
	background-color:black;
}*/

img,
video {
	width: 100%;
	max-width: 2400px;
	/*min-width:800px;*/
	margin: 0;
	/*margin-top:20px;
	margin-bottom:20px;*/
}

h1,
h2 {
	font-family: "Lavishly Yours", cursive;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	text-wrap: balance
}

h1 {
	font-size: 160px;
	/* margin-top: 10px; */
	border-style: double;
	margin: auto;
	max-width: 700px;
	margin-bottom: 100px;

}

h2 {
	font-size: 50px;
	margin-top: 10px;
	margin-bottom: 60px;
	text-wrap: balance
}

h3 {
	font-size: 24px;
	/* margin-top: 80px; */
	margin: 0 0 0 40px;
}

.overlay-text h3 {
	margin: 0 0 0 40px;
}

h4 {
	font-family: "Irish Grover", serif;
	font-weight: 400;
	font-style: normal;

}

.overlay-text h4 {
	margin: 0 0 0 40px;
}

p {
	font-size: 24px;

	padding-left: 30px;
	padding-right: 30px;
	/* padding-bottom: 50px; */
	max-width: 700px;
	text-wrap: pretty;
	/* text-wrap: balance */
}



/* Unvisited link */
a:link {
	color: #a71d3d;
}

/* Visited link */
a:visited {
	color: #7e69a0;
}

/* Mouse over link */
a:hover {
	color: #fcd78d;
}

/* Selected/Clicked link */
a:active {
	color: #ec9a29;
}

.border-text {
	margin: auto;
	max-width: 700px;
	text-wrap: pretty;
	border-style: double;

}

#section0 {
	/*margin:150px 0;*/
	background-color: pink;
	padding-bottom: 50px;
	padding-top: 50px;
	margin-top: 0;

}

.border {
	margin-top: 50px;
}

/*Position map container*/
#map-container {
	margin: 0 auto;
	position: relative;
}

#map-base img {
	width: 100%;
}

/*Applying the same styles to all link images on the map*/
#map-links img {
	position: absolute;
	width: 10%;
	cursor: pointer;

}

#map-links img:hover {
	/* filter: grayscale(100%);
	 */
	filter: drop-shadow(8px 8px 10px gray);
}

/*Position link 1*/
#map-links #dancer {
	top: 35%;
	left: 70%;
	width: 30%;
}

/*Position link 2*/
#map-links #discoball {
	top: 18%;
	left: 70%;
}

/*Position link 3*/
#map-links #couch {
	top: 28%;
	left: 64%;
	width: 20%
}

/* position link 4 */
#map-links #shaker {
	top: 20%;
	left: 85%;
}

/* position link 5 */
#map-links #mirror {
	top: 24%;
	left: 10%;
}

/* position link 6 */
#map-links #bust {
	top: 19%;
	left: 80%;
}

/* position link 7 */
#map-links #stool {
	top: 44%;
	left: 42%;
	width: 15%;
}

/* position link 8 */
#map-links #light {
	top: 19%;
	left: 44.5%;

}

#section1 {
	background-color: #FFFFFF;
}

#section1 img {
	width: 60%
}

.inline-container {
	padding: 0 30px;
	/* margin: 150px 0; */
}

/*Sets width of text element in container. Use IDs or classes to set different sizes.*/
.inline-container h2 {
	width: 250px;
	text-align: left;
}

/*Sets display, margin, and alignment of all elements inside container*/
.inline-container h2,
.inline-container img {
	display: inline-block;
	vertical-align: middle;
	/* margin: 20px; */
}

#section2 {
	background-color: #FFFFFF;

}

/*Position map container*/
#diagram-container {
	margin: 0 auto;
	position: relative;
}

#diagram-base img {
	width: 100%;
	min-width: 1000px;
}

/*apply to all containers*/
.label {
	display: inline-block;
}

/*apply to all <h4> inside label container*/
.label .overlay-text {
	/* margin-top: 0; */
	visibility: hidden;
}


/*change visibility on hover*/
.label:hover .overlay-text {
	visibility: visible;
}

/*Sets width of text element in container. Use IDs or classes to set different sizes.*/
.label .overlay-text {
	text-align: middle;
}

/*Sets display and alignment of all elements inside container*/
.label .overlay-text,
img {
	display: inline-block;
	vertical-align: middle;
}

.overlay-text {
	position: absolute;
	top: 80%;
	left: 50%;
	transform: translate(-50%, -50%);

}

#fry {
	top: 30%;
	left: 10%
}


#flora {
	top: 65%;
	left: 12%
}

#reine {
	top: 60%;
	left: 85%
}

#vogue {
	top: 89%;
	left: 50%
}

#mocktail {
	top: 40%;
	left: 85%
}

#beer {
	top: 35%;
	left: 83%
}

#brieboard {
	top: 83%;
	left: 80%
}

/*Applying the same styles to all link images on the map*/
#diagram-links img {
	position: absolute;
	width: 20%;
}


/*Position link 1*/
#diagram-links #fries {
	top: 20%;
	left: 25%;
}



#diagram-links #drink1 {
	top: 40%;
	left: 15%;
	width: 30%;
}

#diagram-links #drink2 {
	top: 35%;
	left: 46%;
	width: 30%;
}


#diagram-links #drink3 {
	top: 66%;
	left: 40%;

}

#diagram-links #drink4 {
	top: 40%;
	left: 40%
}

#diagram-links #drink5 {
	top: 33%;
	left: 62%
}

#diagram-links #brie {
	top: 60%;
	left: 62%
}

#section2 img {
	margin-top: 20px;
	margin-bottom: 20px;
}

#section3 {
	background-image: linear-gradient(to bottom, rgba(167, 29, 61, 0), rgba(167, 29, 61, 1));
	width: 100%;
}

#section3 img {
	width: 90%;
	padding-left: 5%;
	padding-right: 5%;
}


.caption {
	font-size: 20px;
	padding-bottom: 50px;
	padding-top: 10px;
}

.bottom-links {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

#top-button {
	font-size: 24px;
}