@font-face {
  font-family: Porkys;
  src: url('fonts/PORKYS_.TTF')
}

@font-face {
  font-family: Smalle;
  src: url('fonts/smalle.ttf')
}
.scroll {
  overflow: scroll;
}

iframe {
  border: 0px;
}

body {
  background: #6CE8FF;
  color: #208AE0;
  font-family: Smalle;
}

.main {
  max-width: 700px;
}

.header {
  width: 650px;
}

.header span {
  font-family: Porkys;
  font-size: 70px;
  color: #D9FFF8;
  -webkit-text-stroke-width: 5px;
  -webkit-text-stroke-color: #208AE0;
}

.box {
  background-color: #D9FFF8;
  border: 3px solid #208AE0;
  padding: 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
  border-radius: 5px 5px 0px 0px;
  text-align: center;
}

.box .title {
  padding: 0px;
  background: #208AE0;
  color: #D9FFF8;
}

.box span {
  margin: 2px;
  text-align:left;
  display: block;
}

.update span {
  display:block;
}
.buttons-n-blinkers {
  overflow: hidden;
  width: fit-content; /* just for demonstration */
  position: relative;
  width: 350px;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  
  100% {
    transform: translateX(-100%);
  }
}

.buttons-n-blinkers > div {
  animation: marquee 20s linear infinite;
  animation-play-state: paused;
  animation-delay: -10s; /* This MUST be -duration/2 */
  width: 100%;
  min-width: fit-content;
  text-wrap: nowrap;
}

.buttons-n-blinkers > div.follower {
  position: absolute;
  top: 0;
  animation-delay: 0s;
}

.buttons-n-blinkers > div.play {
  animation-play-state: running;
}


::-webkit-scrollbar-corner {
  background: rgba(0,0,0,0);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(0,0,0,0);
}

::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0);
}

a:link {
  color: #208AE0;
  text-decoration: none;
}

a:visited {
  color: #208AE0;
  text-decoration: none;
}

a:hover {
  color: #FFE381;
  text-decoration:none;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0);
}


.buttons-n-blinkers:hover > div.play {
  animation-play-state: paused;
}