:root {
    --gradient: repeating-linear-gradient(
        90deg,
        #ffffff 0%, /* Bright white */
        #00000000 50%, /* Transparent */
        #00000000 75%, /* Transparent */
        #ffffff 100% /* Bright white */
      );
      --gradient2: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.7) 0 0%, /* Slightly transparent white */
        #00000000 50%, /* Transparent */
        #00000000 75%, /* Transparent */
        rgba(255, 255, 255, 0.7) 0 100% /* Slightly transparent white */
      );
  }
  
  body {
    background-color: #000000;
  }
  
  .container {
    display: flex;
    justify-content: center;
    margin-top: 10vh;
  }
  
  .black {
    position: absolute;
    background-color: #000000;
    width: 80vh;
    height: 80vh;
    border-radius: 50%;
  }
  
  .eclipse-border {
    position: absolute;
    z-index: -1;
    background: var(--gradient);
    background-size: 350%;
    filter: blur(5px);
    animation: fade 10s infinite alternate ease-out;
  }
  
  .eclipse-border::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    content: "";
    background: var(--gradient2);
    background-size: 350%;
    filter: blur(20px);
    animation: fade 10s infinite alternate ease-out;
  }
  
  @keyframes fade {
    form {
      background-position: 0;
    }
  
    to {
      background-position: 160vh;
    }
  }

  .logo {
    position: absolute;
    color: #666;
    text-align: center;
    width: 200px;
    left: calc(50% - 100px);
    top: 38vh;
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
    text-transform: uppercase;
}