@import url('https://fonts.googleapis.com/css?family=Lato');

a:link {
   color: Aqua;
   text-decoration: none;
   target-new: none;
  }
  a:visited {
   color: #348feb;
   text-decoration: none;
   target-new: none;
  }
  a:hover {
   color: Teal;
   text-decoration: underline;
   target-new: none;
  }

.buttons {
width: auto;
margin: 0 auto;
display: inline;
}

.button {
	width: auto;
	background:linear-gradient(to bottom, #fafafa 5%, #d4d4d4 100%);
	background-color:#fafafa;
	border-radius:10px;
	border:4px solid #dedede;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:28px;
	font-weight:bold;
	padding:17px 37px;
	text-decoration:none;
	text-shadow:0px 1px 0px #a1a1a1;
	margin: 0 auto;
}

.button2 {
	width: auto;
	background:linear-gradient(to bottom, #fafafa 5%, #d4d4d4 100%);
	background-color:#fafafa;
	border-radius:10px;
	border:3px solid #dedede;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:28px;
	font-weight:bold;
	padding:10px 27px;
	text-decoration:none;
	text-shadow:0px 1px 0px #a1a1a1;
	margin: 0 auto;
}
.button:hover,.button2:hover {
	background:linear-gradient(to bottom, #d4d4d4 5%, #fafafa 100%);
	background-color:#d4d4d4;
	color: inherit;
    text-decoration: none;
}
.button:active,.button2:active {
	position:relative;
	top:1px;
}

.button:link,.button2:link {
    color: inherit;
    text-decoration: none;
}
.button:visited,.button2:visited {
    color: inherit;
    text-decoration: none;
}


body {
  background-image: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ), url('background2.png');
  background-size: cover;
  background-attachment: fixed;
}

.overlay {
  border-radius:10px;
  margin: 20px auto;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 20px;
  max-width: 1250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

h1 {
	font-family: "Lato";
	color: white;
	font-size: 100px;
	text-shadow: 0px 2px 3px rgba(0, 0, 0, 1);
}

h2,h3 {
	font-family: "Lato";
	color: white;
	text-shadow: 0px 2px 3px rgba(0, 0, 0, 1);
}

p {
	font-size: 25px;
	font-family: "Lato";
	color: white;
	text-shadow: 0px 2px 3px rgba(0, 0, 0, 1);
}

rainbow {
		font-family: "Lato";
		font-size: 50px;
        animation-name: rainbow;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
      }
      rainbow, p {
        margin: 0.8rem 0;
      }
      @keyframes rainbow {
        0% { color: #ff0000; }
        17% { color: #ffff00; }
        33% { color: #00ff00; }
        50% { color: #00ffff; }
        67% { color: #0000ff; }
        83% { color: #ff00ff; }
        100% { color: #ff0000; }
      }