@keyframes blinkingText {
  0% {
    color: rgb(94, 179, 194);
  }
  49% {
    color: transparent;
  }
}

a:active {
  color: rgb(132, 230, 173);
  text-decoration: none;
}

a:hover {
  color: rgb(147, 230, 132);
  text-decoration: none;
}

a:link {
  color: rgb(20, 151, 70);
  text-decoration: none;
}

a:visited {
  color: rgb(20, 151, 70);
  text-decoration: none;
}

.blinking {
  animation: blinkingText 1.2s infinite;
}

footer {
    color: rgb(94, 179, 194);
  opacity: 0.7;
}

h1 {
  font-size: 200px;
}

html,
body {
  /*  background-color: #ededed; */
  background-color: #ffffff;
  font-family: Helvetica Neue, Arial, sans-serif;
}

.logo-kerning {
  display: inline-block;
}

/* shift 2nd letter left */
.logo-kerning span:nth-child(2) {
  display: inline-block;
  transform: translateX(-0.05em);
}

/* shift 3rd letter left */
.logo-kerning span:nth-child(3) {
  display: inline-block;
  transform: translateX(-0.09em);
}

/* shift 4th letter left */
.logo-kerning span:nth-child(4) {
  display: inline-block;
  transform: translateX(-0.12em);
}

/* shift 5th letter left */
.logo-kerning span:nth-child(5) {
  display: inline-block;
  transform: translateX(-0.15em);
}

main {
  align-self: center;
  color: rgba(94, 179, 194);
  justify-self: center;
}

#o80 {
  opacity: 0.80;
}

#o85 {
  opacity: 0.85;
}

#o90 {
  opacity: 0.90;
}

#o95 {
  opacity: 0.95;
}

.wrapper {
  display: grid;
  grid-template-columns: 100vw;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  text-align: center;
}

@media only screen and (max-width: 40em) {
  footer {
    font-size: 12px;
  }

  h1 {
    font-size: 50px;
  }
}