body {
  background-color: #fff;
  font-family: 'Exo','Noto Sans','Segoe UI','sans-serif';
    background:url('../../../../risorse/foto2.webp') no-repeat center center;
    background-size:cover;
    

}

nav h2 {
  font-family: 'Caveat','Segoe script','Apple Chancery','cursive','sans-serif';
  /*font-size: large;*/
  margin:0.25rem;
}
.contenitore {
    display:flex;
    flex-direction:column;
}
nav {
  background-color: #eee;
  border-radius: 1rem;
  padding: 0.75rem;
  margin: 1rem;
}
.app {
  background-color: #eee;
  border-radius: 1rem;
  margin: 1rem;
  padding: 0.75rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.articolo {
  background-color: #eee;
  border-radius: 1rem;
  margin: 1rem;
  padding: 0.75rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.form >*{
  display: block;
  margin:auto;
  margin-top:0.5rem;
}

button {
  border-radius: 1rem;
  background-color: #6e90f7;
  padding:0.5rem 1rem;
  border: 0px;
  color:#fff;
}
select {
  border: 2px solid #ddd;
  border-radius: 1rem;
  padding:0.5rem;
}
input[type=number]{
  border: 2px solid #ddd;
  border-radius: 1rem;
  padding:0.5rem;
}
nav a {
  text-decoration: none;
  font-weight: 500;
  color: black;
}

input[type="checkbox"].switch{
   font-size: medium;
   -webkit-appearance: none;
      -moz-appearance: none;
           /*! appearance: none; */
   width: 3.5em;
   height: 1.5em;
   background: #ddd;
   border-radius: 3em;
   position: relative;
   cursor: pointer;
   outline: none;
   -webkit-transition: all .2s ease-in-out;
   transition: all .2s ease-in-out;
 }

 input[type="checkbox"].switch:checked{
   background: #6e90f7;
 }

 input[type="checkbox"].switch:after{
   position: absolute;
   content: "";
   width: 1.5em;
   height: 1.5em;
   border-radius: 50%;
   background: #fff;
   -webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
           box-shadow: 0 0 .25em rgba(0,0,0,.3);
   -webkit-transform: scale(.7);
           transform: scale(.7);
   left: 0;
   -webkit-transition: all .2s ease-in-out;
   transition: all .2s ease-in-out;
 }

 input[type="checkbox"].switch:checked:after{
   left: calc(100% - 1.5em);
 }
@media (prefers-color-scheme: dark) {
   .articolo {
       background-color: rgb(65, 65, 65);
   }
   .app {
        background-color: rgb(65, 65, 65);
   }
    body {
      background-color: #000;
      color: #fff;
    }
  nav {
    background-color: #333;
  }
  nav a {
    color: #bbb;
  }
}
@media only screen and (min-width:768px) {
  .contenitore {
      flex-direction:row;
  }
  .app {
    float:left;
    padding-inline:2rem;
  }
  .articolo {
    float:right;
  }
}