:root {
  --bg1: rgb(100, 0, 234);
  --bg2: rgb(237, 64, 121);
  --border-color: rgb(237, 64, 121);
  --text-hover: rgba(255, 255, 255, 0.25);
  --text-focus: rgba(255, 255, 255, 0.25);
  --text-active: rgba(255, 255, 255, 0.15);
}
@keyframes background-pan {
  from {
    background-position: 0% center;
  }
  
  to {
    background-position: -200% center;
  }
}
body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

  background-color:var(--bg1);
  animation: background-pan 13s linear infinite;
  background: linear-gradient(
    to right,
    var(--bg1),
    var(--bg2),
    var(--bg1)
  );
  background-size: 220%;
  height: 100vh;
  margin: 0px;
  overflow: hidden;
}
.centered {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
#text {
  color: rgba(255, 255, 255, 0.15);
  font-size: 20vmin;
  opacity:100;
  pointer-events: none;
  font-weight: bold;
  font-family: "Rubik", sans-serif;
  text-decoration: none;
  z-index: 1;
  /*border: 1px solid var(--border-color);*/
  
}
a {
  color: rgba(255, 255, 255, 0.15);
  font-size: 10vmin;
  opacity:100;
  font-weight: bold;
  font-family: "Rubik", sans-serif;
  text-decoration: none;
  z-index: 1;
  transition: 0.3s;
  /*border: 1px solid var(--border-color);*/
  
}

* {
  box-sizing: border-box;
}

main {
  flex-grow: 1;
  height: 100vh;
  margin: 0px;
  
}
main > article {
  display: grid;
  height: 100%;
  line-height: 0.6em;
  
}
main > article > .article-section{
  display: flex;
  height: 100%;
  /*border: 1px solid var(--border-color);*/
  
}
#title-section{
  align-items:flex-end;
  justify-content:center;
}
#link-section{
  align-items:flex-start;
  justify-content:center;
}

a:hover {
  color: var(--text-hover);

}

a:focus {
  color: var(--text-focus);
}
  a:active {
    color: var(--text-active);
}