body {
   background: url("mainpage_blinkies/wallpaper.jpg")  
}
body {
  font-family: "Times New Roman", Times, serif;
}
h1{
  color: seashell;
  background-color: hotpink;
  padding: 15px;
  font-family: 'starbim';
}
body {
  width: 1000px;
  display: block;
  margin: auto;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
img {
  display: block;
  margin: auto;
  width: auto;
}
@font-face {
    font-family: 'Starbim';
    src: url('fonts/Starbim.eot');
    src: url('fonts/Starbim.eot?#iefix') format('embedded-opentype'),
         url('fonts/Starbim.woff2') format('woff2'),
         url('fonts/Starbim.woff') format('woff'),
         url('fonts/Starbim.ttf')  format('truetype'),
         url('fonts/Starbim.svg#Starbim') format('svg');
}
a:link {
  color: orchid;
}

a:visited {
  color: lavender;
}
.marquee-text {
  overflow: scroll;
}

.marquee-text-track {
  display: flex;
  padding-left: 4.8rem;
  gap: 4.8rem;
  width: max-content;
  animation: marquee-move-text var(--speed, 10s) linear infinite
    var(--direction, forwards);
}

.marquee-text p {
  border: 1px solid white;
  background-color: #141414;
  border-radius: 999px;
  padding: 1rem 2.5rem;
}

@keyframes marquee-move-text {
  to {
    transform: translateX(-50%);
  }
}

/* This wrapper div is only there so we know for sure we have enough text to fill your screen.
   If you want to have this marquee loop on devices with a very large width, you simply need to add more text.*/
.wrapper {
  max-width: 800px;
  margin: 0 auto;
  color: #fff;
}

.fadeout-horizontal {
  mask-image: linear-gradient(
    to right,
    transparent,
    black 5rem,
    black calc(100% - 5rem),
    transparent
  );
}