# 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  
    ```css
    .distractor {
      color: white
    }
    ```
- .focus-line - Contains the text that is center-focused on the screen  
    ```css
    .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:  
    ```css
    #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.  
    ```css
    #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.  
      
    ```css
    .focus-line {
      font-family: 'heartFont', sans-serif;
    }
    ```
- dumbassFont - Makes font appear with some characters randomly rotating backwards  
      
    ```css
    .focus-line {
      font-family: 'dumbassFont', sans-serif;
    }
    ```

##### Baked-in Animations

- breathing - Makes text or images appear to be breathing in and out.  
    Example Usage:  
    ```css
    .focus-line {
      animation: breathing 4s linear infinite;
    }
    ```