/* FONT IMPORT */
@import url('https://fonts.cdnfonts.com/css/open-dyslexic');

@import url('https://fonts.cdnfonts.com/css/good-dog');
                

body {
color: black;
font-family: 'Comic Sans MS';
background-image: url(https://sillied.neocities.org/img/background.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
}
a {
color: black;
text-decoration: none;
}

#myheader {
background-image: url(https://sillied.neocities.org/img/header.jpg) ;
border-top: 4px solid;
border-left: 2px solid;
border-right: 2px solid;
border-bottom: 4px solid;
border-color: #920000;
color: white;
padding: 0px 10px 10px 20px;
width: 800px;
height: 100px;
margin-left: 20%;
margin-right: 20%;
vertical-align: middle;
font-size: 30px;
text-shadow: 2px 4px 4px #067106;
text-transform: uppercase;
position: relative;
border-radius: 3px;
}

h2 {
margin-left: 15px;
margin-top: 33px;
letter-spacing: 6px;
font-family: 'GoodDog Plain', Open-Dyslexic;
width: 100px;
font-size: 67px;
}
#moving {
background: black;
width: 825px;
height: 20px;
margin-left: 20%;
margin-right: 20%;
margin-top: .3%;
padding: -2px 1px 0.5px 22px;
border-left: 4px solid;
border-right: 4px solid;
border-top: 2px solid;
border-bottom: 2px solid;
border-color: #920000;
position: relative;
border-radius: 22px;
color: white;
}
.hover:hover {
    text-decoration: underline;
}
#animated:hover {
 animation-name: shake;
 animation-duration: 0.5s;
 animation-iteration-count: infinite;
 cursor: pointer;
}
@keyframes shake {
  0% { transform: translate(0, 0) rotate(0deg); 
  }
  25% { transform: translate(-1px, 0px) rotate(3deg); 
  }
  50% { transform: translate(0, 0) rotate(0deg); }
  75% { transform: translate(-1px, 1px) rotate(-5deg); 
  }
  100% { transform: translate(0, 0) rotate(0deg); 
  }
}
#main {
background: black;
height: 1000px;
width: 830px;
margin-left: 20%;
margin-right: 20%;
margin-top: .3%;
border-left: 2px solid;
border-right: 2px solid;
border-top: 2px solid;
border-color: #920000;
position: relative;
border-radius: 1px;
}
#finisher {
background: #CB6467;
background: linear-gradient(0deg, rgba(203, 100, 103, 1) 0%, rgba(0, 0, 0, 1) 100%);
width: 796px;
height: 30px;
margin-left: 20%;
margin-right: 20%;
padding: 30px 12px 0.5px 22px;
font-size: 11px;
border-left: 2px solid;
border-right: 2px solid;
border-bottom: 4px solid;
border-color: #920000;
font-family: Open-Dyslexic;
word-spacing: 9px;
position: relative;
text-align: right;
color: white;
border-radius: 1px;
}
iframe {
width: 805px;
height: 990px;
margin-left: 2%;
margin-right: 2%;
margin-top: 2.2%;
border: transparent;
}


.buttons-n-blinkers {
  overflow: hidden;
  width: fit-content; /* just for demonstration */
  position: relative;
}
@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.buttons-n-blinkers > div {
  animation: marquee 12s linear infinite;
  animation-play-state: paused;
  animation-delay: -6s; /* 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;
}
.buttons-n-blinkers:hover > div.play {
  animation-play-state: paused;
}


</style>
</head>