:root {
    --ottanio-palette: #01796F;
    --marrone-palette: #805E2B;
    --azzurro-palette: #0bd6c5;
    --giallo-palette: #ffe784;
    --arancione-palette:#ddb374;
    --blu-palette:#98d3e6;

    --height-header: 80px;
}

.header {
	background-color: #01796F !important;
}

.navbar-nav a {
    color: white !important;
}

#social-btn i {
	color: white !important;
}

#social-btn i:hover {
	color: var(--arancione-palette) !important;
}

.general-container {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	position: relative;
	width: 100%;
	height: auto;
	padding-top: 30px;
	padding: clamp(10px, 3vw, 40px);
}

/* Articolo */

.container-articolo {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	position: relative;
	width: 100%;
	height: auto;
	padding: clamp(10px, 3vw, 40px);
}

.titolo-articolo {
	text-align: justify;
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	font-weight: 700;
	color: var(--ottanio-palette);
}

.sottotitolo-articolo {
	text-align: justify;
	font-size: clamp(1.2rem, 2.2vw, 1.7rem);
	font-weight: 700;
	color: var(--ottanio-palette);

}

.testo-articolo {
	text-align: justify;
	font-size: clamp(1rem, 2vw, 1.5rem);
	font-weight: 400;
	color: var(--marrone-palette);
}

.titolo {
	font-size: clamp(32px, 4vw, 120px);
	font-weight: bold;
	color: var(--marrone-palette);
	padding: clamp(6px, 1.2vw, 30px);
	text-align: center;
    font-family: Abril Fatface;
    font-weight: 500;
    font-style: normal;
}

.container-catechesi {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	position: relative;
	width: 100%;
	height: auto;
	padding: clamp(10px, 3vw, 40px);
	font-size: clamp(1.3rem, 2vw, 2.5rem);
	color: var(--marrone-palette);
}

.ql-align-center{text-align: center;}
.ql-align-right{text-align: right;}
.ql-align-left{text-align: left;}

/* Responsive */

@media screen and (max-width: 992px) {
	.general-container {
		padding-top: 130px;
	}
}
