.ring-shared {
    position: relative;
  
    left: calc(50% - 40vmin);
    top: calc(50% - 120vmin);
  
    width: 40vmin;
    height: 120vmin;
  
    grid-column-start: 1;
    grid-row-start: 1;
  
    border-style: none;
}

#ring-before {
    transform: translate(50%,50%) rotate3d(1,0,0,75deg) rotate3d(0,0,1,25deg) translate(-20vmin, 0);
    background: radial-gradient(200% 100% at 100% 50%, #0000 30%, #002b1e55 30%, #00563c99 36%, #00ac78bb 40%, #00563c99 44%, #00201755 50%, #0000 50%);
    z-index: 3;
}

#ring-after {
    transform: translate(50%,50%) rotate3d(1,0,0,75deg) rotate3d(0,0,1,25deg) translate(20vmin, 0);
    background: radial-gradient(200% 100% at 0% 50%, #0000 30%, #002b1e55 30%, #00563c99 36%, #00ac78bb 40%, #00563c99 44%, #00201755 50%, #0000 50%);
    z-index: 7;
}

#ring-container {
    height: 100%;
    width: 100%;
  
    position: relative;
    
    left: 50%;
    top: 50%;
  
    background: #0000;
    transform: translate(-50%,-50%);
  
    margin: 0;
  
    display: grid;
  
    grid-column-start: 1;
    grid-row-start: 1;
  
    z-index: 2;
}

#planet-fade {
    height: 50vmin;
    width: 50vmin;
  
    position: relative;
    top: 35vmin;
    
    background: radial-gradient(100% 100% at 50% 50%, #0000 30%, #002b1e 30%, #002017 36%, #0000 49%);
  
    margin: 0;
  
    display: inline-block;
    
    grid-column-start: 1;
    grid-row-start: 1;
    
    z-index: 2;
}

#planet-contrast {
    height: 30.25vmin;
    width: 30.25vmin;
    
    position: relative;
    top: 44.875vmin;
    left: 9.875vmin;
  
    margin: 0;
  
    display: inline-block;
  
    background: radial-gradient(125% 130% at 85.3% 85.3%, #fffc,  #20202020 55%, #16161616 65%, #0000);
    border-radius: 50%;  
  
    grid-column-start: 1;
    grid-row-start: 1;
    
    z-index: 3;
}

#planet {
    height: 30vmin;
    width: 30vmin;
  
    position: relative;
    top: 45vmin;
    left: 10vmin;
  
    background: radial-gradient(120% 130% at 85.3% 85.3%, #000, #00160f 45%, #00321e 55%, #0f9);
    border-radius: 50%;
  
    margin: 0;
  
    display: inline-block;
  
    grid-column-start: 1;
    grid-row-start: 1;
  
    z-index: 4;
}

#align-container {
    width: 100%;
    height: 100%;
  
    background: #0000;
  
    overflow:hidden;
    
    text-align: center;
    justify-content: center;
    align-content: center;
    
    grid-column-start: 1;
    grid-row-start: 1;
  
    display: grid;
  
    position: fixed;
  
    margin: 0;
  
    z-index: 1;
}