/* reset global styles */
* {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}

/* set base font size to 10px */
html {
	font-size: 62.5%;
}

body {
	line-height: 1;
	font-weight: 400;
	font-family: Inter, "Inter-Regular", Arial, Helvetica, sans-serif;
}

main {
	height: 100vh;
}

/**************************/
/* hero styles */
/**************************/

.hero {
	background-repeat: no-repeat;
	background-color: #222;
	background-size: cover;
	background-position: center;

	padding: 3.2rem 1.6rem 3.2rem 3.2rem;
	display: flex;
	flex-direction: column;
}

.hero-heading {
	font-size: 1.2rem;
	margin-bottom: 0.8rem;
	font-weight: 300;
}

.hero-name {
	font-size: 4rem;
	margin-bottom: 1.6rem;
	padding-bottom: 2.4rem;
	border-bottom: 2px solid #fff;
	font-family: "Inter-Bold", Arial, Helvetica, sans-serif;
}

.logo {
	width: 8rem;
	margin-bottom: 2.4rem;
	border-radius: 7px;
}

.description {
	color: #fff;
	text-shadow: rgba(0,0,0,0.25) 0px 0px 7px;
	height: 100%;
}

/**************************/
/* event styles */
/**************************/

.events {
	margin-bottom: 1.6rem;
	padding-bottom: 1.6rem;
	border-bottom: 2px solid #ccc;
	line-height: 1.6;
}

.events,
.events-link:link,
.events-link:visited {
	color: #fff;
}

.events-link:hover,
.events-link:active {
	color: #fff;
}

.events h2 {
	font-size: 1.8rem;
	font-family: "Inter-Bold", Arial, Helvetica, sans-serif;
	color: #fff;
	margin-bottom: 1.2rem;
}

.events h3 {
	font-size: 1.6rem;
	font-weight: 300;
}

.events p {
	font-size: 1.4rem;
}

.app-name {
	font-size: 1.4rem;
	margin-bottom: 0.8rem;
}

.app-cta {
	font-size: 1.4rem;
	margin-bottom: 1.6rem;
	font-weight: 300;
}

.store-links {
	display: flex;
	box-sizing: content-box;
}

.store-link {
	border: 1px solid #FFF;
	border-radius: 7px;
	width: 15rem;
	height: 4.2rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.store-link:first-child {
	margin-right: 12px;
}

.store-link img {
	width: 109px;
	height: 30px;
}

/**************************/
/* description styles */
/**************************/

.content-description {
	line-height: 1.6;
	padding: 3.2rem;
	color: #222;
	font-size: 1.6rem;
}

@media(max-width: 780px) {

	.hero {
		min-height: 400px;
	}

	.hero-place,
	.hero-event {
		min-height: 100vh;
	}
	
	.description-place, 
	.description-event {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		flex-grow: 2;
	}

	.store-link {
		width: 130px;
	}
}