li {
      margin-right: 25px; /* Adds 25px space to the right of each item */
      /* Or use margin-left if preferred for spacing on the left */
}

ul {
      list-style: none; /* Removes default bullet points */
      display: flex; /* Arranges items horizontally */
}


.multiverse {
overflow-x: hidden;
}





/* Individual Card */
.ind_card {
 -- flex: 0 0 200px; /* Card width */
  --height: 200px;
  --background: linear-gradient(135deg, #6e45e2, #88d3ce);
  background: linear-gradient(135deg, #ffffff, #ffffff);
  color: #05014A;
  font-size: 2rem;
  --display: flex;
  --align-items: center;
  justify-content: center;
  --scroll-snap-align: start;
  --border-radius: 10px;
  border-radius: 50%;
}
.ind_card:hover + .hide {
  display: block;
  color: white;
}

 

 

/* Navigation Buttons */
button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
}

.prev-btn { left: 10px; }
.next-btn { right: 10px; }

 p {
      color: red;
      font-size: 1.2em;
      font-family: 'Courier New', sans-serif;
    }
 .nav-links {
    display: flex; 
    gap: 200px; 
    list-style: none; 
    }
 /*
.nav-links.active {
    display: block;
  }

    .nav-links > li {
      position: relative;
    }

    .nav-links a {
      text-decoration: none;
      color: #E5B80B; /* 007BFF   C14A09 */
      font-size: 1rem;
      padding: 1px;
      display: inline-block;
      transition: color 1s;
    }

    .nav-links a:hover {
      color: #B3D9BE;
    }
 */ 

  /* Image Container */
    .image-container {
        position: relative;
        display: inline-block;
        cursor: pointer;
    }

    /* Tooltip Image Container */
    .tooltip-image {
        visibility: hidden;
        position: absolute;
        top: 0;
        left: 110%;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        opacity: 0;
        transition: visibility 0.3s, opacity 0.3s;
    }

    /* Tooltip Image Styles */
    .tooltip-image img {
        width: 300px;
        border-radius: 5px;
    }

    /* Show Tooltip on Click */
    .image-container.clicked .tooltip-image {
        visibility: visible;
        opacity: 1;
    }
  
  
    .btn-light-cyan {
      background-color: #E0F7FA;
      /* Light cyan color */
      color: black;
      /* Text color */
      padding: 6px 12px;
      /* Adjust padding */
      border: none;
      border-radius: 4px;
      /* Optional: round the corners */
      text-align: center;
      text-decoration: none;
      /* Remove underline */
      margin: 5px;
      /* Space between buttons */
    }

    .btn {
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
      border-radius: 4px;
    }

    .btn-green {
      background-color: #6B8E23;
      /* green */
      color: white;
      /* Text color */
    }

    .btn-copper {
      background-color: #b87333;
      color: white;
    }



    .btn-olive {
      background-color: #206027;
      color: white;
    }


    .btn-dark {
      background-color: #343a40;
      color: white;
    }

    .card-body {
      background-color: #5a295a
      position: relative;
      /* Ensure it can be positioned above other elements */
      z-index: 8000;
      /* Higher than other elements to bring it to the front */
      background-color: white;
      /* Add a background to ensure visibility */
    }

    btn-purple {
      background-color: #6A5ACD;
      /* Slate blue */
    }

    .btn-brown {
      background-color: #A0522D;
      /* Sienna - Medium brown */
    }

    //.btn-brown {
    //  background-color: #8B4513; /* Saddle brown */
    //}

    .btn-green {
      background-color: #6B8E23;
      /* army green */
    }

    .btn-violet {
      background-color: #7B68EE;
      /* Medium slate blue */
      color: white;
      /* Text color */

    }

    .btn-blue {
      background-color: #4682B4;
      /* Steel Blue: not too bright, not too dull */
      padding: 6px 12px;
      /* Adjust padding for a clean appearance */
      color: white;
      /* Text color */
      border-radius: 4px;
      /* Rounded corners */
    }



    .btn-crimson {
      background-color: #DC143C;
      /* Crimson */
      padding: 6px 12px;
      border-radius: 4px;
      color: white;
    }

    .card {
      background-color: #5a295a
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 10px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
      text-align: center;
    }
   


    #overlayImage {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Cover the entire viewport */
      z-index: 1000;
      /* Ensure it's above all other content */
      opacity: 1;
      /* Start fully opaque */
     /* background: url('/images/BackgroundImage-0and1-beads.jpeg') no-repeat center center; */
      background-size: cover;
      /* Ensure the image covers the viewport */
    }

    @keyframes fadeOut {
      from {
        opacity: 1;
      }

      to {
        opacity: 0;
      }
    }

    .fade {
      animation: fadeOut 12s forwards;
    }

    .stencil-text {
      font-family: "Montserrat", sans-serif;
      font-size: 16px;
      font-weight: bold;
      color: #6B8E23;
      /* Olive Green */

    }

    button {
      color: #ffffff;
      -- background-color: #2dc8c5;
      background-color: #F6E7D3;

      font-size: 19px;
      border: 2px solid #2dc894;
      border-radius: 10px;
      padding: 15px 50px;
      cursor: pointer
    }

    button:hover {
      color: #f8fb13;
      background-color: #ec0909;
    }

.disabled-link {
  pointer-events: none;
}

.nkhome{
    margin-left:260px;
    top:170px;
    position:absolute;
    width:2px;
    height:2px;
}
.nkhome a img:hover {
    background:url("/images/enso_writing.png");
    position:absolute;
    top:0px;
}



.button1 {
  padding: 5px  5px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #050449;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #006400;
}



.button1:hover {background-color: #3e8e41}

.button1:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.button2 {
  padding: 5px  5px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #140B34;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #006400;
}

.button2:hover {background-color: #3e8e41}

.button2:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


.button3 {
  padding: 5px  5px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #2E0854;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #006400;
}

.button3:hover {background-color: #3e8e41}

.button3:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.button4 {
  padding: 5px  5px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #431B47;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #006400;
}

.button4:hover {background-color: #3e8e41}

.button4:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.button5 {
  padding: 5px  5px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #5A295A;
  border: none;
  border-radius: 100%;
  box-shadow: 0 5px #a19f9d;
}

.button5:hover {background-color: #d1b7a1; color:#000080}

.button5:active {
  background-color: #d1b7a1;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.button6 {
  padding: 5px 5px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #00076f;  /* #04AA6D; */
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #006400;
}

.button6:hover {background-color: #3e8e41}

.button6:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.sphere_registered_users {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 90%, #ffffff, #888888); 
  --background-image: url('/images/entropy/metaverse_01.png');
  background-image: url('/images/entropy/registrations.png');

  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
 
  
  display: flex;
  -- flex: 0 0 300px; /* Card width */
  */
  visibility: visible;
  opacity: 10;
  transform: scale(0.1) rotate(-45deg);  /* rotate(-45deg);  (400% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  animation-name: spin_sphere_registered_users;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function:cubic-bezier(0.42,0,0.58,1);  /* ease-in-out; Ensures continuous rotation. Other timings are linear, ease, ease in, ease out, ease-in-out, cubic-bezier(0,0,1,1);cubic-bezier(0.25,0.1,0.25,1); */
		 
  /*cubic-bezier(0.42,0,1,1);cubic-bezier(0,0,0.58,1);cubic-bezier(0.42,0,0.58,1);			 */



}
@keyframes spin_sphere_registered_users{
              from {
                   transform: scale(1.2) rotate(0deg); /*  rotate(0deg);    */
          
              }
              to {
                   transform: scale(1.0) rotate(360deg);  /* rotate(360deg);  */

              }
}

.sphere_registered_users:hover {
		visibility: visible;
                opacity: 10;

                 color: #fff;
		 transform: scale(1.0) rotate(-45deg);  /* rotate(-45deg);  (400% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
                 animation-name: spin_sphere_registered_users_hover;
                 animation-duration: 8s;
                 animation-iteration-count: 1;
                 animation-timing-function:cubic-bezier(0.42,0,0.58,1);  /* ease-in-out; Ensures continuous rotation. Other timings are linear, ease, ease in, ease out, ease-in-out, cubic-bezier(0,0,1,1);cubic-bezier(0.25,0.1,0.25,1); */
		 
                  /*cubic-bezier(0.42,0,1,1);cubic-bezier(0,0,0.58,1);cubic-bezier(0.42,0,0.58,1);			 */


	}

@keyframes spin_sphere_registered_users_hover{
              from {
                   transform: scale(2.0) rotate(0deg); /*  rotate(0deg);    */
          
              }
              to {
                   transform: scale(1.0) rotate(360deg);  /* rotate(360deg);  */

              }
}

.sphere_sanitation{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/sanitation_mini.png');
   color: blue;
  font-size: 1.2rem;
  font-weight: bold;

}
.sphere_sanitation:hover {
		visibility: visible;
                opacity: 10;

                 color: #fff;
		 transform: scale(1.0) rotate(-45deg);  /* rotate(-45deg);  (400% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
                 animation-name: spin_sphere_sanitation;
                 animation-duration: 2s;
                 animation-iteration-count: 1;
                 animation-timing-function:cubic-bezier(0.42,0,0.58,1);  /* ease-in-out; Ensures continuous rotation. Other timings are linear, ease, ease in, ease out, ease-in-out, cubic-bezier(0,0,1,1);cubic-bezier(0.25,0.1,0.25,1); */
		 
                  /*cubic-bezier(0.42,0,1,1);cubic-bezier(0,0,0.58,1);cubic-bezier(0.42,0,0.58,1);			 */


	}
@keyframes spin_sphere_sanitation{
              from {
                   transform: scale(1.0) rotate(0deg); /*  rotate(0deg);    */
          
              }
              to {
                   transform: scale(0.001) rotate(360deg);  /* rotate(360deg);  */

              }
}

.sphere_irrigation{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/irrigation_mini.png');
   color: black;
  font-size: 1.2rem;
  font-weight: bold;

}
.sphere_irrigation:hover {
		visibility: visible;
                opacity: 10;

                 color: #fff;
		 transform: scale(1.0) rotate(-45deg);  /* rotate(-45deg);  (400% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
                 animation-name: spin_sphere_irrigation;
                 animation-duration: 2s;
                 animation-iteration-count: 1;
                 animation-timing-function:cubic-bezier(0.42,0,0.58,1);  /* ease-in-out; Ensures continuous rotation. Other timings are linear, ease, ease in, ease out, ease-in-out, cubic-bezier(0,0,1,1);cubic-bezier(0.25,0.1,0.25,1); */
		 
                  /*cubic-bezier(0.42,0,1,1);cubic-bezier(0,0,0.58,1);cubic-bezier(0.42,0,0.58,1);			 */


	}
@keyframes spin_sphere_irrigation{
              from {
                   transform: scale(1.0) rotate(0deg); /*  rotate(0deg);    */
          
              }
              to {
                   transform: scale(0.001) rotate(360deg);  /* rotate(360deg);  */

              }
}


.sphere_interior_design{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/interior_design_mini.png');
   color: black;
  font-size: 1.2rem;
  font-weight: bold;

}

.sphere_interior_design:hover {
		visibility: visible;
                opacity: 10;

                 color: #fff;
		 transform: scale(1.0) rotate(-60deg);  /* rotate(-45deg);  (400% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
                 animation-name: spin_sphere_interior_design;
                 animation-duration: 2s;
                 animation-iteration-count: 1;
                 animation-timing-function:cubic-bezier(0.42,0,1,1);  /* ease-in-out; Ensures continuous rotation. Other timings are linear, ease, ease in, ease out, ease-in-out, cubic-bezier(0,0,1,1);cubic-bezier(0.25,0.1,0.25,1); */
		 
                  /*cubic-bezier(0.42,0,1,1);cubic-bezier(0,0,0.58,1);cubic-bezier(0.42,0,0.58,1);			 */


	}
@keyframes spin_sphere_interior_design{
              from {
                   transform: scale(1.0) rotate(0deg); /*  rotate(0deg);    */
          
              }
              to {
                   transform: scale(0.001) rotate(360deg);  /* rotate(360deg);  */

              }
}


.sphere_forest{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/forest_universe_mini.png');
  color: red;
  font-size: 1.2rem;
  opacity: 10;

}
.hide {
  display: none;
}

.sphere_forest:hover {
		visibility: visible;
                opacity: 10;

                 color: #fff;
		 transform: scale(1.0) rotate(-45deg);  /* rotate(-45deg);  (400% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
                 animation-name: spin_sphere_forest;
                 animation-duration: 2s;
                 animation-iteration-count: 1;
                 animation-timing-function:cubic-bezier(0.42,0,0.58,1);  /* ease-in-out; Ensures continuous rotation. Other timings are linear, ease, ease in, ease out, ease-in-out, cubic-bezier(0,0,1,1);cubic-bezier(0.25,0.1,0.25,1); */
		 
                  /*cubic-bezier(0.42,0,1,1);cubic-bezier(0,0,0.58,1);cubic-bezier(0.42,0,0.58,1);			 */


	}
@keyframes spin_sphere_forest{
              from {
                   transform: scale(1.0) rotate(0deg); /*  rotate(0deg);    */
          
              }
              to {
                   transform: scale(0.001) rotate(360deg);  /* rotate(360deg);  */

              }
}


.sphere_pollution{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/pollution_mini.png');
   color: black;
  font-size: 1.2rem;
  font-weight: bold;

}
.sphere_pollution:hover {
		visibility: visible;
                opacity: 10;

                 color: #fff;
		 transform: scale(1.0) rotate(-45deg);  /* rotate(-45deg);  (400% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
                 animation-name: spin_sphere_pollution;
                 animation-duration: 2s;
                 animation-iteration-count: 1;
                 animation-timing-function:cubic-bezier(0,0,0.58,1);  /* ease-in-out; Ensures continuous rotation. Other timings are linear, ease, ease in, ease out, ease-in-out, cubic-bezier(0,0,1,1);cubic-bezier(0.25,0.1,0.25,1); */
		 
                  /*cubic-bezier(0.42,0,1,1);cubic-bezier(0,0,0.58,1);cubic-bezier(0.42,0,0.58,1);			 */


	}
@keyframes spin_sphere_pollution{
              from {
                   transform: scale(1.0) rotate(0deg); /*  rotate(0deg);    */
          
              }
              to {
                   transform: scale(0.001) rotate(360deg);  /* rotate(360deg);  */

              }
}



.sphere_cyber_university{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/cyber_university_mini.png');
   color: black;
  font-size: 1.2rem;
  font-weight: bold;

}
.sphere_cyber_creative{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/cyber_creative_mini.png');
   color: black;
  font-size: 0.8rem;
  font-weight: bold;

}

.sphere_micro_university{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/metaverse.png');
  color: black;
  font-size: 1.2rem;
  font-weight: bold;

}
.sphere_comics{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/comics_universe_mini.png');
  color: white;
  font-size: 1.2rem;
  font-weight: bold;

}

.sphere_explorers{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/explorers_mini.png');
  color: black;
  font-size: 1.2rem;
  font-weight: bold;
  visibility: visible;
  opacity: 10;
  transform: scale(0.1) rotate(-45deg);  /* rotate(-45deg);  (400% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  animation-name: spin_sphere_explorers;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function:cubic-bezier(0.42,0,0.58,1);  /* ease-in-out; Ensures continuous rotation. Other timings are linear, ease, ease in, ease out, ease-in-out, cubic-bezier(0,0,1,1);cubic-bezier(0.25,0.1,0.25,1); */
		 
  /*cubic-bezier(0.42,0,1,1);cubic-bezier(0,0,0.58,1);cubic-bezier(0.42,0,0.58,1);			 */



}
@keyframes spin_sphere_explorers{
              from {
                   transform: scale(1.2) rotate(0deg); /*  rotate(0deg);    */
          
              }
              to {
                   transform: scale(1.0) rotate(360deg);  /* rotate(360deg);  */

              }
}

.sphere_explorers:hover {
		visibility: visible;
                opacity: 10;

                 color: #fff;
		 transform: scale(1.0) rotate(-45deg);  /* rotate(-45deg);  (400% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
                 animation-name: spin_sphere_explorers_hover;
                 animation-duration: 10s;
                 animation-iteration-count: 1;
                 animation-timing-function:cubic-bezier(0.42,0,0.58,1);  /* ease-in-out; Ensures continuous rotation. Other timings are linear, ease, ease in, ease out, ease-in-out, cubic-bezier(0,0,1,1);cubic-bezier(0.25,0.1,0.25,1); */
		 
                  /*cubic-bezier(0.42,0,1,1);cubic-bezier(0,0,0.58,1);cubic-bezier(0.42,0,0.58,1);			 */


	}

@keyframes spin_sphere_explorers_hover{
              from {
                   transform: scale(2.0) rotate(0deg); /*  rotate(0deg);    */
          
              }
              to {
                   transform: scale(1.0) rotate(360deg);  /* rotate(360deg);  */

              }
}


.sphere_inventions{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/inventions_mini.png');
  color: black;
  font-size: 1.2rem;
  font-weight: bold;

}

.sphere_calendar_banks{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/calendar_banks_mini.png');
  color: black;
  font-size: 1.2rem;
  font-weight: bold;

 visibility: visible;
  opacity: 10;
  transform: scale(0.1) rotate(-45deg);  /* rotate(-45deg);  (400% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  animation-name: spin_sphere_calendar_banks;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);  /* ease-in-out; Ensures continuous rotation. Other timings are linear, ease, ease in, ease out, ease-in-out, cubic-bezier(0,0,1,1);cubic-bezier(0.25,0.1,0.25,1); */
		 
  /*cubic-bezier(0.42,0,1,1);cubic-bezier(0,0,0.58,1);cubic-bezier(0.42,0,0.58,1);			 */



}
@keyframes spin_sphere_calendar_banks{
              from {
                   transform: scale(1.2) rotate(0deg); /*  rotate(0deg);    */
          
              }
              to {
                   transform: scale(1.0) rotate(360deg);  /* rotate(360deg);  */

              }
}

.sphere_calendar_banks:hover {
		visibility: visible;
                opacity: 10;

                 color: #fff;
		 transform: scale(1.0) rotate(-45deg);  /* rotate(-45deg);  (400% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
                 animation-name: spin_sphere_calendar_banks_hover;
                 animation-duration: 10s;
                 animation-iteration-count: 1;
                 animation-timing-function:cubic-bezier(0.42,0,0.58,1);  /* ease-in-out; Ensures continuous rotation. Other timings are linear, ease, ease in, ease out, ease-in-out, cubic-bezier(0,0,1,1);cubic-bezier(0.25,0.1,0.25,1); */
		 
                  /*cubic-bezier(0.42,0,1,1);cubic-bezier(0,0,0.58,1);cubic-bezier(0.42,0,0.58,1);			 */


	}

@keyframes spin_sphere_calendar_banks_hover{
              from {
                   transform: scale(2.0) rotate(0deg); /*  rotate(0deg);    */
          
              }
              to {
                   transform: scale(1.0) rotate(360deg);  /* rotate(360deg);  */

              }
}


.sphere_echoes{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/echoesofuniverse-mini.png');
  color: red;
  font-size: 1.2rem;

}
.sphere_trains{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/trains_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_flight_travel{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/flight_travel_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_satellites{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/satellites_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_shipping{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/shipping_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}
.sphere_united_nations{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/united_nations_universe_mini.png');
  color: blue;
  font-size: 1.2rem;

}
.sphere_philanthrophy{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/philanthrophy_universe_mini.png');
  color: white;
  font-size: 1.0rem;

}
.sphere_vlsi{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/vlsi_universe_mini.png');
  color: yellow;
  font-size: 1.4rem;

}
.sphere_welding{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/welding_universe_mini.png');
  color: yellow;
  font-size: 1.2rem;

}
.sphere_cnc{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/cnc_universe_mini.png');
  color: RED;
  font-size: 1.6rem;
  font-weight: bold;
}
.sphere_mathematicians{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/mathematicians_universe_mini.png');
  color: white;
  font-size: 0.9rem;

}
.sphere_chemists{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/chemists_universe_mini.png');
  color: black;
  font-size: 1.2rem;

}
.sphere_physicists{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/physicists_universe_mini.png');
  color: gold;
  font-size: 1.2rem;

}
.sphere_politicians{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/politicians_universe_mini.png');
  color: white;
  font-size: 1.0rem;

}



.sphere_economists{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/economists_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_enterpreneurs{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/enterpreneur_universe_mini.png');
  color: yellow;
  font-size: 0.8rem;

}

.sphere_singers{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/singers_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_musicians{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/musicians_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_authors{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/authors_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_photolithography{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/photolithography_universe_mini.png');
  color: white;
  font-size: 0.8rem;

}

.sphere_lithography{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/lithography_universe_mini.png');
  color: yellow;
  font-size: 1.0rem;

}


.sphere_photography{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/photography_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_toys{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/toys_universe_mini.png');
  color: white;
  font-size: 1.6rem;

}

.sphere_video_games{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/video_games_universe_mini.png');
  color: white;
  font-size: 0.8rem;

}

.sphere_fashion{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/fashion_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_plants{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/plants_universe_mini.png');
  color: yellow;
  font-size: 1.2rem;

}

.sphere_flowers{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/flowers_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_birds{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/birds_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_patents{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/patent_universe_mini.png');
  color: blue;
  font-size: 0.6rem;

}

.sphere_cultural_heritage{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/cultural_heritage_universe_mini.png');
  color: red;
  font-size: 0.8rem;

}

.sphere_ngs{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/ngs_universe_mini.png');
  color: red;
  font-size: 2.4rem;

}

.sphere_telesurgery{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/telesurgery_universe_mini.png');
  color: white;
  font-size: 1.0rem;

}

.sphere_quantum_computing{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/quantum_computing_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_culinary{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/culinary_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_view_quiz{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/view_quiz_universe_mini.png');
  color: red;
  font-size: 1.8rem;

}

.sphere_create_quiz{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/create_quiz_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_aic{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/aic_universe_mini.png');
  color: white;
  font-size: 1.6rem;

}

.sphere_rural{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/rural_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_quantum_teleportation{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/quantum_teleportation_universe_mini.png');
  color: blue;
  font-size: 0.8rem;

}

.sphere_ai{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/ai_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_iot{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/iot_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_3d_printing{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/3d_printing_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_machine_learning{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/machine_learning_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_predictive_analysis{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/predictive_analysis_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_5g{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/5g_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_crypto{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/crypto_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_nature{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/nature_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_cultural{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/cultural_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_textile{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/textile_01.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_real_estate{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/realestate_01.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_transport{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/transport_01.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_environmental{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/environmental_01.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_metallurgical{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/metallurgical_01.png');
  color: chrome;
  font-size: 1.2rem;

}

.sphere_chemical{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/chemical_01.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_dances{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/dances_01.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_art{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/art_universe_mini.png');
  color: yellow;
  font-size: 1.2rem;

}

.sphere_philosophy{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/philosophy_universe_mini.png');
  color: white;
  font-size: 1.2rem;

}

.sphere_tourism{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/tourism_universe_mini.png');
  color: green;
  font-size: 1.2rem;

}

.sphere_literary{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/literary_universe_mini.png');
  color: white;
  font-size: 1.2rem;

}

.sphere_student{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/student_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_women{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/women_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_men{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/men_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_robotic_surgery{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/robotic_surgery_universe_mini.png');
  color: red;
  font-size: 0.7rem;

}

.sphere_music{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/music_universe_mini.png');
  color: BLUE;
  font-size: 1.4rem;

}

.sphere_publishing{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/publishing_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_research{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/research_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_mining{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/mining_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_festive{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/festive_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_civilizational{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/civilizational_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_traditional{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/traditional_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_dental{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/dental_universe_mini.png');
  color: red;
  font-size: 1.2rem;

}

.sphere_universalism{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/universalism_universe_mini.png');
  color: gold;
  font-size: 1.2rem;

}

.sphere_humanity{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/humanity_universe_mini.png');
  color: gold;
  font-size: 1.2rem;

}

.sphere_democracy{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/democracy_mini.png');
  color: gold;
  font-size: 1.2rem;

}

.sphere_religion{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/religion_universe_mini.png');
  color: #05014A;
  font-size: 1.6rem;

}


.sphere_atheism{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/atheism_mini.png');
  color: red;
  font-size: 2rem;

}
.sphere_employment{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/employment_universe_mini.png');
  color: gold;
  font-size: 1.2rem;

}

.sphere_army{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/army_universe_mini.png');
  color: gold;
  font-size: 2rem;

}


.sphere_socialism{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/socialism_mini.png');
  color: #05014A;
  font-size: 1.6rem;
  font-weight: bold;

}

.sphere_capitalism{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/capitalism_mini.png');
  color: #05014A;
  font-size: 1.6rem;

}

.sphere_communism {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/communism_mini.png');
  color: #05014A;
  font-size: 1.6rem;

}

.sphere_computer {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  background-image: url('/images/computer_universe_mini.jpg');
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
 
  
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  display: flex;
  -- flex: 0 0 300px; /* Card width */
 */
   color: gold;
  font-size: 1.2rem;



}

.sphere_scientist {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  background-image: url('/images/scientist_universe_mini.png');
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
 
  
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  display: flex;
  -- flex: 0 0 300px; /* Card width */
 */

}

.sphere_homeworks {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  background-image: url('/images/Baby_Sri_Homeworks.png');
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
 
  
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  display: flex;
  -- flex: 0 0 300px; /* Card width */
 */
    color: gold;
    font-size: 1.0rem;
 visibility: visible;
  opacity: 10;
  transform: scale(0.1) rotate(-45deg);  /* rotate(-45deg);  (400% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  animation-name: spin_sphere_homeworks;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function:cubic-bezier(0.42,0,0.58,1);  /* ease-in-out; Ensures continuous rotation. Other timings are linear, ease, ease in, ease out, ease-in-out, cubic-bezier(0,0,1,1);cubic-bezier(0.25,0.1,0.25,1); */
		 
  /*cubic-bezier(0.42,0,1,1);cubic-bezier(0,0,0.58,1);cubic-bezier(0.42,0,0.58,1);			 */



}
@keyframes spin_sphere_homeworks{
              from {
                   transform: scale(1.2) rotate(0deg); /*  rotate(0deg);    */
          
              }
              to {
                   transform: scale(1.0) rotate(360deg);  /* rotate(360deg);  */

              }
}

.sphere_homeworks:hover {
		visibility: visible;
                 opacity: 10;

                 color: #fff;
		 transform: scale(1.0) rotate(-45deg);  /* rotate(-45deg);  (400% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
                 animation-name: spin_sphere_homeworks_hover;
                 animation-duration: 8s;
                 animation-iteration-count: 1;
                 animation-timing-function:cubic-bezier(0.42,0,0.58,1);  /* ease-in-out; Ensures continuous rotation. Other timings are linear, ease, ease in, ease out, ease-in-out, cubic-bezier(0,0,1,1);cubic-bezier(0.25,0.1,0.25,1); */
		 
                  /*cubic-bezier(0.42,0,1,1);cubic-bezier(0,0,0.58,1);cubic-bezier(0.42,0,0.58,1);			 */


	}

@keyframes spin_sphere_homeworks_hover{
              from {
                   transform: scale(2.0) rotate(0deg); /*  rotate(0deg);    */
          
              }
              to {
                   transform: scale(1.0) rotate(360deg);  /* rotate(360deg);  */

              }
}

.sphere_nuclear {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  background-image: url('/images/nuclear_universe_mini.png');
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
 
  
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  display: flex;
  -- flex: 0 0 300px; /* Card width */
 */
    color: copper;
    font-size: 1.0rem;
    font-weight: bold;

}

.sphere_software {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  background-image: url('/images/software_universe_mini.png');
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
 
  
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  display: flex;
  -- flex: 0 0 300px; /* Card width */
 */
    color: navy;
    font-size: 1.0rem;
    font-weight: bold;


}

.sphere_labor {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  background-image: url('/images/labor_universe_mini.png');
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
 
  
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  display: flex;
  -- flex: 0 0 300px; /* Card width */
 */
    color: gold;
    font-size: 1.0rem;


}

.sphere_small_business {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  background-image: url('/images/small_business_universe_mini.png');
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
 
  
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  display: flex;
  -- flex: 0 0 300px; /* Card width */
 */
    color: gold;
    font-size: 1.3rem;


}

.sphere_military {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  background-image: url('/images/military_universe_mini.png');
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
 
  
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  display: flex;
  -- flex: 0 0 300px; /* Card width */
 */
    color: gold;
    font-size: 1.0rem;


}

.sphere_navy {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  background-image: url('/images/navy_universe_mini.png');
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
 
  
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  display: flex;
  -- flex: 0 0 300px; /* Card width */
 */
    color: gold;
    font-size: 1.0rem;


}

.sphere_air_force {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  background-image: url('/images/air_force_universe_mini.png');
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
 
  
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  display: flex;
  -- flex: 0 0 300px; /* Card width */
 */
    color: gold;
    font-size: 1.0rem;


}
.sphere_scientist {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  background-image: url('/images/scientist_universe_image_mini.png');
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
 
  
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  display: flex;
  -- flex: 0 0 300px; /* Card width */
 */

}

.sphere_physio {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  background-image: url('/images/physio_universe_mini.png');
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
 
  
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  display: flex;
  -- flex: 0 0 300px; /* Card width */
 */

}



.sphere_myschool {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  background-image: url('/images/entropy/echoesofuniverse-mini.png');
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
 
  
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  display: flex;
  -- flex: 0 0 300px; /* Card width */
 */

  visibility: visible;
  opacity: 10;
  transform: scale(0.1) rotate(-45deg);  /* rotate(-45deg);  (400% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  animation-name: spin_sphere_myschool;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);  /* ease-in-out; Ensures continuous rotation. Other timings are linear, ease, ease in, ease out, ease-in-out, cubic-bezier(0,0,1,1);cubic-bezier(0.25,0.1,0.25,1); */
		 
  /*cubic-bezier(0.42,0,1,1);cubic-bezier(0,0,0.58,1);cubic-bezier(0.42,0,0.58,1);			 */



}
@keyframes spin_sphere_myschool {
              from {
                   transform: scale(1.2) rotate(0deg); /*  rotate(0deg);    */
          
              }
              to {
                   transform: scale(1.0) rotate(360deg);  /* rotate(360deg);  */

              }
}

.sphere_myschool:hover {
		visibility: visible;
                opacity: 10;

                 color: #fff;
		 transform: scale(1.0) rotate(-45deg);  /* rotate(-45deg);  (400% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
                 animation-name: spin_sphere_myschool_hover;
                 animation-duration: 10s;
                 animation-iteration-count: 1;
                 animation-timing-function:cubic-bezier(0.42,0,0.58,1);  /* ease-in-out; Ensures continuous rotation. Other timings are linear, ease, ease in, ease out, ease-in-out, cubic-bezier(0,0,1,1);cubic-bezier(0.25,0.1,0.25,1); */
		 
                  /*cubic-bezier(0.42,0,1,1);cubic-bezier(0,0,0.58,1);cubic-bezier(0.42,0,0.58,1);			 */


	}

@keyframes spin_sphere_myschool_hover{
              from {
                   transform: scale(2.0) rotate(0deg); /*  rotate(0deg);    */
          
              }
              to {
                   transform: scale(1.0) rotate(360deg);  /* rotate(360deg);  */

              }
}



.sphere_cyberworld{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  background-image: url('/images/entropy/image_04_01.jpeg');
  align-items: left;
  justify-content: left;
  -- scroll-snap-align: start;  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  
  
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  display: flex;
  -- flex: 0 0 300px; /* Card width */
*/
visibility: visible;
  opacity: 10;
  transform: scale(0.1) rotate(-45deg);  /* rotate(-45deg);  (400% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  animation-name: spin_sphere_cyberworld;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);  /* ease-in-out; Ensures continuous rotation. Other timings are linear, ease, ease in, ease out, ease-in-out, cubic-bezier(0,0,1,1);cubic-bezier(0.25,0.1,0.25,1); */
		 
  /*cubic-bezier(0.42,0,1,1);cubic-bezier(0,0,0.58,1);cubic-bezier(0.42,0,0.58,1);			 */



}
@keyframes spin_sphere_cyberworld{
              from {
                   transform: scale(1.2) rotate(0deg); /*  rotate(0deg);    */
          
              }
              to {
                   transform: scale(1.0) rotate(360deg);  /* rotate(360deg);  */

              }
}

.sphere_cyberworld:hover {
		visibility: visible;
                opacity: 10;

                 color: #fff;
		 transform: scale(1.0) rotate(-45deg);  /* rotate(-45deg);  (400% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
                 animation-name: spin_sphere_cyberworld_hover;
                 animation-duration: 10s;
                 animation-iteration-count: 1;
                 animation-timing-function:cubic-bezier(0.42,0,0.58,1);  /* ease-in-out; Ensures continuous rotation. Other timings are linear, ease, ease in, ease out, ease-in-out, cubic-bezier(0,0,1,1);cubic-bezier(0.25,0.1,0.25,1); */
		 
                  /*cubic-bezier(0.42,0,1,1);cubic-bezier(0,0,0.58,1);cubic-bezier(0.42,0,0.58,1);			 */


	}

@keyframes spin_sphere_cyberworld_hover{
              from {
                   transform: scale(2.0) rotate(0deg); /*  rotate(0deg);    */
          
              }
              to {
                   transform: scale(1.0) rotate(360deg);  /* rotate(360deg);  */

              }
}




.sphere_academic {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  background-image: url('/images/entropy/earth.jpeg');
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  
  
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  display: flex;
  -- flex: 0 0 300px; /* Card width */
*/
--');
visibility: visible;
  opacity: 10;
  transform: scale(0.1) rotate(-45deg);  /* rotate(-45deg);  (400% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  animation-name: spin_sphere_academic;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);  /* ease-in-out; Ensures continuous rotation. Other timings are linear, ease, ease in, ease out, ease-in-out, cubic-bezier(0,0,1,1);cubic-bezier(0.25,0.1,0.25,1); */
		 
  /*cubic-bezier(0.42,0,1,1);cubic-bezier(0,0,0.58,1);cubic-bezier(0.42,0,0.58,1);			 */



}
@keyframes spin_sphere_academic{
              from {
                   transform: scale(1.2) rotate(0deg); /*  rotate(0deg);    */
          
              }
              to {
                   transform: scale(1.0) rotate(360deg);  /* rotate(360deg);  */

              }
}

.sphere_academic:hover {
		visibility: visible;
                opacity: 10;

                 color: #fff;
		 transform: scale(1.0) rotate(-45deg);  /* rotate(-45deg);  (400% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
                 animation-name: spin_sphere_academic_hover;
                 animation-duration: 10s;
                 animation-iteration-count: 1;
                 animation-timing-function:cubic-bezier(0.42,0,0.58,1);  /* ease-in-out; Ensures continuous rotation. Other timings are linear, ease, ease in, ease out, ease-in-out, cubic-bezier(0,0,1,1);cubic-bezier(0.25,0.1,0.25,1); */
		 
                  /*cubic-bezier(0.42,0,1,1);cubic-bezier(0,0,0.58,1);cubic-bezier(0.42,0,0.58,1);			 */


	}

@keyframes spin_sphere_academic_hover{
              from {
                   transform: scale(2.0) rotate(0deg); /*  rotate(0deg);    */
          
              }
              to {
                   transform: scale(1.0) rotate(360deg);  /* rotate(360deg);  */

              }
}

.sphere2 {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/image_04.jpeg');
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  display: flex;
  -- flex: 0 0 300px; /* Card width */

');
}
.sphere3 {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  background-image: url('/images/entropy/image_08.jpeg');
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  
  
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  display: flex;
  -- flex: 0 0 300px; /* Card width */
*/
');
}
.sphere_submit_homeworks {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  background-image: url('/images/entropy/image_07.jpeg');
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
 
  
  -- align-items: center;
  -- justify-content: center;
  -- scroll-snap-align: start;  display: flex;
  -- flex: 0 0 300px; /* Card width */
  */

');
}
.sphere5 {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/image_9.jpeg');
');
}
.sphere_mark_attendance {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/image_10.jpeg');
');
}
.sphere_create_blog {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/create_blog_mini.png');
');
}
.sphere_add_product {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/add_product_mini.png');
');
}
.sphere_echoes_store{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/image_13.jpeg');
');
}
.sphere_view_cart{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/view_cart_mini.png');
');
}
.sphere_celestial{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/image_08_01.jpeg');
');
}
.sphere_healthcare {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/image_13.jpeg');
');
}
.sphere_pharmacy{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/pharma_face1_AI_01.png');
');
}
.sphere_film {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/film_face3_AI_01.png');
');
}
.sphere_ecom {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 30% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/ecomm_1_01.jpg');
');
}
.sphere_finance{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/fin_11_01.jpg');
');
}
.sphere_food{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/food_6_01.jpg');
');
}
.sphere_foodchain{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/food_10_01.jpg');
');
}
.sphere_document {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/document_01.png');
');
}
.sphere_hotel {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/hotel_10_01.jpg');
');
}
.sphere_infrastructure{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 30% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/infra_1_01.jpg');
');
}
.sphere_ngo{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/ngo_1_01.jpg');
');
}
.sphere_robotic{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/robot_1_01.jpg');
');
}
.sphere_clinical_records{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/clinical_records_01.png');
');
}
.sphere_word_collection{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/word_collection_01.png');
');
}
.sphere_aerospace{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/aerospace_01.png');
');
}
.sphere_manufacturing{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/manuf_3D_printing_01.png');
  color: yellow;
  font-size: 0.8rem;

');
}
.sphere_agro{
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/agro_economy_01.png');
');
}
.sphere_vet {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/veterinary_01.png');
');
}
.sphere_marine {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/marine_01.png');
');
}
.sphere_horticulture {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/horticulture_01.png');
');
}
.sphere_judicial {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/judicial_01.png');
');
}
.sphere_trade {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/trade_01.png');
');
}
.sphere_law_enforcement {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/entropy/law_01.png');
');
}
.button7 {
  width: 200px; /* Set the desired width */
  height: 200px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%; /* Makes the element a perfect circle */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
  background-image: url('/images/universe/Heat_map_of_the_infant_universe_cropped.png');


}

.button7:hover {background-color: #3e8e41}

.button7:active {
  background-color: #3e8e41;
  box-shadow: 0 250px #fff;
  transform: translateY(4px);
}

.button8 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  -- background-image: url('/images/universe/universe_1.jpg');
  background-color: #5A295A;

 
}

.button8:hover {background-color: #3e8e41}

.button8:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


.button9 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/universe/Universe_History_2.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button9:hover {background-color: #3e8e41}

.button9:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


.button10 {
  border-radius: 100%;
  color: #a19f9d;
  font-size: 96px;
  background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
 
}

.button10:hover {background-color: #3e8e41}

.button10:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button11 {
  width: 300px; /* Set the desired width */
  height: 300px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%;
  background-image: url('/images/Alumni_Enrollment.png');
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */

}

.button11:hover {background-color: #3e8e41}

.button11:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button12 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/entropy/Enthalpy.jpeg');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button12:hover {background-color: #3e8e41}

.button12:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button13 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/entropy/Entropy.jpeg');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button13:hover {background-color: #3e8e41}

.button13:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button14 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/entropy/earth.jpeg');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button14:hover {background-color: #3e8e41}

.button14:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button15 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button15:hover {background-color: #3e8e41}

.button15:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button16 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button16:hover {background-color: #3e8e41}

.button16:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button17 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button17:hover {background-color: #3e8e41}

.button17:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button18 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button18:hover {background-color: #3e8e41}

.button18:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button19 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button19:hover {background-color: #3e8e41}

.button19:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button20 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button20:hover {background-color: #3e8e41}

.button20:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button21 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button21:hover {background-color: #3e8e41}

.button21:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button22 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button22:hover {background-color: #3e8e41}

.button22:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button23 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button23:hover {background-color: #3e8e41}

.button23:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button24 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button24:hover {background-color: #3e8e41}

.button24:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button25 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button25:hover {background-color: #3e8e41}

.button25:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button26 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button26:hover {background-color: #3e8e41}

.button26:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button27 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button27:hover {background-color: #3e8e41}

.button27:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button28 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button28:hover {background-color: #3e8e41}

.button28:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button29 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button29:hover {background-color: #3e8e41}

.button29:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button30 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button30:hover {background-color: #3e8e41}

.button30:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button31 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button31:hover {background-color: #3e8e41}

.button31:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button32 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button32:hover {background-color: #3e8e41}

.button32:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button33 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button33:hover {background-color: #3e8e41}

.button34:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button35 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button35:hover {background-color: #3e8e41}

.button35:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button36 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button36:hover {background-color: #3e8e41}

.button36:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button37 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button37:hover {background-color: #3e8e41}

.button37:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button38 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button38:hover {background-color: #3e8e41}

.button38:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button39 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button39:hover {background-color: #3e8e41}

.button39:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button40 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button40:hover {background-color: #3e8e41}

.button40:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button41 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button41:hover {background-color: #3e8e41}

.button41:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button42 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button42:hover {background-color: #3e8e41}

.button42:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button43 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button43:hover {background-color: #3e8e41}

.button43:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button44 {
  border-radius: 50%;
  color: #a19f9d;
  font-size: 48px;
  -- background-image: url('/images/echoesofuniverse-mini.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button44:hover {background-color: #3e8e41}

.button44:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button45 {
  width: 300px; /* Set the desired width */
  height: 300px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%;
  background-image: url('/images/echoesofuniverse-mini.png'); /*  BackgroundImage-0and1-beads.jpeg */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
}

.button45:hover {background-color: #3e8e41}

.button45:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


.button46 {
  border-radius: 100%;
  color: #a19f9d;
  font-size: 256px;
  ---- background-image: url('/images/democracy_AI.png');
  background-color: #5A295A;
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 

 
}

.button46:hover {background-color: #3e8e41}

.button46:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button47 {
  width: 400px; /* Set the desired width */
  height: 400px; /* Set the desired height, equal to the width for a perfect circle */
  border-radius: 50%;
  background-image: url('/images/democracy_AI.png'); /*  BackgroundImage-0and1-beads.jpeg */
  background: radial-gradient(circle at 0% 30%, #ffffff, #888888); 
  /* Creates a radial gradient for the 3D effect.
     - `circle at 0% 30%`: Defines the center of the light source (e.g., top-left).
     - `#ffffff`: The color at the light source (highlight).
     - `#888888`: The color at the edge of the sphere (shadow).
  */
}

.button47:hover {background-color: #3e8e41}

.button47:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}