*{
    box-sizing: border-box;
}

body{
    margin: 0;
  }

main{
    background: -webkit-linear-gradient(#00ffff, #006464);
    background: -o-linear-gradient(#00ffff, #006464);
    background: linear-gradient(#00ffff, #006464);
	height: 100vh;
    width: 100vw;
	display: grid;
}

nav{
	height: 100px;
	width: 100vw;
	align-self: center;
	justify-self: center;
}

.mainNav{
	position: absolute;
	width: 60px;
	height: 100px;
	background-color: #ebebeb;
	cursor: pointer;
}

#previous{
	left:10px;
}

#next{
	right:10px;
}

.wrapper{
	position: absolute;
	height: 50%;
	width: 100vw;
	margin: auto;
	top: 0;
	bottom: 0;
}

@media (min-width: 600px) {
	
	nav{
		height: 150px;
	}
	
	.mainNav{
		width: 100px;
		height: 150px;
	}
	
	#previous{
		left: 20px;
	}
	
	#next{
		right: 20px;
	}
}