@import url("https://fonts.googleapis.com/css2?family=Quicksand&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  background-image: radial-gradient(#bb9927, #634a1a);
}

/* Abbiamo bisogno che l'header stia insieme ai cerchi */
header {
  position: relative !important;
}

main .container {
  /* In modo che le tre immagini siano centrate */
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 95%;
  height: 100%;
  margin: auto;
}

main .box {
  /* Usato per mantenere il testo all'interno del cerchio */
  position: relative;

  width: 32%;
  height: auto;

  /* Rende immagina grigia */
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

main .box:nth-child(3) {
  margin-right: 0;
}

main .box img {
  width: 100%;
  height: auto;

  /* Fare l'immagine rotonda */
  border-radius: 100%;
  box-shadow: 3px 3px 10px 2px rgba(0, 0, 0, 0.8);
}

main .overlay {
  /* Centrare l'overlay nello sfondo dell'immagine */
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;

  /* Far comparire e sparire il testo */
  opacity: 0;
  transition: opacity 0.25s;

  /* Piccola sfuocatura */
  backdrop-filter: blur(2px);

  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
}

/* Al tocco del mouse appare l'overlay */
main .overlay:hover {
  opacity: 1;
}

main .title {
  text-align: center;
  margin: auto;
}

main .title h2 {
  font: bold 32px "Quicksand";
}

main .title p {
  font: 400 17px "Quicksand";
  padding: 5% 15%;
}

.title a{
  color: #ffffff;
}

/* Modifica visuale per telefono */
@media only screen and (max-width: 435px) {
  html,
  body {
    overflow: auto;
  }

  main .container {
    display: inline-table;
    width: 100%;
  }

  main .box {
    width: 80%;
    margin: 30px auto;
  }

  main .box:nth-child(3) {
    margin: 30px auto;
  }

  main .title h2 {
    font: bold 20px "Quicksand";
  }

  main .title p {
    font: 400 15px "Quicksand";
    padding: 5%;
  }
}

@media only screen and (max-width: 322px) {
  main .box {
    width: 95%;
  }

  main .title h2 {
    font: bold 19px "Quicksand";
  }

  main .title p {
    font: 400 14px "Quicksand";
    padding: 3%;
  }
}