/* WARNING: HOT-LINKING IS STRICTLY FORBIDDEN */
/* Webfonts: Copyright © Vaughan Type. */
/* The embedded fonts on this site are licensed from vaughantype.com */

@font-face
{
    font-family:         'Wumpus Mono';
    font-style:          normal;
    font-stretch:        normal;
    src:                 url( 'WMP.woff2' ) format( 'woff2' ),
                         url( 'WMP.woff' )  format( 'woff' ),
                         url( 'WMP.ttf' )   format( 'ttf' );
}

html, body
{
    height:              100%;
    margin:              0;
    display:             flex;
    justify-content:     center;
    align-items:         center;
    background-color:    black;
    color:               white;
    font-family:         'Wumpus Mono', monospace, sans-serif;
    text-align:          center;
}

p                        { margin-top: 120px; text-align: center; }
#gimg                    { mix-blend-mode: overlay; }
#gimg:hover              { mix-blend-mode: plus-lighter; }

#container
{
    display:             flex;
    flex-direction:      column;
    align-items:         center;
    justify-content:     center;
    position:            relative;
    width:               64px;
    height:              64px;
}

#oimg, #gimg
{
    position:            absolute;
    top:                 0;
    left:                0;
    width:               64px;
    height:              64px;
}

#nx {
    position:            fixed;
    bottom:              10px;
    right:               10px;
    font-size:           16px;
    color:               white;
    text-decoration:     none;
}

@keyframes glitch {
  0% {
    transform: translate(0) skew(0deg, 0deg) rotate(0deg);
    color: #0400cb;
  }
  20% {
    transform: translate(-2px, -3px) skew(2deg, -2deg) rotate(-2deg);
    color: #007900;
  }
  40% {
    transform: translate(3px, 1px) skew(-2deg, 3deg) rotate(3deg);
    color: #00bbbe;
  }
  60% {
    transform: translate(-4px, -1px) skew(3deg, 2deg) rotate(-4deg);
    color: #008b56;
  }
  80% {
    transform: translate(2px, 4px) skew(-1deg, -3deg) rotate(2deg);
    color: #0058af;
  }
  100% {
    transform: translate(0) skew(0deg, 0deg) rotate(0deg);
    color: #fff;
  }
}

.glitch {
    animation: glitch 0.3s infinite;
}