@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gentium+Basic&display=swap');

@font-face {
    font-family: 'wild_spiritregular';
    src: url('fonts/wild_spirit_thefontsmaster.com-webfont.woff2') format('woff2'),
         url('fonts/wild_spirit_thefontsmaster.com-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


body {
	background-color:#979172;
}
.gentium {
	color:white;
	font-family: 'Gentium Basic', serif;
}
.inline {
	display:inline;
}
main {
	/* width: 700px;
	max-width: 100%;
	margin: 0 auto 0 auto; */
	text-align: center;
}
section, blockquote {
	margin-top: 10rem;
}
section.name {
	display: flex;
	height: 60vh;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
section.name h2 {
	color: #fff;
}
section.wedding p {
	color:#979172;
}
.wedding-photo {
	background-image:url('img/wedding.jpg');
	background-size:cover;
	background-position:center;
	height:100vh;
}

p, i, em, ul, li {
	color: rgb(255, 248, 242);
	font-family: 'Open Sans', sans-serif;
	font-size: 2rem;
	font-weight: 400;
}
small {
	color:rgb(255, 248, 242);
}
em {
	font-size: 1.5rem;
}
strong {
	text-decoration: 2px white;
	text-decoration-line: underline;
	text-decoration-style: dotted;
}
h2, h3 {
	color: #f3d8c0;
	font-family: 'Open Sans', sans-serif;
}
blockquote, h1{
	color: #E7CB42;
	font-family: 'wild_spiritregular', sans-serif;
	font-weight: 400;
	text-shadow: -1px 1px 0px rgb(0 0 0 / 50%);
}
h1 {
	color:#000;
	font-size: 18rem;
	line-height: 9rem;
	margin: 4rem 0;
	display: inline-block;
}
blockquote {
	font-size: 7rem;
}
h2 {
	font-size: 4rem;
	font-weight: 300;
}
h3{
	font-size: 3rem;
	font-weight: 600;
}
.light {
	font-weight: 300;
}

.explanation {
	display:flex; 
	justify-content:space-around;
}
.explanation > div {
	text-align: left;
	width:40vw; 
}
.explanation > div:first-child {
	text-align:right
}

.explanation p, .explanation ul, .explanation li {
	font-size:1.5rem;
}
video {
	opacity:0;
  transition: opacity 2s ease-in;
}
video.show {
  opacity:0.5;
}
button {
	background-color: transparent;
	border: none;
	margin:1rem 1rem 0 0;
}
button img {
	width:50px;
}

.carousel-inner {
	height: 80vh;
	display: flex;
	align-items: center;
}

@media only screen and (max-width: 600px) {
	h1 {
		font-size: 8rem;
		line-height: 6rem;
    margin: 2rem 0;
	}
	h2 {
		font-size: 2rem;
	}
	h3 {
		font-size: 1.75rem;
	}
	p {
		font-size: 1.25rem;
	}
	blockquote {
		font-size: 4rem;
	}
	.explanation {
		display:block;
	}
	.explanation > div {
		text-align: center;
		width: 90%;
    margin: 0 1.2rem 4rem;
	}
	.explanation > div:first-child {
		text-align:center
	}
	
	.explanation p, .explanation li {
		font-size: 1rem;
	}
	.explanation em {
		font-size: 1.2rem;
	}
	.explanation ul {
		list-style:none;
	}
}