body {

  font-family: 'Exo';
  padding: 3rem;
  line-height: 1.314;
}

::-moz-selection {
  background: rgba(195, 239, 143, 0.5);
}

::selection {
  background: rgba(195, 239, 143, 0.5);
}

img {
  display: inline-block;
}

.breach{
  -webkit-animation: crt 5ms infinite;
  animation: crt 1ms infinite;
}

.glitch {
  min-height: 100vh;
  background: #1f0a4f;
  color: #c3ef8f;

  font-family: 'Exo' , Monaco, "Courier New", Courier, monospace;
  -webkit-animation: crt 1ms infinite;
          animation: crt 1ms infinite;
  text-shadow: 0 0 1px #c3ef8f, 1px 1px 1px blue, -1px -1px 1px #990099 ;
}
.glitch::after {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: repeating-linear-gradient(top, transparent 0px, transparent 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 4px);
  background-size: 100% 4px;
  box-shadow: inset 0 0 10em rgba(0, 0, 0, 0.5), inset 0 0 2em rgba(0, 0, 0, 0.1);
  z-index: -1;
  content: "";
}
.glitch h2, .glitch h3, .glitch h4 {
  font-weight: 400;
  color: #c3ef8f;
}
.glitch a {
  color: #17f210;
  background: rgba(100, 250, 0, 0.2);
  border-color: rgba(195, 239, 143, 0.1);
  border: 3px ;
}
.glitch a:hover {
  border-color: transparent !important;
}
**/
.container {
  position: relative;
  z-index: 99999;
  width: 100%;
  height: 100;
}
.container * {
  -webkit-filter: blur(2px);
          filter: blur(2px);
  -webkit-animation: 3s distort 3s infinite alternate, blur 20ms infinite, flick 10ms infinite, jump 15ms infinite;
          animation: 3s distort 3s infinite alternate, blur 20ms infinite, flick 10ms infinite, jump 15ms infinite;
}
.logojpg{
  background-image: url(AlphaPrimates\logo.png);
  width: 200px;
  height: 200px;
}

@-webkit-keyframes crt {
  28% {
    background: #232624;
  }
  30% {
    background: #272c28;
  }
  33% {
    background: #232624;
  }
  34% {
    background: #272c28;
  }
  35% {
    background: #202421;
  }
}

@keyframes crt {
  28% {
    background: #232624;
  }
  30% {
    background: #272c28;
  }
  33% {
    background: #232624;
  }
  34% {
    background: #272c28;
  }
  35% {
    background: #202421;
  }
}
@-webkit-keyframes blur {
  0% {
    -webkit-filter: blur(1px);
            filter: blur(1px);
    opacity: 0.8;
  }
  50% {
    -webkit-filter: blur(1px);
            filter: blur(1px);
    opacity: 1;
  }
  100% {
    -webkit-filter: blur(1px);
            filter: blur(1px);
    opacity: 0.8;
  }
}
@keyframes blur {
  0% {
    -webkit-filter: blur(1px);
            filter: blur(1px);
    opacity: 0.8;
  }
  50% {
    -webkit-filter: blur(1px);
            filter: blur(1px);
    opacity: 1;
  }
  100% {
    -webkit-filter: blur(1px);
            filter: blur(1px);
    opacity: 0.8;
  }
}
@-webkit-keyframes flick {
  50% {
    left: 0px;
  }
  51% {
    left: 0;
  }
}
@keyframes flick {
  50% {
    left: 0px;
  }
  51% {
    left: 0;
  }
}
@-webkit-keyframes jump {
  30% {
    top: 0px;
  }
  31% {
    top: 0;
  }
}
@keyframes jump {
  30% {
    top: 0px;
  }
  31% {
    top: 0;
  }
}
@-webkit-keyframes distort {
  10% {
    opacity: 1;
    top: 0;
    left: 0;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-transform: skew(0, 0);
            transform: skew(0, 0);
  }
  11% {
    opacity: 0.8;
    top: 0px;
    left: -100px;
    -webkit-transform: scale(1, 1.2);
            transform: scale(1, 1.2);
    -webkit-transform: skew(50deg, 0);
            transform: skew(50deg, 0);
  }
  12% {
    opacity: 0.2;
    top: 0px;
    left: 100px;
    -webkit-transform: scale(1, 1.2);
            transform: scale(1, 1.2);
    -webkit-transform: skew(-80deg, 0);
            transform: skew(-80deg, 0);
  }
  13% {
    opacity: 1;
    top: 0;
    left: 0;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-transform: skew(0, 0);
            transform: skew(0, 0);
  }
}
@keyframes distort {
  10% {
    opacity: 1;
    top: 0;
    left: 0;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-transform: skew(0, 0);
            transform: skew(0, 0);
  }
  11% {
    opacity: 0.8;
    top: 0px;
    left: -100px;
    -webkit-transform: scale(1, 1.2);
            transform: scale(1, 1.2);
    -webkit-transform: skew(50deg, 0);
            transform: skew(50deg, 0);
  }
  12% {
    opacity: 0.2;
    top: 0px;
    left: 100px;
    -webkit-transform: scale(1, 1.2);
            transform: scale(1, 1.2);
    -webkit-transform: skew(-80deg, 0);
            transform: skew(-80deg, 0);
  }
  13% {
    opacity: 1;
    top: 0;
    left: 0;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-transform: skew(0, 0);
            transform: skew(0, 0);
  }
}
@-webkit-keyframes appear {
  0% {
    -webkit-filter: blur(5px);
            filter: blur(5px);
    opacity: 0.85;
  }
  50% {
    -webkit-filter: blur(3px);
            filter: blur(3px);
    opacity: 0.85;
  }
  100% {
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0.85;
  }
}
@keyframes appear {
  0% {
    -webkit-filter: blur(5px);
            filter: blur(5px);
    opacity: 0.85;
  }
  50% {
    -webkit-filter: blur(3px);
            filter: blur(3px);
    opacity: 0.85;
  }
  100% {
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0.85;
  }
}
@-webkit-keyframes snapped {
  0% {
    -webkit-filter: blur(5px);
            filter: blur(5px);
    opacity: 0.85;
  }
  50% {
    -webkit-filter: blur(3px);
            filter: blur(3px);
    opacity: 0.85;
  }
  100% {
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0.85;
  }
}
@keyframes snapped {
  0% {
    -webkit-filter: blur(5px);
            filter: blur(5px);
    opacity: 0.85;
  }
  50% {
    -webkit-filter: blur(3px);
            filter: blur(3px);
    opacity: 0.85;
  }
  100% {
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0.85;
  }
}
@-webkit-keyframes beersip {
  0% {
    top: 0;
  }
  10% {
    top: -10%;
  }
  12% {
    top: 0;
  }
  54% {
    top: 0;
  }
  55% {
    top: -30%;
  }
  56% {
    top: 0;
  }
  86% {
    top: 0;
  }
  87% {
    top: -60%;
  }
  88% {
    top: 0;
  }
}
@keyframes beersip {
  0% {
    top: 0;
  }
  10% {
    top: -10%;
  }
  12% {
    top: 0;
  }
  54% {
    top: 0;
  }
  55% {
    top: -30%;
  }
  56% {
    top: 0;
  }
  86% {
    top: 0;
  }
  87% {
    top: -60%;
  }
  88% {
    top: 0;
  }
}



/* Mobile (320px - 575px) */
@media (min-width: 320px) and (max-width: 575px) {
  body { font-size: 15px; }
  /* Mobile-specific styles */
  .container{
    font-size: 10px;
  }
}

/* Large phones (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  body { font-size: 16px; }
  /* Large phone styles */
  .container{
    font-size: 10px;
}
.tmfrm{
  font-size: 13px;
}
}
/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  body { font-size: 17px; }
  /* Tablet styles */
  .container{
    font-size: 10px;
}
.tmfrm{
  font-size: 13px;
}
}