/*Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');
@font-face {
	font-family: 'zodiac-signs';
	src:  url('../fonts/zodiac-signs.eot?xqmdz0');
	src:  url('../fonts/zodiac-signs.eot?xqmdz0#iefix') format('embedded-opentype'),
		  url('../fonts/zodiac-signs.ttf?xqmdz0') format('truetype'),
		  url('../fonts/zodiac-signs.woff?xqmdz0') format('woff'),
		  url('../fonts/zodiac-signs.svg?xqmdz0#zodiac-signs') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

/*CSS Reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*Zodiac Styles*/
.aries .bg-color 		{background-color: #fbf3c5}
.taurus .bg-color 		{background-color: #c9cae6}
.gemini .bg-color 		{background-color: #f8d3c3}
.cancer .bg-color 		{background-color: #eaeff5}
.leo .bg-color 			{background-color: #ffdfae}
.virgo .bg-color 		{background-color: #e3e8eb}
.libra .bg-color 		{background-color: #facab4}
.scorpio .bg-color 		{background-color: #faf9f4}
.sagittarius .bg-color 	{background-color: #d9e8d5}
.capricorn .bg-color 	{background-color: #fbd3a0}
.aquarius .bg-color 	{background-color: #f1e5f1}
.pisces .bg-color 		{background-color: #f9d1ae}

.aries .bg-image 		{background-image: url('../img/zodiac_sign_aries.png')}
.taurus .bg-image 		{background-image: url('../img/zodiac_sign_taurus.png')}
.gemini .bg-image 		{background-image: url('../img/zodiac_sign_gemini.png')}
.cancer .bg-image 		{background-image: url('../img/zodiac_sign_cancer.png')}
.leo .bg-image 			{background-image: url('../img/zodiac_sign_leo.png')}
.virgo .bg-image 		{background-image: url('../img/zodiac_sign_virgo.png')}
.libra .bg-image 		{background-image: url('../img/zodiac_sign_libra.png')}
.scorpio .bg-image 		{background-image: url('../img/zodiac_sign_scorpio.png')}
.sagittarius .bg-image 	{background-image: url('../img/zodiac_sign_sagittarius.png')}
.capricorn .bg-image 	{background-image: url('../img/zodiac_sign_capricorn.png')}
.aquarius .bg-image 	{background-image: url('../img/zodiac_sign_aquarius.png')}
.pisces .bg-image 		{background-image: url('../img/zodiac_sign_pisces.png')}

.sign, .vector {
	font-family: 'zodiac-signs' !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.aries .sign:before 		{content: '\2648'}
.taurus .sign:before 		{content: '\2649'}
.gemini .sign:before 		{content: '\264a'}
.cancer .sign:before 		{content: '\264b'}
.leo .sign:before 			{content: '\264c'}
.virgo .sign:before 		{content: '\264d'}
.libra .sign:before 		{content: '\264e'}
.scorpio .sign:before 		{content: '\264f'}
.sagittarius .sign:before 	{content: '\2650'}
.capricorn .sign:before 	{content: '\2651'}
.aquarius .sign:before 		{content: '\2652'}
.pisces .sign:before 		{content: '\2653'}

.aquarius .vector:before 	{content: '\e920'}
.aries .vector:before 		{content: '\e921'}
.cancer .vector:before 		{content: '\e922'}
.capricorn .vector:before 	{content: '\e923'}
.gemini .vector:before 		{content: '\e924'}
.leo .vector:before 		{content: '\e925'}
.libra .vector:before 		{content: '\e926'}
.pisces .vector:before 		{content: '\e927'}
.sagittarius .vector:before {content: '\e928'}
.scorpio .vector:before 	{content: '\e929'}
.taurus .vector:before 		{content: '\e92a'}
.virgo .vector:before 		{content: '\e92b'}

.starry-sky {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%);
  background-size: 4px 4px, 3px 3px, 5px 5px, 3px 3px, 6px 6px, 4px 4px, 5px 5px, 4px 4px, 6px 6px, 3px 3px, 5px 5px, 4px 4px, 3px 3px, 6px 6px, 5px 5px, 4px 4px, 5px 5px, 6px 6px;
  background-position: 20% 10%, 5% 20%, 10% 75%, 22% 35%, 30% 30%, 40% 50%, 45% 20%, 65% 20%, 85% 30%, 98% 90%, 20% 80%, 50% 80%, 75% 80%, 89% 75%, 90% 95%, 60% 70%, 65% 40%, 90% 20%;
  background-repeat: no-repeat;
  animation: twinkle ease-in .3s infinite;
}

@keyframes twinkle {
  to {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, #fff 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, #fff 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, #fff 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, #fff 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, #fff 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, #fff 20%, transparent 30%), radial-gradient(circle, rgba(255, 255, 255, 0.7) 20%, transparent 30%), radial-gradient(circle, #fff 20%, transparent 30%), radial-gradient(circle, #fff 20%, transparent 30%);
  }
}

/*Main Styles*/
body {
	background-color: #282949;
}
main {
	font-family: 'Comfortaa', cursive;
	width: 100%;
	height: 100%;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: 50%;
	position: fixed;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 500px;
    max-height: 850px;
}
main > header {
	display: block;
	text-align: center;
	width: 100%;
	height: 100%;
	background-color: #282949;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
}
main > article {
	display: none;
	width: 100%;
}
main.read-mode > header {
	height: auto;
}
main.read-mode > header.starry-sky {
	min-height: auto;
}
main.read-mode > header > nav {
	display: none;
}
main.read-mode > article {
	display: block;
}

main > header > h1 {
	font-family: 'Lobster', cursive;
	font-size: 30px;
	line-height: 30px;
	padding: 30px 0;
}
main > header > h1 > a {
	text-decoration: none;
	color: inherit;
}

main > header > nav {
	height: calc(100% - 90px);
	background-image: url('../img/moon.png?v=2');
	background-position: top center;
	background-repeat: no-repeat;
	background-color: #fff;
	background-size: contain;
	padding-top: calc(100% * 0.25);
}
main > header > nav > ul {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
main > header > nav > ul > li {
	width: calc(100% / 3);
	height: calc(100% / 4);
	float: left;
	text-align: center;
	position: relative;
}
main > header > nav > ul > li > a {
	color: #454545;
	text-decoration: none;
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	

}
main > header > nav > ul > li .sign {
	display: block;
	font-size: 40px;
}
main > header > nav > ul > li .sign + span {
	display: block;
	font-size: 12px;
	font-weight: 400;
	line-height: 25px;
	margin-top: 10px;
}


main > article {
	padding: 20px;
	height: calc(100% - 90px);
	background-image: url('../img/moon.png?v=2');
	background-position: top center;
	background-repeat: no-repeat;
	background-color: #fff;
	background-size: contain;
	padding-top: calc(100% * 0.25);
}
main > article > .title {
	margin-bottom: 20px;
}
main > article > .title > h2 {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 10px;
}
main > article > .title > h3 {
	font-size: 14px;
	font-weight: 300;
}
main > article > .title > .bg-image {
	width: 150px;
	height: 150px;
	border-radius: 10px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	float: right;
	/*shape-outside: circle(50%);*/
	margin: 0 0 20px 20px;
}

main > article > .content {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	margin-bottom: 20px;
}

main > article > .stats > ul {
	overflow: hidden;
}
main > article > .stats > ul > li {
	width: calc(100% / 3);
	float: left;
	padding: 20px 10px;
}
main > article > .stats > ul > li > * {
	display: block;
	text-align: center;
}
main > article > .stats > ul > li .percent {
	margin-bottom: 10px;
	font-weight: 700;
	font-size: 16px;
}
main > article > .stats > ul > li .percent + span {
	font-weight: 400;
	font-size: 12px;
}