scrappystyles.css

/*  */
@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
body {
	/* background-color:#1b1a1f; */
	background-image: url("https://images.unsplash.com/photo-1601844569046-b72c31389677?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=752&q=80") !important;
	background-repeat: no-repeat;
  	background-size: 100%;
	background-position: fixed;
    	font-family: 'Jost', -system-ui;
}
@-webkit-keyframes headShake {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  
    6.5% {
      -webkit-transform: translateX(-6px) rotateY(-9deg);
      transform: translateX(-6px) rotateY(-9deg);
    }
  
    18.5% {
      -webkit-transform: translateX(5px) rotateY(7deg);
      transform: translateX(5px) rotateY(7deg);
    }
  
    31.5% {
      -webkit-transform: translateX(-3px) rotateY(-5deg);
      transform: translateX(-3px) rotateY(-5deg);
    }
  
    43.5% {
      -webkit-transform: translateX(2px) rotateY(3deg);
      transform: translateX(2px) rotateY(3deg);
    }
  
    50% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }
@keyframes headShake {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  
    6.5% {
      -webkit-transform: translateX(-6px) rotateY(-9deg);
      transform: translateX(-6px) rotateY(-9deg);
    }
  
    18.5% {
      -webkit-transform: translateX(5px) rotateY(7deg);
      transform: translateX(5px) rotateY(7deg);
    }
  
    31.5% {
      -webkit-transform: translateX(-3px) rotateY(-5deg);
      transform: translateX(-3px) rotateY(-5deg);
    }
  
    43.5% {
      -webkit-transform: translateX(2px) rotateY(3deg);
      transform: translateX(2px) rotateY(3deg);
    }
  
    50% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }

.header-title-avatar{
    box-shadow:
    0 0 2px #fff,
    0 0 4px #fff,
    0 0 6px #fff,
    0 0 8px #0ff,
    0 0 10px #0ff,
    0 0 12px #0ff,
    0 0 14px #0ff,
    0 0 16px #0ff;
}
.react-calendar-heatmap {
	content: "'Words, words, words. They're all we have to go by. -Stoppard'";
	font-size: 3rem;
	color: white;

.header-title-avatar:hover{
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation: headShake 2s ease;
    animation: headShake 2s ease ;
}

h1.header-title-name:after {
    content: ' @ClaireBookworm';
    text-indent: 0 !important;
    display: block;
    line-height: initial !important;
    margin-top: 0.2em;
    margin-bottom: 0.67em;
	font-weight: 800;
    color: #fff;
    text-shadow:
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 20px #fff,
      0 0 30px #009aab,
      0 0 50px #009aab,
      0 0 70px #009aab,
      0 0 90px #009aab,
      0 0 100px #009aab;
    font-weight: 400;
    color:white;

}

h1.header-title-name {
    text-indent: -9999px;
    line-height: 0;
    animation: blinker 6s ease infinite;
}

strong.post-header-name {
    text-indent: -9999px;
    line-height: 0;
}
strong.post-header-name:after {
    content: '@ClaireBookworm';
    text-indent: 0 !important;
    display: block;
    line-height: initial !important;
}
.header-content {
	padding-bottom: 24px;
}
.posts{
    box-shadow:
        0 0 2px #fff,
        0 0 4px #fff,
        0 0 6px #fff,
        0 0 8px rgb(42, 43, 43),
        0 0 10px #66FAFF,
        0 0 12px #66FAFF,
        0 0 14px #66FAFF,
        0 0 16px #66FAFF;

}

.posts:hover{
    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ffb400, 0 0 20px #ffb400, 0 0 25px #ffb400, 0 0 30px #ffb400;
}

@-webkit-keyframes glow-text {
from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #13cfbf, 0 0 20px #13cfbf, 0 0 25px #13cfbf, 0 0 30px #13cfbf, 0 0 35px #13cfbf;
}
to {
    text-shadow: 0 0 10px #fff, 0 0 15px #ffdc89, 0 0 20px #ffdc89, 0 0 25px #ffdc89, 0 0 30px #ffdc89, 0 0 35px #ffdc89, 0 0 40px #ffdc89;
}
}

@keyframes blinker {
    0% {
      opacity: 0;
    }
    25% {
        opacity: 70;
      }
    50% {
        opacity: 100;
      }
    75% {
        opacity: 70;
      }
    100% {
        opacity: 0;
     }
  }
.post:hover {
	border-radius: 0px;
background: linear-gradient(145deg, #2a3849, #232f3d);
box-shadow:  28px 28px 56px #1f2936, 
             -28px -28px 56px #2f3f52;
}
.post-header-date {
	font-size: 24px;
}
.post-header-date:hover {
	color: #befad9;
}
.post-text {
	color: #B5DFF5;
}
.react-calendar-heatmap-weekday-label {
	color: #e0e6ed;
	background: #3c4858;
	border-radius: 5px;
}
.header-title-name {
	font-size: 54px;
	line-height: 1.5;
	padding: 5px;
}