.zodiac {
	background: url(../img/bg1.jpg) no-repeat center top;
	min-height: 970px;
}
.hidden {
	display: hide;
}
.container {
	text-align: center;
}
.wrapper {
    padding: 50px 20px;
    background-color: rgba(79, 27, 14, 0.59);
    margin-top: 35px;
    border-radius: 81px;
    color: #fff;
}
.wrapper h1 {
	margin-top: 0;
	margin-bottom: 30px;
	font-family: 'Rakkas', cursive;
    font-size: 5em;
}
.wrapper p {
	letter-spacing: 4px;
}
.wrapper button {
	color: #e39356;
    font-size: 20px;
    font-weight: 600;
    margin-top: 30px;
    background-color: #6e1912;
    font-family: 'Architects Daughter', cursive;
}
.wrapper button:hover {
	color: #6e1912;
	background-color: #e39356;
}
.wrapper button:focus {
	color: #6e1912;
	background-color: #e39356;
	border: 1px solid white;
}
.day, .month, .year {
	width: 29%;
	display: inline-block;
}

.outputHeading {
	background-color: rgba(79, 27, 14, 0.59);
	color: #fff;
	margin-top: 50px;
    border-radius: 81px;
    padding: 30px 10px;
    margin-bottom: 30px;
}
.outputHeading h1 {
	margin-top: 0;
	font-family: 'Rakkas', cursive;
    font-size: 5em;
}
.outputHeading img {
	border: 4px solid white;
    box-shadow: 4px 5px 20px white;
}
.outputBody p {
	padding: 20px 50px;
	color: white;
	background-color: rgba(79, 27, 14, 0.59);
	border-radius: 58px 0 58px 0;
	line-height: 2;
    font-size: 1em;
    margin: 15px 20px;
    font-family: 'Merienda', cursive;
}
span {
	font-size: x-large;
}





@media(max-width: 1200px) {
	.zodiac {
		background-repeat: repeat;
	}
}
@media(max-width: 540px) {
	.day, .month, .year {
		width: unset;
		display: block;
	}
}