:root {
  --colore-primario: teal;
  --colore-secondario: #116561;
  --colore-sfondi: #ede6e6b0;
  font-family: 'Calibri', 'Open Sans', 'Droid Sans', Arial, sans-serif;
  --colore-bottoni: #00847e;
  --colore-font-1: #fff;
}

body {
max-width: 768px;
margin:auto;
background-image: url('area-di-lavoro-tavolo-da-lavoro-e-da-ufficio.jpg');
background-position: center;
padding:1rem;
padding-bottom: 3rem;
}

main {
  margin-top: 2rem;
  border-radius: 1rem;
  padding: 1rem;
  background-color: var(--colore-sfondi);
}

button {
  border-radius:0.5rem;
  margin:1rem;
  padding:0.75rem;
  padding-inline:1rem;
  border: 0px;
  right:50%;
    background-color:var(--colore-secondario);
  color: var(--colore-font-1);
  }
nav {   
background-color: var(--colore-secondario);
border-radius: 1rem;
padding: 1rem;
margin-top:1rem;

}

nav a {
margin-inline: 0.5rem;
text-decoration: none;
font-weight: 500;
color: var(--colore-font-1);
}
nav #mostra_nav {
display: none;
}

@media only screen and (max-width:768px) {

nav a:not(#home) {
  display:none;
}
nav #mostra_nav {
  display: inline;
  cursor:pointer;
  appearance: none;
}
#mostra_nav + label{
  cursor: pointer;
}
#mostra_nav + label::before{
  content:"\002630";
}
#mostra_nav:checked ~ a {
  display: block;
}
#mostra_nav:checked + label{
  float:right;
}
#mostra_nav:checked + label::before{
  content: "X";
}
#mostra_nav:checked {
  display:none;
}

}