* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}

body {
	background: #0a2a43;
	min-height:1500px;
	font-family: 'Open Sans','sans-serif';
	color:#fff;
}
h1, h2 {
	font-family:'Poppins', 'sans-serif';
	font-weight:700;
}
p {
	padding-top: 20px;
	line-height: 1.5em;
}
section {
	position: relative;
	width:100%;
	height: 100vh;
	overflow:hidden;
	display:flex;
	justify-content: center;
	align-items: center;
}
section:before {
	content: '';
	position:absolute;
	bottom:0;
	width:100%;
	height:100px;
	background: linear-gradient(to top, #0a2a43, transparent);
	z-index: 1000;
}
a {
    color: azure;
    text-decoration: none;
    font-style: italic;
}
section:after {
	content: '';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#0a2a43;
	mix-blend-mode: color;
	z-index: 1000;
}
section img {
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	height:100%;
	object-fit: cover;
	pointer-events:none;
}
#text {
	position: relative;
	color: #fff;
	font-size: 10em;
	z-index:1;
	text-align: center;
}
#road {
	z-index: 2;
}
#moon-parallax { 
 	margin: 30px auto;
    background-image: url("assets/moon-phases.jpg");
    height: 360px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
article {
	margin:auto;
	width: 50%;
	overflow: hidden;
}
.content {
	margin: 50px auto;
}
#parallax-cards {
	width: 50%;
	display:flex;
	justify-content:space-between;
	margin: 2.5% auto 12% auto;
	flex-wrap: wrap;
}
.cards-title {
	flex: 1;
	margin:auto;
	width: 50%;
}
.card {
  width: 300px;
  perspective: 800px;	
  color: #fff;
  padding:3%;
  flex-basis: 50%;
}

.card-content {
  text-align: center;
  position: relative;
  padding: 15em 5em;
  transition: transform 3s;
  transform-style: preserve-3d;
}

.card:hover .card-content {
  transform: rotateY(.5turn);
}

.front,
.back {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5em 3em;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  display: grid;
  align-content: center;
}

.front {
  background-color: #07375c;
  background-image: url("assets/moon-phase.jpg");
  background-size: cover;
  background-blend-mode: overlay;
  color: #fff;
}
.front::before {
  content: '';
  position: absolute;
  top: 1em;
  bottom: 1em;
  left: 1em;
  right: 1em;
  border: 3px solid currentColor;
  transform:translateZ(3rem);
}

.title {
  font-size: 1.6rem;
  transform: translateZ(9rem);
  order: 2;
}

.subtitle {
  transform: translateZ(6rem);
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: .75rem;
  opacity: .7;
}

.info {
  transform: translateZ(6rem);
  font-size: 1rem;
  line-height: 1.6;
  text-align:left;
  color:#fff;
}
.back {
  transform: rotateY(.5turn);
  color: #07375c;
  background: #1667a1;
}