:root {
	--primary: rgb(46, 184, 188);
	--primary-light: rgba(46, 184, 188, 0.7);
	--secondary : rgba(7, 111, 156, 0.7);
	--gray: rgb(170, 170, 170);
	
	--navbar-bg-color: white;
	--navbar-text-color: black;
	--dropdown-shadow: rgba(0, 0, 0, 0.2);

	--banner-background-color: var(--secondary);
	--banner-text-color: white;
	
    --link-color: black; /* Colore per il tema chiaro */
	
	--footer-bg-color: var(--primary);
	--footer-text-color: white;
	
	--copyright-bg-color: var(--primary);
}

@font-face {
    font-family: font1;
    src: url(../fonts/font1.otf);
}

@font-face {
    font-family: font2;
    src: url(../fonts/font2.otf);
}

body{
	background-color:white;
	font-family: font2;
}

nav{
	background-color: var(--navbar-bg-color);
	color: var(--navbar-text-color);
}
nav a{
	text-decoration:none ;
	color: var(--navbar-text-color);
}

.footer-container{
	background-color: var(--footer-bg-color);
	color: var(--footer-text-color);
	font-weight:400;
	a{
		color: var(--footer-text-color);
		text-decoration: none;
	}
}

.copyright{
	background-color: var(--copyright-bg-color);
}



.bg-primary{
	background-color: var(--primary);
}

.btn-primary{
	background-color: var(--primary);
	border: var(--primary);
}

.btn-primary:hover{
	background-color: #22888a;
}

.nav-link:hover{
	
	box-shadow: 12px 0 15px -4px var(--dropdown-shadow), -12px 0 8px -4px var(--dropdown-shadow);

}

.list-unstyled-space{
	list-style:none;
}

.comments{
	p{
		margin-top:1px;
		margin-bottom: 1px;
	}
}

.banner{
	background-color: var(--banner-background-color);
	color: var(--banner-text-color);
}

a{
	text-decoration: none;
}

id-center {
  scroll-margin-top: 50vh;
}

.bi{
	color: var(--primary);
}

/* Stile base */
body {
  font-family: Arial, sans-serif;
  color: #0a0a0a;
  font-size: 16px;
}

h2{
	color: #444444;
}

/* Paragrafo */
p {
  font-size: 20px;
}

/* Heading Desktop */
h1 { font-size: 46px; }
h2 { font-size: 30px; }
h3 { font-size: 26px; }
h4 { font-size: 22px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; font-weight: bold; }

/* Responsive Tablet/Mobile */
@media (max-width: 1024px) {
  h1 { font-size: 26px; }
  h2 { font-size: 24px; }
  h3 { font-size: 22px; }
  h4 { font-size: 20px; }
  h5 { font-size: 18px; }
  h6 { font-size: 16px; font-weight: bold; }
  p  { font-size: 16px; }
}