Custom CSS in Spirals

Custom CSS is a powerful tool in spiral sessions that let you edit virtually anything style-wise in a session.

Some key elements are:

• .distractor - Classic Distractors
  

  .distractor {
    color: white
  }

  
  
• .focus-line - Contains the text that is center-focused on the screen
  

  .focus-line {
    animation: breathing 4s linear infinite;
    font-family: sans-serif;
    color: #DDE;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-size: 4vh;
    text-wrap: none;
    overflow: hidden;
    z-index: 30;
    text-align: center;
    margin-top: -0.25em;
  }

  
  
• #spiral-gif - Contains the Spiral if the Spiral is an Image (.gif) (If in VR Mode, use .gif-fit). By default, the spiral is:
  

  #spiral-gif, .gif-fit {
      position: absolute;
      width: 50%;
      height: 100%;
      top: 0;
      opacity: .3;
      z-index: 1;
      background: url(/static/utils/large.gif) no-repeat center center;
      background-size: cover;
      overflow: hidden;
      text-align: center;
  }

• #image - Contains the Breathing Image Background. Images are set in the style attribute of the #image <div> as a background.
  

  #image {
      animation: _ngcontent-ng-c139187180_zoomin 1.5s linear infinite;
      position: absolute;
      top: 0;
      width: 50%;
      height: 100%;
      background-repeat: repeat;
      background-position: center center;
      background-size: contain;
      overflow-x: hidden;
      overflow-y: hidden;
      overflow: hidden;
  }

  
  

Additional Baked-in Fonts

• heartFont - Makes font appear in block lettering with hearts.
  
  

  .focus-line {
    font-family: 'heartFont', sans-serif;
  }

• dumbassFont - Makes font appear with some characters randomly rotating backwards
  
  

  .focus-line {
    font-family: 'dumbassFont', sans-serif;
  }

Baked-in Animations

• breathing - Makes text or images appear to be breathing in and out.
  Example Usage:
  

  .focus-line {
    animation: breathing 4s linear infinite;
  }