html {
  height: 100%;
  font-family: "Open Sans", sans-serif;
}

body {
  margin: 0 auto;
  font-family: 'Open Sans', sans-serif;
  height: 100%;
}

.parallax {
  height: 100vh;
  overflow-x: hidden;
  overflow-x: auto;
  perspective: 1;
}

.parallax-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.layer1 {
   transform: translateZ(-5);
}

.layer2 {
  transform: translateZ(-5);
}

.layer3 {
  transform: translateZ(-2);
}

.parallax-layer.layer1 {
  width: 100%;
  height: 100rem;
  background-image: url("/img/openttd_background2_compressed.png");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  object-fit: cover;
}

.parallax-layer.layer2 {
  width: 100%;
  height: 100rem;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.01) 70%, rgba(0, 0, 0, 0.5) 100%);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  object-fit: cover;
}

.parallax-layer.layer3 {
  position: absolute;
  height: 90rem;
  margin-top: 1vh;
  margin-bottom: 1vh;
  margin-left: 25vw;
  margin-right: 25vw;
  background: rgba(0, 0, 0, 0.3);
  background-position: center;
  border-radius: 50px;
}

.parallax-text {
  font-size: 1.75rem;
  word-wrap: break-word;
  color: #dadada;
  text-align: center;
  text-shadow: 3px 3px 1px black;
  padding-top: 20px;
  padding-bottom: 20px;
}


/* Set text params */
h1 {
  font-size: 72pt;
  margin-top: 1vh;
  margin-bottom: 1vh;
}

h2 {
  font-size: 32pt;
  margin-top: 1vh;
  margin-bottom: 1vh;
}

/* the smallest title*/
h3 {
  font-size: small;
  margin-top: 1vh;
  margin-bottom: 1vh;
}

p {
  font-size: 18pt;
  margin-top: 1vh;
  margin-bottom: 1vh;
}

a:link {
  color: rgb(245, 210, 0);
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: rgb(210, 235, 0);
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: rgb(255, 195, 0);
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: rgb(255, 175, 0);
  background-color: transparent;
  text-decoration: underline;
}