/* ovunque */
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 16px;
  text-align: justify;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

pre,
code {
  overflow-wrap: anywhere;
}

/* sfondo chiaro */
.light {
  color: #000;
  background-color: #7c98c1;
  text-align: inherit;
  font-size: inherit;
  font-family: inherit;
  margin: inherit;
  padding: inherit;
}

/* sfondo scuro */
.dark {
  background-color: #181818;
  color: #fff;
  text-align: inherit;
  font-size: inherit;
  font-family: inherit;
  margin: inherit;
  padding: inherit;
}

/* l'immagine di sfondo della home */
.img-home {
  border-radius: 12px;
  box-shadow: -21px 17px 22px -9px rgba(97, 97, 97, 0.69);
  -webkit-box-shadow: -21px 17px 22px -9px rgba(97, 97, 97, 0.69);
  margin: 0 auto;
}

/* ----------------- testa ------------------- */
/* menu fisso */
.div-fisso {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1000;
  padding: 20px;
}

/* le icone sole e luna home */
#sole-home {
  font-size: 35px;
  color: #cccccc;
  padding: 10px;
}

#luna-home {
  font-size: 25px;
  color: #cccccc;
  padding: 10px;
}

/* al passare sopra le icone sole e luna home cambia colore */
#sole-home:hover {
  color: yellow;
}

#luna-home:hover {
  color: black;
}

/* i link senza sottolineatura */
#sole-home-link,
#luna-home-link {
  text-decoration: none;
}

/* il link della home */
.a-home {
  color: inherit;
  padding: 10px;
}

.a-home:hover {
  color: #cccccc;
  font-weight: bold;
}
.svg-home {
  margin-left: 100px;
}

/* ----------------- css grid ------------------- */

/* il contenuto della pagina è diviso in 3 colonne */
.container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "main main aside"
    "footer footer footer";
  margin-top: 30px;
  }

/* la forma di tutte le sezioni */
.box {
  padding: 20px;
  min-width: 0;
}

/* la sezione header */
.header {
  grid-area: header;
  padding: 20px;
  text-align: center;
  margin-top: 30px;
}

/* la sezione centrale */
.main {
  grid-area: main;
  padding: 50px;
  background-color: inherit;
  height: 500px;
  overflow-y: scroll;
  overflow-x: hidden;
}

/* la sezione di destra (menu, aside) */
.aside {
  grid-area: aside;
  padding: 20px;
  max-width: 240px;
}

/* la sezione bassa (footer) */
.footer {
  grid-area: footer;
  padding: 20px;
  text-align: center;
}

/* ----------------- fisarmonica------------------- */
/* il contenitore della fisarmonica */

.menu-wrapper {
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: -21px 17px 22px -9px rgba(97, 97, 97, 0.69);
  -webkit-box-shadow: -21px 17px 22px -9px rgba(97, 97, 97, 0.69);
  overflow: hidden;
  border: 1px solid #e6d9bb;
  width: 200px;
}

/* larghezza delle voci */
.accordion {
  width: 100%;
}

.accordion details {
  border-bottom: 1px solid #e6d9bb;
}

.accordion details:last-child {
  border-bottom: none;
}

/* i sottomenù */
.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  font-weight: 700;
  position: relative;
  transition: all 0.2s ease;
}

/* per webkit */
.accordion summary::-webkit-details-marker {
  display: none;
}

/* il segno a fianco quando è chiuso */
.accordion summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: #79736d;
}

/* colore di sfondo è aperto */
.accordion details[open] > summary {
  background: #cccccc;
}

/* il segno a fianco quando è aperto */
.accordion details[open] > summary::after {
  content: "−";
}

/* la fin estra del sottomenù */
.accordion .submenu {
  padding: 12px 0 18px;
}

/* gli item del sottomenu */
.accordion .submenu li {
  list-style: none;
  padding: 10px 24px;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

/* sopra gli item del sottomenu */
.accordion .submenu li:hover {
  background: #cccccf;
  border-left-color: red;
}

/* i link degli item del sottomenu */
.accordion .submenu a {
  color: inherit;
  text-decoration: none;
  display: block;
  font-size: 15px;
}
/* ----------------- le sezioni ------------------- */
/* il titolo delle sezioni */
.h1-titolo {
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 30px;
}

textarea {
  display: block;
  field-sizing: content;
  padding: 20px;
  border-radius: 20px;
  background-color: inherit;
  color: inherit;
  font-size: 16px;
  font-family: monospace;
}

/* ------------ portrait-------------- */
.div-alert {
  display: none;
  width: 100vw;
  height: 100vh;
  margin-top: 100px;
  content: "aaa";
  z-index: 20000;
  background-color: rgba(18, 18, 18, 0.95);
  align-items: center;
  border-radius: 20px;
  justify-content: center;
  position: fixed;
}

.div-alert img {
  width: auto;
  height: auto;
  max-width: 400px;
  max-height: 400px;
  margin: 20px auto;
  display: block;
  border-radius: 12px;
  box-shadow: -21px 17px 22px -9px rgba(97, 97, 97, 0.69);
  -webkit-box-shadow: -21px 17px 22px -9px rgba(97, 97, 97, 0.69);
}

/* intercetto l'orientamento del dispositivo e applico le regole css per il portrait */
@media screen and (orientation: portrait) {
  .div-alert {
    display: block;
  }
}

.main {
    padding: 20px;
  }

  .div-fisso {
    padding: 10px;
  }