:root {
/*Hue:   0 is red, 120 is green, 240 is blue   */

--body-bg-color:    hsl(0, 15%, 40%);
--main-bg-color:    hsl(0, 15%, 60%);
--article-bg-color: hsl(0, 15%, 80%);
--border-color:     hsl(0, 15%, 20%);

--body-bg-color:    hsl(120, 15%, 40%);
--main-bg-color:    hsl(120, 15%, 60%);
--article-bg-color: hsl(120, 15%, 80%);
--border-color:     hsl(120, 15%, 20%);

--body-bg-color:    hsl(210, 15%, 40%);
--main-bg-color:    hsl(210, 15%, 60%);
--article-bg-color: hsl(210, 15%, 80%);
--border-color:     hsl(210, 15%, 20%);

}
* {
     -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
body {background-color: var(--body-bg-color);}

main{background-color: var(--main-bg-color);  margin:auto;}

.container {
  height: 100%;
  margin:0%;
  border: 1px solid var(--border-color);
}
.container > article {
  -webkit-box-shadow: inset 0px 0px 55px 15px rgba(255,255,255,0.1);
          box-shadow: inset 0px 0px 55px 15px rgba(255,255,255,0.1);
  background-color: var(--article-bg-color);background-color: transparent;
/*  */
  margin: 0px auto;overflow: hidden;
}
.container > article > img {
  height: 95%;/*   img + div = 100%    */
  width:100%;
  object-fit: contain;
  transition-duration: 1s;
  transition-timing-function: linear;
  
}
.container > article > img:hover {
  transform: scale(1.0);
  position:relative;
  cursor: zoom-in;
}
.container > article > div {
  height: 5%;/*   img + div = 100%    */
  width:100%;
  margin:auto;
  color: black;
  Xbackground-color:rgba(0,0,0,0.1);
  text-align: center;
  font-size:1vw;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color:var(--article-bg-color);color:navy;
  background-image:  url("../images/sfondo2.gif");
  font-weight: bold;
  font-size: 28px;
  transition: 0.6s ease;
  border-radius: 10%;
  -webkit-user-select: none; /* Safari */
  -ms-user-select:     none; /* IE 10 and IE 11 */
  user-select:         none; /* Standard syntax */
}
/* Position the "next button" to the right */
.next {
  right: 0;
  xborder-radius: 5px;
}
/* On hover, add a background color */
.prev:hover, .next:hover {
  color:var(--body-bg-color);color:yellow;
  background-image:  url("../images/sfondo3.gif");
  xborder-radius: 0 5px 5px 0;
  border-color: var(--main-bg-color);
  border-style: solid;
  border-width: 3px 0 0 0; /*0px top and bottom, 10px on the sides */
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color:  var(--main-bg-color);
  border-radius: 50%;
  border: 1px solid gray;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: var(--article-bg-color);background-image:  url("../images/blu3.png");
  border: 1px solid black;
}