body {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	position: relative;
}

.intro {
	min-height: 100vh;
	background-image: url('../images/enter.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 30% 5%;

	display: grid;
	grid-template-columns: 70% 30%;
	grid-template-rows: 90vh 10vh;
}

q {
	position: absolute;
	width: 60%;
	margin: 0 auto;
	text-align: center;
	top: 65%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;

	background-color rgba(68, 23, 45, .3);
	color: white;

	font-size: 1.3rem;
	border 1px solid white;
	padding: 2rem 0;
}

.enter {
	font-size: 2rem;

	grid-row: 2;
	grid-column: 2;
}

.enter a {
	text-decoration: none;
	color: rgba(255, 255, 255, .3);
	transition: all .2s ease;
}

.enter a:hover {
	color: rgba(255, 255, 255, .8);
}




@media screen and (min-width: 700px){
	.enter {
		letter-spacing: 1px;
	}
	.intro {
		grid-template-columns: 80% 20%;
	}
}

@media screen and (min-width: 900px){

	.enter {
		letter-spacing: 2px;
	}

	.intro {
		background-position-y: 58%;
	}
	.intro {
		grid-template-columns: 85% 15%;
	}
}