body {
  background-color: #fff;
  font-family: 'Exo','Noto Sans','Segoe UI','sans-serif';
  padding:1rem;
  max-width:1200px;
  margin:auto;
}
#home {
  font-weight: 900;
}
nav {
  background-color: #eee;
  border-radius: 1rem;
  padding: 1rem;
}

nav a {
  margin-inline: 0.5rem;
  text-decoration: none;
  font-weight: 500;
  color: black;
}
nav #mostra_nav {
  display: none;
}
footer {
  position:relative;
  bottom:0;
  margin-top:3rem;
  background-color:#eee;
  padding:1.25rem;
  border-radius:1rem;
}
@media (prefers-color-scheme: dark) {
    body {
      background-color: #000;
      color: #fff;
    }
  nav,footer {
    background-color: #333;
  }
  nav a {
    color: #bbb;
  }
  p > strong {
    font-size:1.15rem;
}
}

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