/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@keyframes bg-scroll {
	from {
		background-position: 0px 0px;
	}

	to {
		background-position: 0px -128px;
	}
}
@keyframes guy {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}
.link a:link {
  color: black;
  background-color: transparent;
  text-decoration: underline;
}

.link a:visited {
  color: black;
  background-color: transparent;
  text-decoration: underline;
}

.link a:hover {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}

.link a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}

.title { 
  outline: 5px;
    outline-style: outset;
  outline-color: #800000;
    border: 5px solid transparent; /* Required for border-image */
  width: 500px;
  border-image: url('border.png') 10 round;
 position: absolute;
left: 50%;
top: 10%;
transform: translate(-50%, -50%);
  text-align: center;
   text-shadow: 0px 3px yellow;
    background-color: red;
  color: #000000;
 font-family: 'New Rocker';
}

.button .img2 {
    position: absolute;
    opacity: 0;
}
.textdiv {
   text-align: center;
   color: red;
   text-shadow: 0px 3px black;
}

.button .img2:hover {
 animation: guy 0.3s linear 1;
 opacity: 1;
}
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 600px;
}
.button2 {
 position: absolute;
left: 10%;
top: 10%;
transform: translate(-50%, -50%);
}
.button img {
  width: 50%;
}
.knowledge { 
  outline: 5px;
    outline-style: outset;
  outline-color: #800000;
    border: 5px solid transparent; /* Required for border-image */
  width: 600px;
  border-image: url('border.png') 10 round;
 position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, -50%);
padding-left: 80px;
    background-color: red;
  color: #000000;
 font-family: 'New Rocker';
}
.body { 
  outline: 5px;
    outline-style: outset;
  outline-color: #800000;
    border: 5px solid transparent; /* Required for border-image */
  width: 500px;
  border-image: url('border.png') 10 round;
 position: absolute;
left: 50%;
top: 60%;
transform: translate(-50%, -50%);
padding-left: 80px;
    background-color: red;
  color: #000000;
 font-family: 'New Rocker';
}
.bigbody { 
  outline: 5px;
    outline-style: outset;
  outline-color: #800000;
    border: 5px solid transparent; /* Required for border-image */
  width: 500px;
  border-image: url('border.png') 10 round;
 position: absolute;
left: 30%;
top: 50%;
transform: translate(-50%, -50%);
padding-left: 40px;
    background-color: red;
  color: #000000;
 font-family: 'New Rocker';
}
.bigimg { 
 position: absolute;
left: 70%;
top: 50%;
transform: translate(-50%, -50%);
}
body {
animation: bg-scroll 2s linear infinite;
 background-image: url("background.png");
  background-attachment: fixed;
  color: white;
 font-family: 'New Rocker';
}