:root {
  --mainGreen: #429f2a;
  --mainBlue: #004393;
  --lightBlue: #cfd8dc;
}

@keyframes fadeOut {
  to {
    border-color: transparent;
  }
}

.container-certificati {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70vh;
  margin-top: 10vh;
}

/* Stili comuni per i bottoni */
.download-button {
  display: block;
  width: 100%;
  max-width: 300px;
  height: 300px;
  padding: 20px;
  text-align: center;
  background-color: var(--mainBlue);
  color: var(--lightBlue);
  border: 5px solid var(--lightBlue);
  border-radius: 10px;
  font-size: 18px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.4s ease-in-out;
}

.scritteVuote {
  font-size: 0.2em;
}

.i1 {
  background-image: url("../img/certificati/i1.png");
}
.i2 {
  background-image: url("../img/certificati/i2.png");
}
.i3 {
  background-image: url("../img/certificati/i3.png");
}
.i4 {
  background-image: url("../img/certificati/i4.png");
}
.i5 {
  background-image: url("../img/certificati/i5.png");
}

.i1,
.i2,
.i3,
.i4,
.i5 {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: white;
}

@media screen and (orientation: landscape) and (max-height: 600px) {
  .container-certificati {
    height: 150vh;
  }
}

/* Stili quando il mouse è sopra il pulsante */
.download-button:hover {
  background-color: rgba(207, 216, 220, 0.3);
  transform: scale(1.1); /* Effetto di zoom su hover */
  border: 0px;
}