pong.css

@font-face {
    font-family: "Fedra";
    src: url("FedraSansAltPro-Light.otf");
    font-style: normal;
    font-weight: normal;
    font-stretch: normal;
}

@keyframes blinker {  
 0% { opacity: 1.0; }
 50% { opacity: 0.0; }
 100% { opacity: 1.0; }
 }

html {
    font-family: "Fedra", "Helvetica", "Arial", sans-serif;
}

body {
    background-color: #1A1A1A;
    color: #FFFFFF;
    font-size: 12pt;
    padding: 2em;
    text-align: center;
}

.logo {
    margin: 0 auto;
    font-size: 20pt;
    height: 85px;
    width: 800px;
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.logoTextHolder {
    line-height: 1.15;
    padding-top: 10px;
    padding-bottom: 10px;
}

.logoTextHolder:after {
    clear: both;
}

.splash{
    background-color: rgba(55, 55, 55, 0.7);
    height: 600px;
    width: 800px;
    z-index: 100;
    position: absolute;
    top:131px;
}

.splash span{
    color: white;
    display: inline-block;
    animation:1s blinker linear infinite;
}

.hidden{
    display: none;
}

.timer-container {
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: 20pt;
}

.score-container {
    position: relative;
    width: 800px;
    margin: auto;
}

.score {
    position: absolute;
    font-size: 60pt;
    top: 10px;
}

#score1 {
    right: 440px;
}

#score2 {
    left: 440px;
}

@media screen and (min-width: 0px) {
  #game    { display: block; width: 800px; height: 600px; margin: 0 auto; }
  .splash  { width: 800px; height: 600px; left: calc((100% - 800px) / 2); }
  .splash span {font-size: 40px; line-height: 600px;}
  .score-container { width: 800px; }
  #score1 { right: 440px; }
  #score2 { left: 440px; }
}

@media screen and (min-width: 1200px) {
  #game    { width: 800px; height: 600px; }
  .splash  { width: 800px; height: 600px; left: calc((100% - 800px) / 2); }
  .splash span {font-size: 40px; line-height: 600px;}
  .score-container { width: 800px; }
  #score1 { right: 440px; }
  #score2 { left: 440px; }
}

@media screen and (min-width: 1600px) {
  #game    { width: 1024px; height: 768px; }
  .splash  { width: 1024px; height: 768px; left: calc((100% - 1024px) / 2); } 
  .splash span {font-size: 60px; line-height: 770px;}
  .score-container { width: 1024px; }
  #score1 { right: 550px; }
  #score2 { left: 550px; }
}