body {
  background-color: black;
  background-image: url("/background.png");
  color: white;
  font-family: serif;
  font-size: 1.98em;

  --pink: rgba(221, 157, 255, 0.7);
  --blue: rgba(12, 79, 251, 0.4);
  --green:rgba(157, 255, 210, 1);
}

* {
  animation: chromatic-move 8000ms ease infinite;
}

a {
  color: rgb(255, 124, 139);
}

.flex-container {
  display:flex;
  flex-direction:column; 
  justify-content: center;
  align-items: center;
  margin: auto;
  width: 50vw;
}

.game-logo {
  width:315px;
  height:250px;
  border-radius:5px;
}

.vignette {
    width:20vw;
    height:20vh;
    filter:blur(180px);
    opacity: 1;
    position: fixed;
    background-color:black;
    pointer-events: none;
}

.crt-lines {
  z-index:9999;
  background-image: url("/crt-lines.png");
  transform: rotate(1deg);
  top:-5vh;
  left:-5vw;
  width:110vw;
  height:110vh;
  position:fixed;
  animation: scroll-lines 4000ms linear infinite;
  opacity:0.2;
  pointer-events: none;
}

.header-box {
  width:50vw;
  background-color: rgba(222, 129, 224, 0.3);
  display:flex;
  align-items:center;
  justify-content: center;
  border-radius:10px;
  flex-direction:column;
  margin: 30px 0px 30px 0px;
  padding-top:20px;
}

.download-container {
  display:flex;
  flex-direction:row;
  justify-content: center;
  align-items: center;
}

.download-link {
  background-color: rgb(242, 203, 208);
  cursor: pointer;
  width:10vw;
  height:100px;
  margin:10px;
  border-radius:10px;
  display:flex;
  flex-direction:row;
  justify-content: center;
  align-items: center;
}

.download-text {
  font-size:0.8em;
  margin-left: 10px;
}

.download-icon {
  width:30px;
  height:30px;
}

.socials {
  font-size:0.5em;
  display:flex;
  flex-direction:column; 
  justify-content: center;
  align-items: center;
  margin: auto;
  width: 50vw;
}

@keyframes chromatic-move { 
  100%{text-shadow: 0px  0px  0px var(--pink),  0px  0px  0px var(--blue),  0px  0px  0px var(--green);}
  24%{text-shadow:  0px -4px  2px var(--pink),  3px  3px  3px var(--blue), -4px  2px  2px var(--green);}
  40%{text-shadow:  4px  2px  2px var(--pink), -2px  4px  3px var(--blue),  0px -4px  3px var(--green);}
  81%{text-shadow: -3px  3px  2px var(--pink),  0px -2px  3px var(--blue),  4px  3px  2px var(--green);}
  100%{text-shadow: 0px  0px  0px var(--pink),  0px  0px  0px var(--blue),  0px  0px  0px var(--green);}
}

@keyframes scroll-lines {
  0%{top:100vh}
  100%{top:-5vh}
}