:root {
    --fancy-font: "Indie Flower", cursive;
}

body {
    background-color: var(--RAL-9005);
    font-family: var(--fancy-font);
    color: var(--RAL-9002);
    /* background-image: url('https://images.unsplash.com/photo-1674033846163-fe3ea31c1f97?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=3870');
    background-position: top;
    background-repeat: no-repeat; */
    
}

.snippet {
    width: 40ch;
    height: 40ch;
     
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;
    text-align: center;
  

    
}
.snippet p {
    padding-bottom: 1ex;
    font-size: 3.4ex;
}

.snippet p:nth-of-type(odd) {
    margin-left: -8px;
    rotate: 0.8deg;
  
    -webkit-animation: pageFade 4s; /* Safari 4+ */
    -moz-animation:    pageFade 4s; /* Fx 5+ */
    -o-animation:      pageFade 4s; /* Opera 12+ */
    animation:         pageFade 4s; /* IE 10+, Fx 29+ */
}

.snippet p:nth-of-type(even) {
    margin-left: 1px;
    rotate: -0.3deg;

    -webkit-animation: pageFade 7s; /* Safari 4+ */
    -moz-animation:    pageFade 7s; /* Fx 5+ */
    -o-animation:      pageFade 7s; /* Opera 12+ */
    animation:         pageFade 7s; /* IE 10+, Fx 29+ */
}
.snippet p:last-child {
    margin-left: 6px;
    rotate: -0.8deg;

    -webkit-animation: pageFade 12s; /* Safari 4+ */
    -moz-animation:    pageFade 12s; /* Fx 5+ */
    -o-animation:      pageFade 12s; /* Opera 12+ */
    animation:         pageFade 12s; /* IE 10+, Fx 29+ */
   
}
.snippet i {
    font-weight: lighter;
    font-style: italic;
    text-decoration: underline;
}

.snippet b {
    font-weight: bolder;
}


@-webkit-keyframes pageFade {
    0%   { opacity: 0; filter: blur(8px); }
    100% { opacity: 1; filter: blur(0.5px);}
}
@-moz-keyframes pageFade {
    0%   { opacity: 0; filter: blur(8px); }
    100% { opacity: 1; filter: blur(0.5px);}
}
@-o-keyframes pageFade {
    0%   { opacity: 0; filter: blur(8px); }
    100% { opacity: 1; filter: blur(0.5px);}
}
@keyframes pageFade {
    0%   { opacity: 0; filter: blur(8px); }
    100% { opacity: 1; filter: blur(0.5px);}
}