body{background-color:#ffd9b3;
}

body {
    background-image: url(https://www.grandeportale.com/blog/wp-content/uploads/2018/01/Ritardo-aereo.jpg); /* Aggiungi l'URL dell'immagine */
    background-size: cover; /* L'immagine copre tutta l'area disponibile */
    background-position: center; /* Centra l'immagine */
    background-attachment: fixed; /* Fissa l'immagine durante lo scorrimento della pagina */
    margin: 0; /* Rimuove margini predefiniti */
    padding: 0; /* Rimuove il padding predefinito */
}

.banner-circolare {
      width: 70px; /* Larghezza del cerchio */
      height: 70px; /* Altezza del cerchio */
      background-image: url(https://static.vecteezy.com/system/resources/previews/011/571/446/original/circle-flag-of-usa-free-png.png); /* URL 
dell'immagine di sfondo */
      background-size: cover; /* L'immagine copre completamente l'area 
del cerchio */
      background-position: center; /* Centra l'immagine nel cerchio */
      border-radius: 50%; /* Rende l'elemento circolare */
      display: flex; /* Usa Flexbox per centrare il contenuto */
      justify-content: center; /* Centra orizzontalmente */
      color: black; /* Colore del testo */
      font-size: 20px; /* Dimensione del testo */
      text-align: center; /* Allineamento del testo */
      font-weight: bold; /* Rende il testo in grassetto */
      align-items: flex-end;
      font-family: "Courier New", Courier, monospace;
      word-spacing: -3px;
      position:fixed;
      bottom: 355px;
      right: 455px;
      z-index:1;
      cursor: pointer;
    }
.banner-circolare-2 {
      width: 70px; /* Larghezza del cerchio del secondo banner */
      height: 70px; /* Altezza del cerchio */
      background-image: url(https://e7.pngegg.com/pngimages/597/1022/png-clipart-flag-of-spain-graphy-allergy-miscellaneous-flag.png);
      background-size: cover;
      background-position: center; 
      border-radius: 50%;
      display: flex; /* Usa Flexbox per centrare il contenuto */
      justify-content: center; /* Centra orizzontalmente */
      align-items: center; /* Centra verticalmente */
      position:fixed;
      bottom: 430px;
      right: 390px;
      z-index:1;
      cursor: pointer;
}

.banner-circolare-3{
	width:70px;
	height:70px;
	background-image:url(https://tesoropargo.aytolalaguna.es/wp-content/uploads/2021/09/2-1.png);
	background-size:cover;
	background-position:center;
	border-radius:50%;
	display:flex;
	justify-content:center;
        position: fixed;
        bottom:475px;
        right:300px;
        z-index:1;
	cursor: pointer;
}

.banner-circolare-4{
	width:70px;
	height:70px;
	background-image:url(https://flagcdn.com/w2560/lu.jpg);
	background-size:cover;
	background-position:center;
	border-radius:50%;
	display:flex;
	justify-content:center;
        position:fixed;
	bottom:120px;
        right:450px;
	z-index:1;
	cursor: pointer;
}
.banner-circolare-5{
	width:70px;
	height:70px;
	background-image:url(https://www.buscopng.com/wp-content/uploads/2020/09/Bandera-circular-de-Francia.png);
	background-size:cover;
	background-position:center;
	border-radius:50%;
	display:flex;
	justify-content:center;
	position:fixed;
	bottom: 45px;
	right: 385px;
	z-index:1;
	cursor: pointer;
}


.banner-circolare-angolo{
	 width: 500px; /* Larghezza del cerchio */
      height: 500px; /* Altezza del cerchio */
      background-color: rgba(255,217,179,0.5); /* Colore di sfondo */
      color: white; /* Colore del testo */
      display: flex; /* Usa Flexbox per centrare il testo */
      justify-content: center; /* Centra orizzontalmente */
      align-items: center; /* Centra verticalmente */
      font-size: 20px; /* Dimensione del testo */
      font-weight: bold; /* Grassetto */
      border-radius: 50%; /* Rende l'elemento circolare */
      position: fixed; /* Posizione fissa */
      bottom: 20px; /* Posiziona il banner in basso */
      right: 20px;                 /* Posiziona il banner a destra */
      font-style: italic;
}

.button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  background-color: rgba(0, 0, 0, 0.5); /* Sfondo semitrasparente per il 
bottone */
  color: white;
  cursor: pointer;
  border-radius: 5px;
  position: absolute;
}
.button:hover {
  background-color: rgba(0, 0, 0, 0.7); /* Cambia colore al passaggio 
del mouse */
}