/* gradient info goes in the first two lines in body, or five lines if you picked max compatibility */

body {
  background: rgb(0, 0, 0);
  background: -moz-linear-gradient(
    139deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(102, 102, 102, 1) 100%
  );
  background: -webkit-linear-gradient(
    139deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(102, 102, 102, 1) 100%
  );
  background: linear-gradient(
    139deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(102, 102, 102, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#666666",GradientType=1);
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
}

/* regular button with color change on hover */

.link {
  text-align: center;
  padding: 20px;
  border: 3px solid white;
  width: 300px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
}

/* this solidifies the .link button on hover */
a {
  text-decoration: none;
  color: #fff;
  transition: color 0.8s;
}
/* this changes the text from white to black for .link on hover */
a.link:hover {
  color: #8a0000;
  background: #fff;
}

/* regular button with no color change or hover effect */

.link2 {
  text-align: center;
  padding: 20px;
  border: 3px solid white;
  width: 300px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
}

/* solid button with text color change on hover */

.link3 {
  text-align: center;
  color: #000;
  font-weight: bold;
  background: #fff;
  padding: 20px;
  border: 3px solid white;
  width: 300px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
}
/* this changes the text from black to grey for .link3 on hover */

a.link3:hover {
  color: #999;
  background: #fff;
}

/* solid button with no color change or hover effect */

.link4 {
  text-align: center;
  color: #000;
  font-weight: bold;
  background: #fff;
  padding: 20px;
  border: 3px solid white;
  width: 300px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
}

/* controls text and image slide in effect */
.animate-top {
  position: relative;
  animation: animatetop 1.2s;
}
@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

/* controls image fade in effect */
.opacity {
  animation: opac 2.2s;
}
@keyframes opac {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}