body {
    background: url(radebg.gif);
    background-size: 100%;
    background-color: black;
    text-align: center;
    color: #fff;
    font-family: ComicNeue;
    font-size: large;
    padding:0px;
    margin: 0px;
}

@font-face {
    font-family: ComicNeue;
    src: url(ComicNeue-Regular.ttf);
  }

  @font-face {
    font-family: BungeeSpice;
    src: url(BungeeSpice-Regular.ttf);
  }
  @font-face {
    font-family: PressStart2P;
    src: url(PressStart2P-Regular.ttf);
  }

  colortime.ttf
  
.main {
    padding: 20px;
}

h1 { background-color: #00f; width: 650px; padding: 30px; margin: 5px auto;     font-family: fredoka; color: cyan;
}
h2 { background-color: #00f; width: 500px; margin: auto; animation: shake 0.5s;   animation-iteration-count: infinite;      font-family: BungeeSpice; }
h3 { background-color: #00f; color: pink; width: 440px; margin: 20px auto; padding: 5px; font-family: PressStart2P; }

p { background-color: rgba(0, 0, 255, 0.8); width: 600px;
    margin: 30px auto 30px auto; padding: 20px; }
table { margin: 10px auto 10px auto;}

img { margin: 40px; }

hr { max-width: 1400px;}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }

  @keyframes moveupdown {
    30% { transform: translate(0px, -100px) rotate(5deg); }
    60% { transform: translate(0px, 100px) rotate(-7deg); }
    100% { transform: translate(0px, 0px) rotate(0deg); }
  }

/*
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
*/

.main > ul {
    background-color: #c00;
    width:400px;
    border-collapse:separate;
    border:solid black 1px;
    border-radius:16px;
    margin: auto;
    text-align: left;
    padding: 10px;
}

.main > ul > li {
    margin-left: 30px;
}

a {
    color: #0f0;
    font-weight: bold;
}

.gametable {
    background-color: #c00;
    padding: 20px;
    border-collapse:separate;
    border:solid black 1px;
    border-radius:16px;

}

.gametable th {
    padding: 8px;
}

.gametable td {
    border: 1px dotted #fff;
    padding: 8px;
}


.capcom {
    width: 200px; 
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
.beestorm {
    width: 200px;
}
.pcb {
    width: 100px; 
}
.cardboard {
    width: 200px;
    animation: moveupdown 2.5s;
    animation-iteration-count: infinite; 
}
.pc {
    width: 200px;
}
.exa {
    width: 200px;
}

.counter {
    margin: 0px; padding: 0px;
}
  
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

@font-face {
    font-family: fredoka;
    src: url(FredokaOne-Regular.ttf);
  }

.coolpic {width: 600px;}