/*---------------------------------------
  CUSTOM PROPERTIES ( VARIABLES )             
-----------------------------------------*/
:root {

	/* COLORS */
  --blue-color:                  #2857A5;
  --red-color:                   #C63132;
  --yellow-color:                #FFFF00;
  --gray-color:                  #00B9F0;
  --white-color:                 #fff;
}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.montserrat-<uniquifier> {
  font-family: "Montserrat", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/* MENÚ */

.menu {
	width: 100%;
	height: 56px;
	padding: 0% 2%;
	background: rgb(2,13,196);
    background: linear-gradient(80deg, rgba(2,13,196,1) 0%, rgba(0,198,235,1) 100%);
}

/* APRESENTAÇÃO */

.present {
	width: 100%;
	max-height: default;
	display: flow-root;
	padding: 20px 10%;
}

.present h1 {
	font-family: "Montserrat", serif;
  font-size: 1.5rem;
  font-weight: 500;
  font-style: normal;
  text-align: center;
}

.astrologia {
	width: 100%;
	max-height: default;
	display: flow-root;
	text-align: center;
}

.astrologia h2 {
	font-family: "Montserrat", serif;
  font-size: 1.5rem;
  font-weight: 500;
  font-style: normal;
  text-align: center;
}

.astrologia h3 {
	font-family: "Montserrat", serif;
  font-size: 1.3rem;
  font-weight: 500;
  font-style: normal;
  text-align: center;
}

.astrologia p {
	font-size: 1.2rem;
	text-align: justify;
}

.palavras-chave {
	font-size: 0.8rem;
	text-align: left;
	margin-bottom: 30px;
}

.saiba-mais {
	width: 50%;
	text-align: center;
	background: var(--blue-color);
	padding: 2% 5%;
	border-radius: 50px;
	color: var(--white-color);
	border: none;
	margin-bottom: 20px;
}

.saiba-mais a {
	color: var(--white-color);
}

.saiba-mais a:hover {
	color: var(--yellow-color);
}

.youtube {
	width: 100%;
	hanging-punctuation: 200px;
	text-align: center;
}

.youtube img {
}

.redes-sociais {
	width: 60%;
	height: 50px;
	text-align: left;
	position: fixed;
	top: 90%;
	right: 5%;
}

/* RODAPÉ */

.rodape {
	width: 100%;
	height: 400px;
	background: black;
}

/* ----------------------------------------- */ @media screen and (min-width: 768px) {


/* APRESENTAÇÃO */

.present {
	padding: 20px 10%;
}

.present h1 {
  font-size: 1.7rem;
}

.astrologia {
	width: 100%;
	max-height: default;
	display: flow-root;
	text-align: center;
}

.astrologia h2 {
	font-family: "Montserrat", serif;
  font-size: 1.5rem;
  font-weight: 500;
  font-style: normal;
  text-align: center;
}

.astrologia p {
	font-size: 1rem;
}

.saiba-mais {
	width: 20%;
	text-align: center;
	background: var(--blue-color);
	padding: 2% 5%;
	border-radius: 50px;
	color: var(--white-color);
	border: none;
}

.saiba-mais:hover {
	width: 25%;
	background: var(--red-color);
	transition: 1s;
}

.redes-sociais {
	width: 20%;
	height: 50px;
	text-align: left;
	position: fixed;
	top: 90%;
	right: 5%;
}







}