body {
  background-color: #131517;
	font-family: "DejaVu Sans Mono";
}
h2 {
	color: white;
}
p {
	color: cyan;
}
h2 {
  font-size: calc(3.6px * 3);
}
p, input {
	font-size: calc(3.6px * 5);
}
.div-1 div, .div-3 div {
	width: 345px;
	background-color: #787878;
  padding: 4px 4px 0 4px;
	border: calc(3.6px * 0.75) solid;
	margin: calc(3.6px * 2) 0 calc(3.6px * 1) 0;
	text-align: center;
  border-radius: calc(3.6px * 2);
	animation: changebordercolor linear 5s infinite;
}
.div-1, .div-2 {
	display: flex;
	align-items: center;
	flex-direction: column;
}
input {
	margin: 0 calc(3.6px * 2) calc(3.6px * 5) 0;
	padding: 0 calc(3.6px * 2) 0 calc(3.6px * 2);
	height: calc(3.6px * 12.25);
	border: calc(3.6px * 0.5) solid;
	border-radius: calc(3.6px * 2);
	color: white;
	background-color: #333333;
	animation: changebordercolor linear 5s infinite;
}
::placeholder {
	color: #dddddd;
}
copyright {
  text-align: center;
  width: 100%;
  padding: 50px 0px 50px 0px;
  margin-top: 50px;
}
button {
  width: calc(3.6px * 13);
  height: calc(3.6px * 13);
  background-color: #333333;
  border: calc(3.6px * 0.5) solid;
  border-radius: calc(3.6px * 2);
  animation: changebordercolor, changecolor linear 5s infinite;
  font-size: calc(3.6px * 5);
}
input:focus {
	background-color: #777777;
}
@keyframes changebordercolor {
	0% {
		border-color: red;
	}
	20% {
		border-color: yellow;
  }
  40% {
		border-color: lime;
	}
  60% {
		border-color: cyan;
	}
  80% {
		border-color: magenta;
	}
  100% {
		border-color: red;
	}
}
@keyframes changecolor {
	0% {
		color: red;
	}
	20% {
		color: yellow;
  }
  40% {
		color: lime;
	}
  60% {
		color: cyan;
	}
  80% {
		color: magenta;
	}
  100% {
		color: red;
	}
}