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

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

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

a:link {
  color: rgb(96, 12, 231);
  text-decoration: none;
}

a:visited {
  color: rgb(96, 12, 231);
  text-decoration: none;
}

.blinking {
  animation: blinkingText 1.2s infinite;
}

footer {
  color: rgba(132, 94, 194);
  opacity: 0.7;
}

h1 {
  font-size: 100px;
}

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.04em);
}

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

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

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

main {
  align-self: center;
  color: rgba(132, 94, 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;
  }
}