/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #8f54a0 #ffffff;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 5px;
}

*::-webkit-scrollbar-track {
    background: #ffffff;
}

*::-webkit-scrollbar-thumb {
    background-color: #8f54a0;
    border-radius: 10px;
    border: 3px solid #ffffff;
}



body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
	font-family: "Bellota Text", sans-serif;
}

main {
	max-width: 1024px;
	width: 100%;
	margin: 0 auto;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='32' height='32' patternTransform='scale(4) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0,0%,100%,1)'/><path d='M37.657 10.343l-4.243 4.243m-2.828 2.828l-4.243 4.243m11.314 0l-4.243-4.243m-2.828-2.828l-4.243-4.243m-20.686 0l-4.243 4.243m-2.828 2.828l-4.243 4.243m11.314 0l-4.243-4.243m-2.828-2.828l-4.243-4.243'  stroke-linecap='square' stroke-width='0.5' stroke='hsla(344, 38%, 92%, 1)' fill='none'/><path d='M16-8v6m0 4v6m8-8h-6m-4 0H8m8 24v6m0 4v6m8-8h-6m-4 0H8'  stroke-linecap='square' stroke-width='0.5' stroke='hsla(34, 100%, 94%, 1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

header {
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
}

h1 {
    margin: 0;
}

h2 {
	background-color: #d67d07;
	color: white;
	padding: 5px;
	border-radius: 3px;
}

h3 {
	color: #6e2a3c;
	font-weight: bolder;
	font-family: "Poetsen One", sans-serif;
}

nav {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
	line-height: 35px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li {
    display: inline-block;
    margin-right: 10px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #d67d07;
	border-radius: 10px;
	margin-top: 5px !important;
	font-weight: bold;
}

nav li:hover {
	background-color: #a15e06;
	border-radius: 10px;
}

nav a {
    color: #fff;
    text-decoration: none;
}

.sezione {
    padding: 20px;
}

.piatto {
    margin-bottom: 20px;
    padding-bottom: 10px;
	border-left: 2px solid #6e2a3c;
	padding-left: 10px;
}

.piatto h3 {
    margin: 0;
}

.prezzo {
    float: right;
	font-family: "Sriracha", cursive;
	font-weight: 400;
	font-style: normal;
	color: #d67d07;
}

.logo {
	max-width: 75px;
	max-height: 75px;
}

footer {
    background-color: #f0f0f0;
    text-align: center;
    padding: 10px;
}

/* Media query per il responsive design */

@media (max-width: 768px) {
    nav ul {
        text-align: left;
        padding: 10px;
	}
	
    nav li {
        margin: 0 10px;
	}
	
    .sezione {
        padding: 10px;
	}
	
	.menunavigazione{
	overflow-x: scroll;
	white-space: nowrap;
	}
}


.btn {
  background: rgb(110,42,62);
  background: linear-gradient(90deg, rgba(110,42,62,1) 0%, rgba(110,42,60,1) 100%);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  border: 0px;
  -webkit-box-shadow: 0px 2px 5px #666666;
  -moz-box-shadow: 0px 2px 5px #666666;
  box-shadow: 0px 2px 5px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 5px 20px 5px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #8a4658;
  text-decoration: none;
}

.allergenith{
	background: rgb(110,42,62);
	color: white;
	text-align: left;
	font-weight: bolder;
	font-size: 22px;
	padding:5px;
}

.titoloallergene{
	font-family: sans-serif;
	font-weight: bold;
	padding:5px;
	border-bottom: 1px solid #a6a6a6;
}

.descrizioneallergene{
	font-family: sans-serif;
	padding:5px;
	border-bottom: 1px solid #a6a6a6;
}