/* IDK why you're here but hello? */

.funkmachine {
  padding: 0 3px 0 3px !important;
}

body {
  background-image: url(bgfog.jpg);
  font-family: 'Raleway', sans-serif;
}

.container {
  position: relative;
  text-align: center;
  color: white;
}


@media only screen and (max-width: 600px) {
  body {
    color: black;
  }
}

.centered {
  position: absolute;
  color: #fff;
  top: 50%;
  left: 50%;
  width: 500px;
  transform: translate(-50%, -50%);
}

a {
  color: #2a119e;
}

img {
    border-radius: 15px;
}

img:hover {
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
	filter: saturate(120%);
	filter: contrast(120%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}



em {
  color: #5f668c;
  margin: auto;
}

button {
  font-size: 60px;
  font-family: serif;
}

.posts {
    background-color: #fcf8f4;
    color: #18191c;
    border: 2 dashed #A85163; 
    width: 540px;
    text-align: center;
    padding: 10px 20px 10px 20px;
    margin: auto;
}

.footer {
  color: #9B94A8 !important;
}

h3 {
  color: #17192d;
  font-family: 'Oswald', sans-serif;
  text-align: center;
}


.funfacts {
    color: #8995ff;
}

p {
  text-align: center;
  font-family: Arial;
}

.bios {
  width: 550px;
  opacity: 0.8;
  background-color: #efefef;
  color: #18191c;
  text-align: left;
  margin: auto;
  padding: 10px 20px 10px 20px;
  box-shadow: 0px 0px 7px #efefef;
  border-radius: 7px;
}

.navi {
    background-color: #EAEFEC;
    color: #9388A8 !important;
    width: 540px;
    text-align: center;
    padding: 5px 20px 5px 20px;
    margin: auto;
    box-shadow: 0px 0px 5px #EAEFEC, 0px 0px 5px #EAEFEC;
}

.navi2 {
    -webkit-animation-name: boxshad; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: boxshad;
    opacity: 0.6;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    background-color: #5c5d68;
    color: #f4f4f4 !important;
    font-style: italic;
    width: 540px;
    text-align: center;
    padding: 5px 20px 5px 20px;
    margin: auto;
    box-shadow: 2px 2px 7px #5c5d68, -2px -2px 7px #5c5d68, 2px -2px 7px #5c5d68, -2px 2px 7px #5c5d68;
    border-radius: 15px;
}

@-webkit-keyframes boxshad {
    0%   {box-shadow: 2px 2px 7px #9c9ea3, -2px -2px 7px #9c9ea3, 2px -2px 7px #9c9ea3, -2px 2px 7px #9c9ea3;}
    25%  {box-shadow: 2px 2px 10px #9c9ea3, -2px -2px 10px #9c9ea3, 2px -2px 10px #9c9ea3, -2px 2px 10px #9c9ea3;}
    50%  {box-shadow: 2px 2px 13px #9c9ea3, -2px -2px 15px #9c9ea3, 2px -2px 15px #9c9ea3, -2px 2px 15px #9c9ea3;}
    100% {box-shadow: 2px 2px 10px #9c9ea3, -2px -2px 10px #9c9ea3, 2px -2px 10px #9c9ea3, -2px 2px 10px #9c9ea3;}
}

@keyframes boxshad {
    0%   {box-shadow: 2px 2px 7px #5c5d68, -2px -2px 7px #5c5d68, 2px -2px 7px #5c5d68, -2px 2px 7px #5c5d68;}
    25%  {box-shadow: 2px 2px 10px #5c5d68, -2px -2px 10px #5c5d68, 2px -2px 10px #5c5d68, -2px 2px 10px #5c5d68;}
    50%  {box-shadow: 2px 2px 13px #5c5d68, -2px -2px 15px #5c5d68, 2px -2px 15px #5c5d68, -2px 2px 15px #5c5d68;}
    100% {box-shadow: 2px 2px 7px #5c5d68, -2px -2px 7px #5c5d68, 2px -2px 7px #5c5d68, -2px 2px 7px #5c5d68;}
}


.descrip {
  width: 600px;
  color: #18191c;
  margin: auto;
}

img {
  padding: 5px 10px 5px 10px;
}

.img2 {
padding: 0 0 0 0 !important; 
}

.slime {
  text-align: center;
  font-family: serif;
  font-size:60px;
  color: #000000;
  background-image: none;
  height:100%;
  width:100%;
}

.funky {
  background-image: none;
  height:100%;
  width:100%;
}
  
.glitch {
  color: #d80000;
  font-size: 45px;
  position: relative;
  width: 300px;
  margin: auto;
  text-align: center;
}

@keyframes noise-anim {
  0% {
    clip: rect(19px, 9999px, 79px, 0);
  }
  5% {
    clip: rect(92px, 9999px, 94px, 0);
  }
  10% {
    clip: rect(98px, 9999px, 12px, 0);
  }
  15% {
    clip: rect(88px, 9999px, 13px, 0);
  }
  20% {
    clip: rect(36px, 9999px, 27px, 0);
  }
  25% {
    clip: rect(82px, 9999px, 69px, 0);
  }
  30% {
    clip: rect(75px, 9999px, 88px, 0);
  }
  35% {
    clip: rect(94px, 9999px, 40px, 0);
  }
  40% {
    clip: rect(70px, 9999px, 98px, 0);
  }
  45% {
    clip: rect(95px, 9999px, 48px, 0);
  }
  50% {
    clip: rect(45px, 9999px, 22px, 0);
  }
  55% {
    clip: rect(66px, 9999px, 9px, 0);
  }
  60% {
    clip: rect(33px, 9999px, 1px, 0);
  }
  65% {
    clip: rect(17px, 9999px, 1px, 0);
  }
  70% {
    clip: rect(24px, 9999px, 52px, 0);
  }
  75% {
    clip: rect(32px, 9999px, 70px, 0);
  }
  80% {
    clip: rect(60px, 9999px, 57px, 0);
  }
  85% {
    clip: rect(74px, 9999px, 80px, 0);
  }
  90% {
    clip: rect(3px, 9999px, 95px, 0);
  }
  95% {
    clip: rect(65px, 9999px, 96px, 0);
  }
  100% {
    clip: rect(42px, 9999px, 44px, 0);
  }
}
.glitch:after {
  content: attr(data-text);
  text-align: center;
  position: absolute;
  left: 5px;
  text-shadow: -4px 0 red;
  top: 0;
  color: white;
  background: white;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(7px, 9999px, 87px, 0);
  }
  5% {
    clip: rect(10px, 9999px, 22px, 0);
  }
  10% {
    clip: rect(91px, 9999px, 60px, 0);
  }
  15% {
    clip: rect(54px, 9999px, 63px, 0);
  }
  20% {
    clip: rect(62px, 9999px, 75px, 0);
  }
  25% {
    clip: rect(95px, 9999px, 83px, 0);
  }
  30% {
    clip: rect(17px, 9999px, 88px, 0);
  }
  35% {
    clip: rect(49px, 9999px, 98px, 0);
  }
  40% {
    clip: rect(74px, 9999px, 23px, 0);
  }
  45% {
    clip: rect(84px, 9999px, 60px, 0);
  }
  50% {
    clip: rect(44px, 9999px, 56px, 0);
  }
  55% {
    clip: rect(66px, 9999px, 57px, 0);
  }
  60% {
    clip: rect(27px, 9999px, 21px, 0);
  }
  65% {
    clip: rect(69px, 9999px, 33px, 0);
  }
  70% {
    clip: rect(8px, 9999px, 27px, 0);
  }
  75% {
    clip: rect(18px, 9999px, 60px, 0);
  }
  80% {
    clip: rect(20px, 9999px, 22px, 0);
  }
  85% {
    clip: rect(6px, 9999px, 73px, 0);
  }
  90% {
    clip: rect(68px, 9999px, 73px, 0);
  }
  95% {
    clip: rect(12px, 9999px, 72px, 0);
  }
  100% {
    clip: rect(42px, 9999px, 45px, 0);
  }
}
.glitch:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: white;
  background: white;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}

.glitch2 {
  color: #afbaff;
  font-size: 18px;
  position: relative;
  width: 300px;
  margin: auto;
  text-align: center;
}

@keyframes noise-anim {
  0% {
    clip: rect(19px, 9999px, 79px, 0);
  }
  5% {
    clip: rect(92px, 9999px, 94px, 0);
  }
  10% {
    clip: rect(98px, 9999px, 12px, 0);
  }
  15% {
    clip: rect(88px, 9999px, 13px, 0);
  }
  20% {
    clip: rect(36px, 9999px, 27px, 0);
  }
  25% {
    clip: rect(82px, 9999px, 69px, 0);
  }
  30% {
    clip: rect(75px, 9999px, 88px, 0);
  }
  35% {
    clip: rect(94px, 9999px, 40px, 0);
  }
  40% {
    clip: rect(70px, 9999px, 98px, 0);
  }
  45% {
    clip: rect(95px, 9999px, 48px, 0);
  }
  50% {
    clip: rect(45px, 9999px, 22px, 0);
  }
  55% {
    clip: rect(66px, 9999px, 9px, 0);
  }
  60% {
    clip: rect(33px, 9999px, 1px, 0);
  }
  65% {
    clip: rect(17px, 9999px, 1px, 0);
  }
  70% {
    clip: rect(24px, 9999px, 52px, 0);
  }
  75% {
    clip: rect(32px, 9999px, 70px, 0);
  }
  80% {
    clip: rect(60px, 9999px, 57px, 0);
  }
  85% {
    clip: rect(74px, 9999px, 80px, 0);
  }
  90% {
    clip: rect(3px, 9999px, 95px, 0);
  }
  95% {
    clip: rect(65px, 9999px, 96px, 0);
  }
  100% {
    clip: rect(42px, 9999px, 44px, 0);
  }
}
.glitch2:after {
  content: attr(data-text);
  text-align: center;
  position: absolute;
  left: 5px;
  text-shadow: -4px 0 red;
  top: 0;
  color: white;
  background: white;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(7px, 9999px, 87px, 0);
  }
  5% {
    clip: rect(10px, 9999px, 22px, 0);
  }
  10% {
    clip: rect(91px, 9999px, 60px, 0);
  }
  15% {
    clip: rect(54px, 9999px, 63px, 0);
  }
  20% {
    clip: rect(62px, 9999px, 75px, 0);
  }
  25% {
    clip: rect(95px, 9999px, 83px, 0);
  }
  30% {
    clip: rect(17px, 9999px, 88px, 0);
  }
  35% {
    clip: rect(49px, 9999px, 98px, 0);
  }
  40% {
    clip: rect(74px, 9999px, 23px, 0);
  }
  45% {
    clip: rect(84px, 9999px, 60px, 0);
  }
  50% {
    clip: rect(44px, 9999px, 56px, 0);
  }
  55% {
    clip: rect(66px, 9999px, 57px, 0);
  }
  60% {
    clip: rect(27px, 9999px, 21px, 0);
  }
  65% {
    clip: rect(69px, 9999px, 33px, 0);
  }
  70% {
    clip: rect(8px, 9999px, 27px, 0);
  }
  75% {
    clip: rect(18px, 9999px, 60px, 0);
  }
  80% {
    clip: rect(20px, 9999px, 22px, 0);
  }
  85% {
    clip: rect(6px, 9999px, 73px, 0);
  }
  90% {
    clip: rect(68px, 9999px, 73px, 0);
  }
  95% {
    clip: rect(12px, 9999px, 72px, 0);
  }
  100% {
    clip: rect(42px, 9999px, 45px, 0);
  }
}
.glitch2:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: white;
  background: white;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}


.fade1 {
  color: #b20000 !important;
}

.fade2 {
  color: #770000 !important;
}

.fade3 {
  color: #560000 !important;
}

.pulsate {
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@-webkit-keyframes example {
    0%   {text-shadow: 0 0 5px #f4f4f4;}
    25%  {text-shadow: 0 0 10px #f4f4f4;}
    50%  {text-shadow: 0 0 15px #f4f4f4;}
    100% {text-shadow: 0 0 10px #f4f4f4;}
}

@keyframes example {
    0%   {text-shadow: 0 0 5px #f4f4f4;}
    25%  {text-shadow: 0 0 10px #f4f4f4;}
    50%  {text-shadow: 0 0 15px #f4f4f4;}
    100% {text-shadow: 0 0 10px #f4f4f4;}
}