: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);
	text-align: center;
	padding: clamp(6px, 1.2vw, 30px);
	text-align: center;
    font-family: Abril Fatface;
    font-weight: 500;
    font-style: normal;
}

.container-notizie {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: clamp(10px, 4vw, 80px);
	padding: clamp(10px, 3vw, 40px);
	font-size: clamp(1.3rem, 2vw, 2.5rem);
	color: var(--marrone-palette);
}

.card-articolo{
	padding: clamp(10px, 2.2vw, 40px);
	background-color: whitesmoke;
	border: 3px solid var(--ottanio-palette);
	width: 29vw;
	height: 22vw;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.card-titolo{
	font-size: clamp(1.5rem, 2.5vw, 2.5rem);
	font-weight: 700;
	color: var(--ottanio-palette) !important;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.description-container{
	font-size: clamp(1.2rem, 1.8vw, 2.2rem);
	word-wrap: break-word;
	overflow-wrap: break-word;
	color: var(--marrone-palette) !important;
}

.link-container{
	display: flex;
	justify-content: center;
	align-items: center;
}

.link-button {
	opacity: 0;
    position: relative;
    padding: clamp(2px, 0.7vw, 15px);
    border-radius: 14px;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
	background-color: var(--giallo-palette);
    color: black !important;
	text-decoration: none;
    font-size: clamp(12px, 1.5vw, 23px);
    font-weight: 600;
    text-align: center;
	z-index: 100;
	width: 50%;
}

.link-card{
	text-decoration: none !important;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.link-card:hover {
	text-decoration: none !important;
}

.link-card:hover .link-button{
	opacity: 1;
	background-color: var(--giallo-palette);
    color: black !important;
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.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;
	}

	.container-notizie {
		grid-template-columns: 1fr 1fr;
	}

	.card-articolo {
		width: 45vw;
		height: 30vw;
	}

	.link-button {
		opacity: 1;
		padding-top: clamp(3px, 1vw, 15px);
		padding-bottom: clamp(3px, 1vw, 15px);
	}
}

@media screen and (max-width: 668px) {
	.container-notizie {
		grid-template-columns: 1fr;
	}

	.card-articolo {
		width: 80vw;
		height: 50vw;
	}
}