@import url(reset.css);
html, body { min-height: 100%; background-color: black; }

header { height: 60px; background-color: black; display: flex; flex-direction: row; justify-content: center; align-items: center; position: fixed; z-index: 1; width: 100%; }

header h3 { font-family: 'Parisienne', cursive; font-size: 40px; color: #fff; }

.hero { width: 100%; height: 100vh; background-size: cover; background-image: url("../img/tarot-991041_1920.jpg"); position: relative; display: flex; flex-direction: column; justify-content: center; color: #fff; }

.hero:before { content: ' '; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); }

.hero div { padding: 0px 0px 0px 40px; z-index: 2; }

.hero div h3 { font-family: 'Parisienne', cursive; font-size: 42px; margin: 0px 0px 20px 0px; }

.hero div p { font-size: 18px; color: rgba(255, 255, 255, 0.8); font-family: 'Arial'; max-width: 600px; padding: 0px 20px 0px 0px; }

.readings { width: 100%; box-sizing: border-box; padding: 20px 40px; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; }

.readings .card { flex: 1; margin: 0px 10px; min-width: 300px; background-color: #eee; margin-bottom: 20px; }

.readings .card a { color: inherit; }

.readings .card:hover { background-color: rgba(255, 255, 255, 0.2); color: #fff; }

.readings .card .card-header { width: 100%; height: 200px; background-size: cover; background-repeat: no-repeat; background-position: center center; display: flex; flex-direction: column; justify-content: flex-end; }

.readings .card .card-header h4 { color: #fff; padding: 5px 10px; width: 100%; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.4); font-family: 'Parisienne', cursive; font-size: 22px; }

.readings .card.medium .card-header { background-image: url("../img/bg1.jpg"); }

.readings .card.tarot .card-header { background-image: url("../img/craft-2728227_1920.jpg"); }

.readings .card.pendulum .card-header { background-image: url("../img/bg.jpg"); }

.readings .card p { padding: 20px 10px; line-height: 18px; font-family: 'Arial'; }

.about, .page-content { padding: 10px 40px 30px 40px; color: #fff; }

.about h2, .page-content h2 { font-family: 'Parisienne', cursive; font-size: 32px; margin: 0px 0px 20px 0px; }

.about p, .page-content p { margin-bottom: 20px; }

.page-content { margin-top: 40px; }

.contact { color: #fff; padding: 30px 40px; }

.contact h2 { font-family: 'Parisienne', cursive; font-size: 32px; margin: 0px 0px 20px 0px; }

.contact form { display: block; max-width: 300px; margin: 40px auto 20px auto; }

.contact input, .contact textarea { width: 100%; margin-bottom: 10px; }

.contact textarea { font-size: 16px; }

.contact input[type=text] { font-size: 18px; }

.contact input[type=submit] { font-size: 20px; display: inline-block; }

footer { color: #aaa; box-sizing: border-box; padding: 10px 20px; font-size: 14px; font-family: 'Arial'; }

/*# sourceMappingURL=design.css.map */