html {
  height:100%;
  width:100%;
}

body {
  background: #000000;
  filter:grayscale(1%);

}

.day {
  background: url('../img/landscape-1844227_640.png');
  min-height:100%;
  transition: opacity 1.000s ease-in-out; /* Regola Standard */
  -ms-transition: opacity 1.000s ease-in-out; /* Internet Explorer */
  -moz-transition: opacity 1.000s ease-in-out; /* Firefox */
  -webkit-transition: opacity 1.000s ease-in-out;/* Safari e Chrome*/
  -o-transition: opacity 1.000s ease-in-out; /* Opera */
  filter: grayscale(1%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.night {
  background: url('../img/landscape-1844226_640.png');
  min-height:100%;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  transition: opacity 1.000s ease-in-out; /* Regola Standard */
  -ms-transition: opacity 1.000s ease-in-out; /* Internet Explorer */
  -moz-transition: opacity 1.000s ease-in-out; /* Firefox */
  -webkit-transition: opacity 1.000s ease-in-out;/* Safari e Chrome*/
  -o-transition: opacity 1.000s ease-in-out; /* Opera */
  filter: grayscale(1%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.transparent {
    opacity:0;
}

.clock {
  border-radius: 50%;
  background: url('../img/clock-face-black.png') no-repeat center;
  background-size: 100vw;
  height: 80vh;
  width: 80vh;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  transition: background 1s ease;
  -webkit-transition: background 1s ease;
  -moz-transition: background 1s ease;
  -o-transitio: background 1s ease;
}

.clock::after {
  background: #000;
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Regola Standard */
  -ms-transform: translate(-50%, -50%); /* Internet Explorer */
  -moz-transform: translate(-50%, -50%); /* Firefox */
  -webkit-transform: translate(-50%, -50%);/* Safari e Chrome*/
  -o-transform: translate(-50%, -50%); /* Opera */


  width: 5%;
  height: 5%;
  z-index: 10;
}

.hours,
.minutes,
.seconds {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
}

.hour-hand {
  background: #000;
  height: 20%;
  width: 1.5%;
  top: 30%;
  left: 49.25%;
  position: absolute;
  transform-origin: 50% 100%;
  z-index: 2;
}

.transform {
  -moz-transition: all 1s linear;
  -webkit-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}
.minute-hand {
  background: #000;
  height: 40%;
  width: 1.5%;
  top: 10%;
  left: 49.25%;
  position: absolute;
  transform-origin: 50% 100%;
  z-index: 1;
}

.second-hand {
  background: #ff3c41;
  height: 45%;
  width: 1%;
  top: 5%;
  left: 49.5%;
  position: absolute;
  transform-origin: 50% 100%;
  z-index: 3;
}

.timeChange-container {
  position:fixed;
  top:10px;
  left:30px;
}
.timeChange{
  margin-top:10px;
  margin-right:10px;
}

.setTime {
  font-size: 2.7em;
  line-height:0.5;
  position:relative;
  z-index:-1;
}

.setAmPm {
  position:relative;
  margin-top:-27px;
  right:-175px;
}

#downAdjust {
  margin-top:-13px;
}

.minUp, .minDown, .hourUp, .hourDown {
  font-size:2em;
}

.minUp, .minDown {
  margin-left:4px;
}


@media screen and (max-width:1200px) {
  .clock {
    background-size: 100vw;
    height:55vw;
    width: 55vw;
}

@media screen and (max-width:740px) {
  .clock {
    background-size: 100vw;
    height: 70vw;
    width: 70vw;
    top: unset;
    bottom:10%;
  }
  .sunButtons, .timeChange-buttons {
    position:inherit;
    top:0;
    left:0;
    right:0;
    justify-content: center;
  }

  .timeChange-buttons {
    top:105px;
  }
}