style.css

@import url(https://fonts.googleapis.com/css?family=Cabin+Condensed);

html {
  font: 4vmin/1.0 'Cabin Condensed', sans-serif;
  background-color: #013;
  color: #fff;
}

a, a:visited {
  color: #f0f;
  text-decoration: none;
}

a:hover {
  color: #f06;
  text-decoration: underline;
}

h3 {
  color: #46b;
}

#bg {
  font-size: 52px;
  color: transparent;
  z-index: -100;
}

#bg::before, #bg::after {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 3em;
  height: 3em;
  content: ".";
  animation: 44s -27s move infinite ease-in-out alternate;
}

#bg::before {
  text-shadow: 0.1446737907em 2.4858818046em 7px rgba(75, 0, 255, 0.9), 0.0323217129em 1.6983120913em 7px rgba(255, 0, 154, 0.9), 0.4570654805em 0.8572949528em 7px rgba(255, 0, 107, 0.9), -0.4121792539em 2.1331321138em 7px rgba(255, 228, 0, 0.9), 2.4620614868em 0.2698553588em 7px rgba(39, 255, 0, 0.9), 1.5176179306em 1.7711194053em 7px rgba(255, 0, 63, 0.9), 0.0430558093em 0.5025130115em 7px rgba(255, 0, 17, 0.9), 1.1953646728em 1.4940138268em 7px rgba(0, 255, 55, 0.9), 2.3273540818em 0.0888738449em 7px rgba(0, 153, 255, 0.9), 2.1756441392em 1.6695858728em 7px rgba(0, 255, 242, 0.9), 1.6072959182em 1.5416371976em 7px rgba(0, 84, 255, 0.9), -0.2428846699em 2.413396683em 7px rgba(0, 130, 255, 0.9), 0.7880092882em 0.2823777441em 7px rgba(224, 0, 255, 0.9), -0.1278000289em 2.0659689005em 7px rgba(79, 255, 0, 0.9), 0.8230099261em 0.7732926593em 7px rgba(32, 0, 255, 0.9), 2.0098964276em 0.4261836579em 7px rgba(30, 255, 0, 0.9), 1.6550246449em 1.6091176257em 7px rgba(255, 0, 95, 0.9), 1.1023354987em -0.0126010239em 7px rgba(255, 0, 41, 0.9), -0.0961455291em 2.388604704em 7px rgba(219, 0, 255, 0.9), 1.6728344564em 1.9971922531em 7px rgba(23, 255, 0, 0.9), 0.4959209493em -0.0841974681em 7px rgba(255, 0, 127, 0.9), 0.6000181122em 0.5859312729em 7px rgba(0, 255, 222, 0.9), 1.3825675935em 2.2329450379em 7px rgba(255, 0, 219, 0.9), 1.8243508173em 0.6071158397em 7px rgba(119, 0, 255, 0.9), 0.0040588844em 0.469608466em 7px rgba(255, 221, 0, 0.9), 1.6601348418em 0.2054726935em 7px rgba(0, 149, 255, 0.9), 2.1390048145em 1.6015668267em 7px rgba(30, 0, 255, 0.9), 1.6605002797em 0.4430300997em 7px rgba(0, 0, 255, 0.9), 1.8460331674em 0.4250986004em 7px rgba(255, 0, 99, 0.9), 0.5534844293em 2.186228869em 7px rgba(0, 216, 255, 0.9), 1.9303040534em 0.3227318746em 7px rgba(0, 239, 255, 0.9), -0.2007638704em 1.8968217406em 7px rgba(0, 255, 244, 0.9), 1.7040291038em 1.2346252282em 7px rgba(0, 255, 186, 0.9), -0.4527956633em -0.1346683139em 7px rgba(0, 10, 255, 0.9), 0.0763657788em 2.3829532018em 7px rgba(0, 255, 100, 0.9), 0.8508308725em -0.4273864952em 7px rgba(255, 0, 24, 0.9), 0.7358537606em 1.9445879191em 7px rgba(255, 242, 0, 0.9), 2.329734458em 2.0547583146em 7px rgba(255, 0, 104, 0.9), 1.9378854845em 2.2924885091em 7px rgba(255, 0, 181, 0.9), -0.4368572088em 2.0565594122em 7px rgba(253, 255, 0, 0.9), 1.6001851315em 2.3654394484em 7px rgba(255, 53, 0, 0.9);
  animation-duration: 44s;
  animation-delay: -27s;
}

#bg::after {
  text-shadow: 1.2831243379em 0.1694355258em 7px rgba(255, 0, 186, 0.9), 1.1453293565em -0.4544108743em 7px rgba(0, 255, 187, 0.9), 1.6782418992em 0.484428143em 7px rgba(0, 255, 251, 0.9), -0.4854305389em 2.2876182472em 7px rgba(255, 0, 67, 0.9), -0.0456251205em 1.9375482826em 7px rgba(0, 255, 174, 0.9), 2.3818119796em 0.6016654432em 7px rgba(0, 255, 127, 0.9), 0.6968414747em 2.1724267873em 7px rgba(152, 255, 0, 0.9), 2.2129225326em -0.3131337786em 7px rgba(255, 54, 0, 0.9), 0.4108575442em 1.4557344499em 7px rgba(88, 255, 0, 0.9), 1.924424475em 0.2089949991em 7px rgba(0, 255, 36, 0.9), 2.210100592em 0.5248899172em 7px rgba(93, 0, 255, 0.9), 0.3407987354em 2.4081643901em 7px rgba(0, 255, 252, 0.9), 1.8567834903em 0.9559754003em 7px rgba(255, 148, 0, 0.9), 1.0113432018em 1.3332433761em 7px rgba(255, 0, 247, 0.9), 2.0730318669em 1.4551818388em 7px rgba(227, 255, 0, 0.9), 0.3024399773em 0.9312467814em 7px rgba(219, 255, 0, 0.9), 2.2153824603em 1.0177481192em 7px rgba(255, 0, 140, 0.9), -0.2649535576em -0.3785821326em 7px rgba(198, 0, 255, 0.9), -0.4238131841em 2.3483576453em 7px rgba(0, 185, 255, 0.9), 0.0929646336em 1.7949829627em 7px rgba(214, 0, 255, 0.9), 0.4544112777em 2.0032442656em 7px rgba(0, 68, 255, 0.9), 1.5276108642em 1.0943346241em 7px rgba(255, 149, 0, 0.9), -0.1800684169em 2.0176236035em 7px rgba(255, 0, 229, 0.9), -0.3511971183em -0.4882913224em 7px rgba(0, 255, 132, 0.9), 0.5093775658em 1.962198115em 7px rgba(255, 0, 173, 0.9), 0.8182310781em -0.2481754337em 7px rgba(0, 255, 87, 0.9), 1.0286949717em -0.4433671607em 7px rgba(255, 251, 0, 0.9), 1.1357847397em 0.2262562358em 7px rgba(255, 90, 0, 0.9), 2.0242912399em 0.5917640403em 7px rgba(255, 0, 204, 0.9), 0.7880053255em 0.2837436014em 7px rgba(255, 0, 111, 0.9), -0.4551761127em 2.1064838854em 7px rgba(255, 0, 205, 0.9), 0.4068846611em -0.0115058215em 7px rgba(0, 143, 255, 0.9), -0.208240519em 1.2425010631em 7px rgba(186, 255, 0, 0.9), -0.2877365264em 2.2296545026em 7px rgba(0, 255, 205, 0.9), 1.4274998536em -0.1066944789em 7px rgba(255, 0, 63, 0.9), 0.8114513399em -0.4703885565em 7px rgba(228, 255, 0, 0.9), 1.8907175833em -0.1024666687em 7px rgba(0, 70, 255, 0.9), 0.747714578em 0.1051795876em 7px rgba(0, 74, 255, 0.9), 2.1717188262em 1.1966513131em 7px rgba(69, 255, 0, 0.9), -0.1606573678em 0.4106775866em 7px rgba(167, 0, 255, 0.9), -0.0257401568em 2.2798997219em 7px rgba(0, 198, 255, 0.9);
  animation-duration: 43s;
  animation-delay: -32s;
}

#bg::before {
  text-shadow: 2.0965375436em 2.4673679592em 7px rgba(0, 255, 178, 0.9), 0.6851336666em 0.8747896151em 7px rgba(55, 0, 255, 0.9), 2.1844903729em 0.7718206269em 7px rgba(0, 255, 99, 0.9), 1.5274419697em 0.0208066319em 7px rgba(69, 255, 0, 0.9), 2.3562277273em 1.7292050182em 7px rgba(100, 255, 0, 0.9), -0.1863421643em 2.1093689813em 7px rgba(155, 0, 255, 0.9), 2.4407789271em 1.1144125643em 7px rgba(55, 255, 0, 0.9), 2.0773679437em 2.4607497762em 7px rgba(255, 0, 68, 0.9), 0.8509347971em 1.1850895993em 7px rgba(255, 0, 231, 0.9), 1.3740489912em 0.9202276164em 7px rgba(218, 0, 255, 0.9), 0.5466462142em -0.488479523em 7px rgba(0, 138, 255, 0.9), 1.9816581914em 1.9330048188em 7px rgba(255, 0, 186, 0.9), 2.3898122969em 0.9011027986em 7px rgba(255, 0, 41, 0.9), 1.5398409961em 0.6328897434em 7px rgba(70, 0, 255, 0.9), 2.423339672em 0.8701521996em 7px rgba(26, 255, 0, 0.9), 0.978099353em 0.5801815209em 7px rgba(58, 0, 255, 0.9), 1.0800590869em 1.9045274253em 7px rgba(0, 9, 255, 0.9), 0.9191507508em 1.8795736214em 7px rgba(169, 255, 0, 0.9), 0.5626860829em 2.1198747403em 7px rgba(0, 34, 255, 0.9), 0.6552646495em -0.3647108803em 7px rgba(0, 120, 255, 0.9), 1.6729866775em 2.0047461908em 7px rgba(255, 24, 0, 0.9), 2.2506461995em 0.7711594774em 7px rgba(95, 255, 0, 0.9), 1.6924700394em 0.0767081296em 7px rgba(255, 31, 0, 0.9), 1.9793002265em 1.8277540431em 7px rgba(202, 255, 0, 0.9), 2.4545780557em 0.817274599em 7px rgba(18, 0, 255, 0.9), 1.113754748em 2.3392208232em 7px rgba(1, 0, 255, 0.9), -0.0213113646em 0.2129285617em 7px rgba(255, 235, 0, 0.9), 0.9844229443em 0.2988405644em 7px rgba(255, 0, 254, 0.9), 0.127534142em 1.833093817em 7px rgba(9, 0, 255, 0.9), 0.2695079445em 0.3930270547em 7px rgba(255, 29, 0, 0.9), 0.7910270041em 2.3113915394em 7px rgba(225, 255, 0, 0.9), 1.0336893534em 1.0102160615em 7px rgba(255, 89, 0, 0.9), 0.7324024091em 2.1849607865em 7px rgba(247, 0, 255, 0.9), 0.1237512885em 0.696433137em 7px rgba(0, 255, 69, 0.9), 1.694221762em 1.7715944066em 7px rgba(0, 255, 172, 0.9), 1.6380120595em 2.353139835em 7px rgba(64, 255, 0, 0.9), 1.3921797619em -0.1938380202em 7px rgba(0, 255, 205, 0.9), 0.1292213239em 0.5732412698em 7px rgba(0, 255, 4, 0.9), 0.0253825672em 1.0025230549em 7px rgba(0, 255, 162, 0.9), 2.3103170836em 2.0088693934em 7px rgba(0, 255, 221, 0.9), 0.9817734317em 1.649747503em 7px rgba(207, 0, 255, 0.9);
  animation-duration: 42s;
  animation-delay: -23s;
}

#bg::after {
  text-shadow: 0.8917365894em 1.3813090002em 7px rgba(0, 50, 255, 0.9), 0.8551912696em 2.3093558226em 7px rgba(0, 255, 9, 0.9), 1.6015790843em -0.1472137037em 7px rgba(149, 255, 0, 0.9), 0.1516952822em 0.3626557325em 7px rgba(172, 0, 255, 0.9), -0.2297697301em 0.1059639061em 7px rgba(0, 255, 66, 0.9), 1.3404548675em 1.6759314308em 7px rgba(255, 0, 99, 0.9), 0.2525967681em -0.2508672261em 7px rgba(255, 205, 0, 0.9), 2.2826419543em -0.4239058066em 7px rgba(0, 59, 255, 0.9), -0.3581681251em 1.5438393393em 7px rgba(177, 255, 0, 0.9), 0.0825127332em 0.2026165397em 7px rgba(255, 214, 0, 0.9), 2.1970609399em 0.1353180237em 7px rgba(255, 74, 0, 0.9), -0.3450193823em 1.6497918528em 7px rgba(255, 0, 241, 0.9), 2.0958035253em 0.1571044431em 7px rgba(0, 249, 255, 0.9), 1.7075721089em 2.2165505374em 7px rgba(0, 82, 255, 0.9), 0.1732678504em 1.3051346271em 7px rgba(255, 202, 0, 0.9), 1.9567716416em 0.8520706338em 7px rgba(114, 0, 255, 0.9), 1.4799810883em 2.4101352427em 7px rgba(0, 172, 255, 0.9), -0.451166471em 2.4100739159em 7px rgba(42, 0, 255, 0.9), 1.5250763519em 0.6086017843em 7px rgba(0, 168, 255, 0.9), 1.4785162707em 0.1229516539em 7px rgba(77, 0, 255, 0.9), 0.6626395754em 1.4438932334em 7px rgba(0, 153, 255, 0.9), 2.2105799295em -0.3133617131em 7px rgba(255, 0, 43, 0.9), 0.3862943901em 0.6107892732em 7px rgba(78, 255, 0, 0.9), 2.0260925612em 1.2643077503em 7px rgba(35, 0, 255, 0.9), 1.0679391526em 1.8080329696em 7px rgba(255, 0, 240, 0.9), 0.286069386em 1.2708061987em 7px rgba(255, 0, 135, 0.9), 0.221882319em 0.0170401236em 7px rgba(148, 0, 255, 0.9), 0.8538877772em 2.3283344233em 7px rgba(255, 0, 69, 0.9), 1.7285794261em 0.6462685477em 7px rgba(255, 29, 0, 0.9), 1.5685009363em 0.6310828321em 7px rgba(13, 255, 0, 0.9), 2.4995750659em 0.2379163162em 7px rgba(0, 44, 255, 0.9), -0.4319982784em 2.2744771089em 7px rgba(54, 255, 0, 0.9), 1.3014603461em 2.075069805em 7px rgba(0, 239, 255, 0.9), 0.1223588307em 0.216412857em 7px rgba(0, 255, 239, 0.9), 0.8823276316em -0.1897638772em 7px rgba(0, 28, 255, 0.9), 0.0900926187em 2.0283937262em 7px rgba(255, 0, 193, 0.9), 1.5117453241em 2.1718137002em 7px rgba(0, 255, 116, 0.9), 2.3678992384em 1.7287734034em 7px rgba(184, 255, 0, 0.9), -0.045847053em -0.354187926em 7px rgba(132, 0, 255, 0.9), 0.1185685285em 1.5894691733em 7px rgba(198, 0, 255, 0.9), -0.4841039878em 0.2133946285em 7px rgba(194, 255, 0, 0.9);
  animation-duration: 41s;
  animation-delay: -19s;
}

@keyframes move {
  from {
    transform: rotate(0deg) scale(12) translateX(-20px);
  }
  to {
    transform: rotate(360deg) scale(18) translateX(20px);
  }
}


#glitch {
  animation: glitch 1s linear infinite;
}

@keyframes glitch{
  2%,64%{
    transform: translate(2px,0) skew(0deg);
  }
  4%,60%{
    transform: translate(-2px,0) skew(0deg);
  }
  62%{
    transform: translate(0,0) skew(5deg);
  }
}

#glitch:before,
#glitch:after{
  content: attr(title);
  position: absolute;
  left: 0;
}

#glitch:before{
  animation: glitchTop 1s linear infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

@keyframes glitchTop{
  2%,64%{
    transform: translate(2px,-2px);
  }
  4%,60%{
    transform: translate(-2px,2px);
  }
  62%{
    transform: translate(13px,-1px) skew(-13deg);
  }
}

#glitch:after{
  animation: glitchBotom 1.5s linear infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitchBotom{
  2%,64%{
    transform: translate(-2px,0);
  }
  4%,60%{
    transform: translate(-2px,0);
  }
  62%{
    transform: translate(-22px,5px) skew(21deg);
  }
}