snoop/web/style.css

body, html {
    padding: 0;
    margin: 0;
}

#particles-js {
    position: fixed;
    top: 0;
    right: 0;
    width: 66%;
    height: 100%;
    z-index: 1;
}

#report {
    display: inline-block;
    position: relative;
    z-index: 2;
    background-color: transparent
}

#meta {
    display: inline-block;
    position: relative;
    z-index: 2;
    background-color: transparent;
    width:48%
}

#buttons {
    display: inline-block;
    position: relative;
    z-index: 2;
    background-color: transparent
}

a.GL{
display: block;
font-size: 1.1em;
width:150px;
text-decoration:none;
text-align:center;
font: bold 19px arial;
text-transform: uppercase;
padding: 10px 15px;
margin: 3px;
color: #ccc;
background-color: Honeydew;
background-image: linear-gradient(top, #888 0%, #555 100%);
background-image: -webkit-gradient(linear, left top, left GLom, color-stop(0, #888), color-stop(1, #555));
background-image: -moz-linear-gradient(top, #888 0%, #555 100%);
background-image: -o-linear-gradient(top, #888 0%, #555 100%);
border: none;
border-radius: 10px;
text-shadow: 0px -1px 0px blue;
box-shadow: 0px 1px 0px #666,0px 5px 0px #444,0px 6px 6px rgba(0, 0, 0, .6);
-webkit-transition: ease .15s all;
-moz-transition: ease .15s all;
-o-transition: ease .15s all;
transition: ease .15s all;
}
a.GL:hover, a.GL:focus{
-webkit-animation: linear 2.7s light infinite;
-moz-animation: linear 2.7s light infinite;
-o-animation: linear 2.7s light infinite;
animation: linear 2.7s light infinite;
}
@-webkit-keyframes light{
0%   { color: blue; text-shadow: 0px -1px 0px #000; }
50%   { color: blue; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; }
100% { color: blue; text-shadow: 0px -1px 0px #000; }
}
@-moz-keyframes light{
0%   { color: blue; text-shadow: 0px -1px 0px #000; }
50%   { color: blue; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; }
100% { color: blue; text-shadow: 0px -1px 0px #000; }
}
@-o-keyframes light{
0%   { color: blue; text-shadow: 0px -1px 0px #000; }
50%   { color: blue; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; }
100% { color: blue; text-shadow: 0px -1px 0px #000; }
}
@keyframes light{
0%   { color: blue; text-shadow: 0px -1px 0px #000; }
50%   { color: LightGrey; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; }
100% { color: blue; text-shadow: 0px -1px 0px #000; }
}
a.GL:active{
color: #fff;
text-shadow: 0px -1px 0px #444,0px 0px 5px #ffd,0px 0px 8px #fff;
box-shadow: 0px 1px 0px #666,0px 2px 0px #444,0px 2px 2px rgba(0, 0, 0, .9);
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
-o-transform: translateY(3px);
transform: translateY(3px);
}

a.SnA {
  float:left;
  margin-right:5px;
  margin-left:15px;
  font-family:arial;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: -1px;
  text-decoration: none;
  text-align:center;
  display:block;
  width:140px;
  color: #888888;
  position: relative;
  -webkit-transition: color 0.2s;
  -moz-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
}
a.SnA:hover {
  color: black;
  background:rgba(0,0,0,0.1);
}
a.SnA:after {
  left: -20px;
  -webkit-transition-property: left, opacity, top;
  -moz-transition-property: left, opacity, top;
  -o-transition-property: left, opacity, top;
  transition-property: left, opacity, top;
  -webkit-transition-duration: .2s, .2s, .2s;
  -moz-transition-duration: .2s, .2s, .2s;
  -o-transition-duration: .2s, .2s, .2s;
  transition-duration: .2s, .2s, .2s;
  content: "";
  width: 12px;
  height: 12px;
  background: transparent;
  position: absolute;
  border-left: 5px solid red;
  border-top: 5px solid red;
  top: -22px;
  opacity: 0;
}
a.SnA:hover:after {
  left: -10px;
  top: -12px;
  opacity: 1;
}
a.SnA:before {
  right: -20px;
  -webkit-transition-property: right, opacity, top;
  -moz-transition-property: right, opacity, top;
  -o-transition-property: right, opacity, top;
  transition-property: right, opacity, top;
  -webkit-transition-duration: .2s, .2s, .2s;
  -moz-transition-duration: .2s, .2s, .2s;
  -o-transition-duration: .2s, .2s, .2s;
  transition-duration: .2s, .2s, .2s;
  content: "";
  width: 12px;
  height: 12px;
  background: transparent;
  position: absolute;
  border-right: 5px solid red;
  border-top: 5px solid red;
  top: -22px;
  opacity: 0;
}
a.SnA:hover:before {
  right: -10px;
  top: -12px;
  opacity: 1;
}
.SnSpan:after {
  left: -20px;
  -webkit-transition-property: left, opacity, bottom;
  -moz-transition-property: left, opacity, bottom;
  -o-transition-property: left, opacity, bottom;
  transition-property: left, opacity, bottom;
  -webkit-transition-duration: .2s, .2s, .2s;
  -moz-transition-duration: .2s, .2s, .2s;
  -o-transition-duration: .2s, .2s, .2s;
  transition-duration: .2s, .2s, .2s;
  content: "";
  width: 12px;
  height: 12px;
  background: transparent;
  position: absolute;
  border-left: 5px solid red;
  border-bottom: 5px solid red;
  bottom: -24px;
  opacity: 0;
}
.SnSpan:hover:after {
  left: -10px;
  bottom: -14px;
  opacity: 1;
}
.SnSpan:before {
  right: -20px;
  -webkit-transition-property: right, opacity, bottom;
  -moz-transition-property: right, opacity, bottom;
  -o-transition-property: right, opacity, bottom;
  transition-property: right, opacity, bottom;
  -webkit-transition-duration: .2s, .2s, .2s;
  -moz-transition-duration: .2s, .2s, .2s;
  -o-transition-duration: .2s, .2s, .2s;
  transition-duration: .2s, .2s, .2s;
  content: "";
  width: 12px;
  height: 12px;
  background: transparent;
  position: absolute;
  border-right: 5px solid red;
  border-bottom: 5px solid red;
  bottom: -24px;
  opacity: 0;
}
.SnSpan:hover:before {
  right: -10px;
  bottom: -14px;
  opacity: 1;
}

a.DnA {
  float:left;
  margin-right:5px;
  margin-left:15px;
  font-family:arial;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: -1px;
  text-decoration: none;
  text-align:center;
  display:block;
  width:140px;
  color: #888888;
  position: relative;
  -webkit-transition: color 0.2s;
  -moz-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
}
a.DnA:hover {
  color: black;
  background:rgba(0,0,0,0.1);
}
a.DnA:after {
  left: -20px;
  -webkit-transition-property: left, opacity, top;
  -moz-transition-property: left, opacity, top;
  -o-transition-property: left, opacity, top;
  transition-property: left, opacity, top;
  -webkit-transition-duration: .2s, .2s, .2s;
  -moz-transition-duration: .2s, .2s, .2s;
  -o-transition-duration: .2s, .2s, .2s;
  transition-duration: .2s, .2s, .2s;
  content: "";
  width: 12px;
  height: 12px;
  background: transparent;
  position: absolute;
  border-left: 5px solid blue;
  border-top: 5px solid blue;
  top: -22px;
  opacity: 0;
}
a.DnA:hover:after {
  left: -10px;
  top: -12px;
  opacity: 1;
}
a.DnA:before {
  right: -20px;
  -webkit-transition-property: right, opacity, top;
  -moz-transition-property: right, opacity, top;
  -o-transition-property: right, opacity, top;
  transition-property: right, opacity, top;
  -webkit-transition-duration: .2s, .2s, .2s;
  -moz-transition-duration: .2s, .2s, .2s;
  -o-transition-duration: .2s, .2s, .2s;
  transition-duration: .2s, .2s, .2s;
  content: "";
  width: 12px;
  height: 12px;
  background: transparent;
  position: absolute;
  border-right: 5px solid blue;
  border-top: 5px solid blue;
  top: -22px;
  opacity: 0;
}
a.DnA:hover:before {
  right: -10px;
  top: -12px;
  opacity: 1;
}
.DnSpan:after {
  left: -20px;
  -webkit-transition-property: left, opacity, bottom;
  -moz-transition-property: left, opacity, bottom;
  -o-transition-property: left, opacity, bottom;
  transition-property: left, opacity, bottom;
  -webkit-transition-duration: .2s, .2s, .2s;
  -moz-transition-duration: .2s, .2s, .2s;
  -o-transition-duration: .2s, .2s, .2s;
  transition-duration: .2s, .2s, .2s;
  content: "";
  width: 12px;
  height: 12px;
  background: transparent;
  position: absolute;
  border-left: 5px solid blue;
  border-bottom: 5px solid blue;
  bottom: -24px;
  opacity: 0;
}
.DnSpan:hover:after {
  left: -10px;
  bottom: -14px;
  opacity: 1;
}
.DnSpan:before {
  right: -20px;
  -webkit-transition-property: right, opacity, bottom;
  -moz-transition-property: right, opacity, bottom;
  -o-transition-property: right, opacity, bottom;
  transition-property: right, opacity, bottom;
  -webkit-transition-duration: .2s, .2s, .2s;
  -moz-transition-duration: .2s, .2s, .2s;
  -o-transition-duration: .2s, .2s, .2s;
  transition-duration: .2s, .2s, .2s;
  content: "";
  width: 12px;
  height: 12px;
  background: transparent;
  position: absolute;
  border-right: 5px solid blue;
  border-bottom: 5px solid blue;
  bottom: -24px;
  opacity: 0;
}
.DnSpan:hover:before {
  right: -10px;
  bottom: -14px;
  opacity: 1;
}