:root {
  --color-1:black;
  --color-2: white;
  --color-3: #253551;
  --shadow: 0 1px 5px 3px grey;
  --font-regular: 1.2rem;
  --font-big: 2rem;
  --font-small: 0.5rem;
}
/* Generic elements */
* { 
  box-sizing: border-box;
}
html {
  font-family: "Source Code Pro", Arial, Helvetica, sans-serif;
  color: var(--color-1);
  scroll-behavior: smooth;
  max-width: 1920px;
}
h2, h3 {
    text-align: center;
}
h1, h2 {
    font-size: var(--font-big);
}
h3 {
    font-size: 1.8rem;;
}
a {
    color: var(--color-3);
}
img {
    max-width: 100vw;
    max-height: 100vh;
    box-shadow: var(--shadow);
}
p {
    font-size: var(--font-regular);
    padding: 1rem;
}
/* Classes */ 
.box-center-cols {
    grid-column: 2 / 4;
    justify-items: center;
    max-width: 900px;
}
.box-full-width {
    grid-column: 1 / 5;
}
.box-wide-text {
    background: var(--color-3);
    color: var(--color-2);
    grid-column: 1 / 5;
    text-align: center;
}
.box-wide-text p {
    font-size: var(--font-big);
    padding: 1rem;
}
.box-text-with-image {
    align-items: center;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column: 1 / 5;
}
.button {
    background: var(--color-3);
    border: 1px solid var(--color-2);
    color: var(--color-2);
    font-size: var(--font-big);
    padding: 1rem;
    text-decoration: none;
}
.button:hover {
    background: var(--color-2);
    color: var(--color-3);
}
.go-to-top {
    grid-column: 1 / 5;
    text-align: center;
}
.ul-font {
    font-size: var(--font-regular);
}
.wrapper {
    display: grid;
    /* grid-template-columns: 1fr; */
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem 0;
    padding: 0 2rem;
}
/* IDs */
#top {
    align-items: center;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    padding: 0 2rem;
    /* 4 cols layout */
    grid-column: 1 / 5;
}
#top a:link {
    text-decoration: none;
    color: var(--color-1);
}
#top a:hover {
    text-decoration: underline;
    color: var(--color-1);
}
#language {
    grid-column: 4 / 5;
    text-align: right;
}
#nav ul {
    align-items: stretch;
    display: grid;
    font-size: var(--font-small);
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    justify-items: center;
    padding: 0;
    text-align: center;
}
#nav {
    grid-column: 2 / 5;
}
#nav ul li{
    list-style: none;
}
/* Menu with background image */
#home-cover {
    grid-column: 1 / 5;
    height: 100vh;
    background: url("../immagini/home/bancone.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#home-cover ul {
    list-style: none;
    font-size: 3rem;
    padding: 10vw;
}
#home-cover ul li{
    padding: 1rem;
}
#home-cover a:link {
    background: var(--color-2);
    color: var(--color-3);
    padding: 0.5rem;
}
#home-cover a:hover {
    background: var(--color-3);
    color: var(--color-2);
    text-decoration: none;
}

/* Wide image */
#box-cover-sopressa {
    background: url("../immagini/home/sopressa.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    grid-column: 1 / 5;
    height: 50vh;
}
#footer {
    align-items: center;
    display: grid;
    gap: 2rem;
    grid-column: 1 / 5;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
#footer p {
    font-size: 1rem;
    padding: 0 1rem;
}
#footer-web {
    grid-column: 1 / 5;
    text-align: center;
    max-width: 100vw;
}
#footer-web p {
    font-size: var(--font-small);
}
/* Responsive */
@media(max-width: 768px) {
    #home-cover, .box-text-with-image, #box-cover-sopressa, #footer-web {
        grid-template-columns: 1fr;
        height: auto;
    }
    #top {
        grid-template-columns: 1fr;
    }
    #nav {grid-column: 1;}
    #nav ul li{
        border: 1px solid var(--color-3);
        border-collapse: collapse;
        margin-bottom: 0.5rem;
        padding: 0.5rem;
        width: 100%;
    }
    #language {
        grid-column: 1;
        text-align: center;
    }
    .wrapper {
        grid-template-columns: 1fr;
    }
}
@media(max-width: 320px) {
    * {
        font-size: 1rem;
        text-align: center;
    }
    h2 {font-size: 1rem;}
    p, .box-wide-text p{
        font-size: 1rem;
    }
    #top {
        grid-template-columns: 1fr;
    }
    #nav ul li{
        border: 1px solid var(--color-3);
        border-collapse: collapse;
        grid-column-start: 1;
        margin-bottom: 0.5rem;
        padding: 0.5rem;
        width: 100%;
    }
    #home-cover, .box-text-with-image, #box-cover-sopressa, #footer {
        grid-template-columns: 1fr;
        height: auto;
    }
    .button {
        font-size: 1rem;
    }
    .wrapper, .wrapper-center {
        padding: 0;
    }
}

/* Slideshow animation */
.slideshow {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.immagini-2 {
    width: 200%;
    animation: cambia-immagine-2 10s infinite;
}
.immagine-1-su-2 {
    float:left;
    height: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.immagine-1-su-2 {
    width: 50%;
}
/* Slideshow 10 immagini */
.immagini-10 {
    width: 1000%;
    animation: cambia-immagine-10 60s infinite;
}
.immagine-1-su-10 {
    float: left;
    height: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.immagine-1-su-10 {
    width: 10%;
}
@keyframes cambia-immagine-2{
  0% {margin-left:0%;}
  50% {margin-left:-100%;}
  100% {margin-left:0%;}
}
@keyframes cambia-immagine-10{
    0% {margin-left:0%;}
    10% {margin-left:-100%;}
    20% {margin-left:-200%;}
    30% {margin-left:-300%;}
    40% {margin-left:-400%;}
    50% {margin-left:-500%;}
    60% {margin-left:-600%;}
    70% {margin-left:-700%;}
    80% {margin-left:-800%;}
    90% {margin-left:-900%;}
    100% {margin-left:0%;}
}

/* Pagina contatti*/
.wrapper-contatti {
  display: grid;
  gap: 1rem;
  grid-column: 1 / 5;
  grid-template-columns: repeat(3, 1fr);
}
.box {
  background: white;
  box-shadow: var(--shadow);
  padding: 1rem;
}
.box-telefono, .box-email, .box-orari, .box-indirizzo, .box-mappa {
  font-size: 2rem;
  text-align: center;
}
.box-mappa {
  display: grid;
  gap: 1rem;
  grid-column: 1 / span 3;
  grid-template-columns: repeat(2, 1fr);
}
@media(max-width: 580px){
  .wrapper-contatti, .terapie-foto, .box-mappa {
    grid-template-columns: 1fr;
    gap: 1rem 0;
  }
  .nav-menu a {
    font-size: 1rem;
  }
  .box, .nav-menu, .box-telefono, .box-email, .box-orari, .box-indirizzo, .box-mappa {
    font-size: 1rem;
    grid-column-start: 1;
  }
  iframe {
    width: 100%;
  }
}

/* GDPR */
#gdpr {
  background: white;
  border: 1px solid black;
  bottom: 0;
  left: 0;
  position: fixed;
  text-align: center;
  width: 100vw;
}
#gdpr p {
  font-size: 1rem;
}
#gdpr-button {
    background: var(--color-3);
    color: var(--color-2);
    padding: 1rem;
}