body{
  /* Definizione dello sfondo */

background-color:silver;
color:blue;
font-family:"Times New Roman";
font-size: 15px;
text-align: left;
}
/*DEFINIZIONE DEL TAG OPTION */
option {
  background-color:white;
  color:blue;
  font-size:18px;
  font-family:"Times New Roman";
  font-style: oblique;
}

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

/*DEFINIZIONE DELLO STILE DI UN PARAGRAFO */
p {background-color:white;
font-family:"Times New Roman";
font-size:20px;
color:blue;}

/* NON FAR APPARIRE I CASI ALL?INIZIO */
[id^="caso"] {
  display: none;
}

/*Definizioni sfera finale ELETTRONE */
.sfera_elettrone{
  fill:red;
  opacity:0.8;
}
.sfera_positrone{
  fill:blue;
  opacity:0.8;
}
.orbita_after_annc_elettr{
  transform-origin: 200px 200px;
  animation: ruota_finale_elettrone 4s linear infinite;
}

.orbita_after_annc_posit{
  transform-origin: 200px 200px;
  animation: ruota_finale_positrone 4s linear infinite;
}

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

@keyframes ruota_finale_positrone {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}


.sfera_positrone{
  fill:blue;
  opacity:0.8;
}

/* DEFINIZIONE DELLA PRIMA SFERETTA */
.sfera {
  fill:red;
  opacity:0.8;
}

.sfera2{
  fill:blue;
  opacity:0.9;
}

/*dedinizione dell'area di animazione */
svg {
  overflow: hidden;
  background-color: #f9f9f9;
  border: 2px solid #aaa;
  width: 800px;
  height: 400px;
  background: #eee; /* solo per vedere l'area */
}

/*definizione rotazione 1 */
@keyframes rotazione1 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Rotazione 1 */
.orbita1 {
  animation: rotazione1 4s linear infinite;
  transform-origin: 150px 150px;
}
/*Definizione rotazione2 */
@keyframes rotazione2 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
/* Rotazione antioraria */
.orbita2 {
  animation: rotazione2 4s linear infinite;
  transform-origin: 450px 150px;
}

.orbita3{
  animation:rotazione2 4s linear infinite;
  transform-origin: 150px 150px;
}
#annichilazione circle {
  transition: all 0.2s ease-in-out;
}

#orbita_comune {
  transform-origin: 300px 150px;
  animation: rotazioneFotone 2s linear infinite;
  display: none;
}

@keyframes rotazioneFotone {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
#orbita_fotone_1,
#orbita_fotone_2 {
  transform-origin: 300px 150px;
  display: none;
}

#orbita_fotone_1 {
  animation: rotazione_oraria 2s linear infinite;
}

#orbita_fotone_2 {
  animation: rotazione_antioraria 2s linear infinite;
}

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

@keyframes rotazione_antioraria {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
#orbita_fotone_1,
#orbita_fotone_2 {
  transform-origin: 300px 150px;
  display: none;
}

/* PATCH: Stile per il canvas del caso 3 */
#caso3 svg {
  width: 400px;
  height: 400px;
  overflow: hidden;
  background-color: #f9f9f9;
  border: 2px solid #999;
}