/*making rain fall*/

#rain {
    stroke-dasharray: 10;
    stroke-dashoffset: 0;
    animation: draw 5s linear;
    animation-iteration-count: infinite;
    animation-direction: reverse;
}


/*making yellow line (hallucination) move*/

#yellow-stroke {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: draw-different 4s linear;
    animation-iteration-count: infinite;
}


/*making blue line (hallucination) move*/

#blue-stroke {
    stroke-dasharray: 200;
    stroke-dashoffset: 150;
    animation: draw-different 6s linear;
    animation-iteration-count: infinite;
}


/*making red line (hallucination) move*/

#red-stroke {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: draw-different 3s linear;
    animation-iteration-count: infinite;
}


/*making roller-coaster symbol move
*/

#roller-coaster {
    stroke-dasharray: 150;
    stroke-dashoffset: 100;
    animation: draw 4.5s linear;
    animation-iteration-count: infinite;
    animation-direction: reverse;
}


/*animations that use dashed lines to simulate a "drawing" effect*/

@keyframes draw {
    100% {
        stroke-dashoffset: 400
    }
    ;
}

@keyframes draw-different {
    50% {
        stroke-dashoffset: 0
    }
    ;
    100% {
        stroke-dashoffset: 400
    }
    ;
}


}