span {font-size: 30 ; font-family:"arial" ; font-weight: normal; color:black;}
input {text-align: center; font-weight: 1000; font-family:"arial" ; font-size:16px;
background-color: white; color:red;
 }
 .btn {width: auto ; font-size:80%; color:red;
 }

 body {background-color: silver;}
 p {font-size:18px; font-family:"arial"; font-weight: 500; color:blue;
background-color: white;
 }

 p1 {font-size: 18px; font-family: "arial" ; color:blue; background-color: white; font-weight: bold;}
 p2 {font-size:18px; font-family:"arial"; font-weight: 500; color:red;
  background-color: white;
 }
 select {font-size: 18px; font-family: "arial" ; color:white; background-color: blue; font-weight: bold;}
 .vortex {
   width: 120px;
   height: 120px;
   border: 2px dashed #555;
   border-radius: 50%;
   animation: rotate 3s linear infinite;
   margin: 20px auto;
 }

 @keyframes rotate {
   from {transform: rotate(0deg);}
   to {transform: rotate(360deg);}
 }
 #caso8 {
   text-align: left;       /* Testo allineato a sinistra */
   margin: 0 auto;         /* Centro il blocco ma non il testo */
   padding: 20px;
 }
 #caso9 {
   display: none;
   text-align: left;
   margin: 20px;
 }

 .magnet-container {
   display: flex;
   gap: 40px;
   align-items: center;
   justify-content: center;
   margin: 30px 0;
 }

 .magnet {
   width: 60px;
   height: 150px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   border: 2px solid black;
   border-radius: 8px;
   overflow: hidden;
   background-color: #f0f0f0;
   transition: transform 2s ease;
 }

 .pole {
   height: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-weight: bold;
   font-size: 20px;
   color: white;
 }

 .north {
   background-color: red;
 }

 .south {
   background-color: blue;
 }

 .rotate-180 {
   transform: rotate(180deg);
 }
 svg {
   display: block;
   margin: 2em auto;
   background: #f9f9f9;
 }

 .rotazione-cw {
   transform-origin: 150px 150px;
   animation: rotazione-cw 4s linear infinite;
 }

 .rotazione-ccw {
   transform-origin: 150px 150px;
   animation: rotazione-ccw 4s linear infinite;
 }

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

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