Layouts from my recent blogs #2

/*=== Glitchy Text ===*/

.content p:nth-child(even) {
animation: invertAnimate 1s;
animation-iteration-count:infinite;
}
.content p:nth-child(odd) {
animation: invertAnimate 1s;
animation-iteration-count:infinite;
animation-delay:0.5s;
}

@keyframes invertAnimate {

      0% {

        filter: invert(0%);

      }

      96% {

        filter: invert(0%);

      }

      98% {

        filter: invert(100%);

      }

      100% {

        filter: invert(0%);

      }

    }

/*=== Rain effect (This uses someone else's image so it might not work forever) ===*/
/*=== Also, for this to work add <div class="rain"></div> to the page ===*/

.rain{
  height:100vh;
  background:url(http://pluspng.com/img-png/rain-hd-png-rain-png-480.png);
  animation:rain 0.4s linear infinite;
  position:fixed; top:0px; left:0px; width:100%; opacity:0.5;
  pointer-events: none;
}

.rain:before{
  content:'';
  position:fixed; top:0px; left:0px;
  height:100%;
  width:100%; 
  background:#fff;
  animation: light 4s linear infinite;
  opacity:0;
}

@keyframes rain{
  0%{
    background-position:0% 0%;
  }
   100%{
    background-position:-20% 100%;
  }
}

@keyframes light{
  0%{
    opacity:0;
  }
  10%{
    opacity:0;
  }
  11%{
    opacity:1;
  }
  12%{
    opacity:0;
  }
  20%{
    opacity:0;
  }
  21%{
    opacity:1;
  }
  22%{
    opacity:0;
  }
}

/*=== Spinning Pages ===*/
/*=== Warning: editing blogs is a bit funky and the editing page is going to spin too ===*/
/*=== You can disable this by inpsecting element, select div with class container ===*/
/*=== Then turn off all animations and backups, there will be 4 total ===*/

body{
overflow:hidden; /*=== Stop Page from resizing ===*/
background: repeating-radial-gradient(#000000, transparent 10px);
}
div {
     border-radius:10%;
     overflow:hidden; /*=== Stop Page from resizing ===*/
     background-image: repeating-radial-gradient(rgba(255, 0, 0, 0.08), rgba(0, 0, 0, 0.08), transparent 10px);
    -webkit-animation-name: spin;
    -webkit-animation-duration: 40000ms;
    -webkit-animation-iteration-count: infinite; /*=== You can make these finite ===*/
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 40000ms;
    -moz-animation-iteration-count: infinite; /*=== You can make these finite ===*/
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 40000ms;
    -ms-animation-iteration-count: infinite; /*=== You can make these finite ===*/
    -ms-animation-timing-function: linear;
    
    animation-name: spin;
    animation-duration: 40000ms;
    animation-iteration-count: infinite; /*=== You can make these finite ===*/
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

/*=== Author Box has hearts (or whatever image you put in there) ===*/

.article .edit-info .author-details .publish-date{

color:black;
}

.article .edit-info {
background: #FFB4E3;
background-image: linear-gradient(90deg,rgba(255, 180, 227, 0.85) 0%, rgba(253, 186, 255, 0.85) 50%, rgba(255, 180, 227, 0.85) 100%),
  url("https://gordhaggerty.com/blog/external/hearts.gif");
border:5px dashed #FCF5F5;
}

/*=== Nav Background (also hearts but you can change it) ===*/

nav .top {
background: #FFB4E3;
background-image: linear-gradient(90deg,rgba(255, 180, 227, 0.85) 0%, rgba(253, 186, 255, 0.85) 50%, rgba(255, 180, 227, 0.85) 100%),
  url("https://gordhaggerty.com/blog/external/hearts.gif");
border:5px dashed #FCF5F5;
}
nav .top .left .logo {
filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(282deg) drop-shadow(2px 4px 6px #FC5757);
}

/*=== Rainbow Header and color changing Spacehey Logo ===*/

nav .top .left .logo {
filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(282deg) drop-shadow(2px 4px 6px #FC5757);
animation:fruitCycle 15s infinite alternate;
}

nav .links a {
display:contents;
}

.container > nav .top button {
background:unset;
}

.blog-entry .content {
text-align: center;
}

/* the animation (I'm 90% sure I fucked this up and its supposed to be 0-360deg in the hue-rotate) */
@keyframes fruitCycle {
  0%   { filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(0deg) drop-shadow(2px 4px 6px #FC5757); }
  20%  { filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(52deg) drop-shadow(2px 4px 6px #FC5757); }
  40%  { filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(124deg) drop-shadow(2px 4px 6px #FC5757); }
  60%  { filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(176deg) drop-shadow(2px 4px 6px #FC5757); }
  80%  { filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(228deg) drop-shadow(2px 4px 6px #FC5757); }
  100% { filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(282deg) drop-shadow(2px 4px 6px #FC5757); }
}

/*=== Typing effect for text ===*/
/*=== Also requires a span with class "type", might work for divs, but maybe not ===*/

.type {
  text-align:center;
  font-family: monospace;
  color:#0000;
  background:
    linear-gradient(-90deg,#00DFFC 5px,#0000 0) 10px 0,
    linear-gradient(#00DFFC 0 0) 0 0;
  background-size:calc(var(--n)*1ch) 200%;
  -webkit-background-clip:padding-box,text;
  background-clip:padding-box,text;
  background-repeat:no-repeat;
  animation: 
    b .5s infinite steps(1),   
    t calc(var(--n)*.3s) steps(var(--n)) forwards; /*=== Faster/Slower Typing by editing the number ===*/
}
@keyframes t{
  from {background-size:0 200%}
}
@keyframes b{
  50% {background-position:0 -100%,0 0}
}