body {
  background-color: silver;
  font-family: "Times New Roman";
  font-size: 15px;
  color: blue;
}


.sfera {
  fill:red;
}

.orbita{
  transform-origin: 150px 150px;
  animation: ruota 4s linear infinite;
}

@keyframes ruota{

  from { transform: rotate(0deg);}
  to   {transform: rotate(360deg);}
  }









[id^="caso"] {
  display: none;
}

p {
  background-color: white;
  font-family: "Times New Roman";
  font-size: 18px;
  color: blue;
}

p2{
  background-color:white;
  color:red;
  font-family: "arial";
  font-size:18px;
}

input {
  background-color: white;  /* <-- corretto da 'bachgroung-color' */
  font-family: "Times New Roman";
  font-style:"normal"; /* <-- togli le virgolette */
  color:BLUE;
}

span {
  background-color: white; /* <-- togli le virgolette */
  color: red;
  font-family: "Times New Roman";
  font-size: 24px;
}

option {
  background-color:"silver";
  color:blue;
  font-family:"Times New Roman";
  font-size:18px;
}

select {
  background-color: white;
  color:blue;
  font-family:"Times New Roman";
  font-size:18px;
}

div {
  background-color: white;
  font-family: "Times New Roman";
  font-size:18px;
  color:BLUE;
}

/* definizione sfera 3 */
.sfera3 {
  fill:BLUE;
}

/* definizione sfera 4 */
.sfera4{
  fill:blue;
}

/* DEFINIZIONE ORBITA DELLA SFERA 3 */
.orbita3{
  transform-origin: 150px 150px;
  animation: ruota3 1s linear infinite;
}

.orbita4{
  transform-origin: 450px 150px;
  animation: ruota4 4s linear infinite;
}

/*DEFINIZIONE ANIMAZIONE RUOTA3 */
@Keyframes ruota3 {
  from{
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}

@Keyframes ruota4 {
  from{
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}