@import url('https://fonts.googleapis.com/css?family=Raleway|Ubuntu:500&display=swap');

a {
	text-decoration: none;
	font-family: 'Ubuntu', sans-serif;
	color: black;
	font-size: 2rem;
}

.previous {
	color: #0F636E;
	text-decoration: none;
	padding: 25px;
	border-radius: 50%;
	font-size: 5rem;
	margin: 0 30px;
	z-index: 3;
	font-family: 'Raleway', sans-serif;
}

.next {
	text-decoration: none;
	padding: 25px;
	color: #DC3023;
	border-radius: 50%;
	font-size: 5rem;
	margin: 0 30px;
	z-index: 3;
	font-family: 'Raleway', sans-serif;
}

body {
	background-color: #23cfdc;
	margin: 0;
	padding: 0;
}

header {
	text-align: center;
	background-color: #DC3023;
	color: white;
	margin: 0 0 20px 0;
	padding: 5px;
	font-family: 'Ubuntu', sans-serif;
}

main {
	display: flex;
	margin: 0 auto;
	align-items: center;
	justify-content: space-around;
	flex-direction: row
}

article {
	display: grid;
	grid-template-areas:
				"ingredients image"
				"directions directions";
	grid-template-rows: 2fr 1fr;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	font-family: 'Raleway', sans-serif;
}

.slider {
	width: 800px;
	height: 500px;
	overflow: hidden;
}

.holder {
	width: 700%;
	height: 500px;
}

.slide {
	width: 800px;
	height: 500px;
	float: left;
	z-index: 1;
}

.ingredients {
	grid-area: ingredients;
	display: flex;
	justify-content: center;
	align-items: space-between;
}

.image {
	grid-area: image;
	display: flex;
	min-height: 200px;
	background: cover;
	background-repeat: no-repeat;
	align-items: center;
	justify-content: center;
}

.directions {
	grid-area: directions;
	display: flex;
}