body {
    font-family: "PT Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
  }
  
  
  
  
  /* Google Fonts
  
  Used for Game Center Logo
  */
  
  
  /* cyrillic-ext */
  @font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/pressstart2p/v9/e3t4euO8T-267oIAQAu6jDQyK3nYivN04w.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/pressstart2p/v9/e3t4euO8T-267oIAQAu6jDQyK3nRivN04w.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek */
  @font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/pressstart2p/v9/e3t4euO8T-267oIAQAu6jDQyK3nWivN04w.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/pressstart2p/v9/e3t4euO8T-267oIAQAu6jDQyK3nbivN04w.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/pressstart2p/v9/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  
  
  
  
  
  
  /* Page Background  */
  
  .game_center_page_wrap{
    background-image: radial-gradient(circle,rgb(15, 114, 201),rgb(9, 50, 80));
    user-select: none;
  }
  
  /*  Responsive Game Center Logo  */
  .game_center_responsive_logo {
    font-family: 'Press Start 2P';
    font-size:6vw; 
    color: #2196f3;
    text-align: center; 
    margin: 0; 
    padding: 0; 
    border: 0;
    user-select: none
  }
  
  /* Image and Image Description CSS
  
  Credit to: https://stackoverflow.com/users/1171873/jo%c3%a3o-paulo-macedo
  Modified by TMN
  */
  .gc__img__wrap {
  position: relative;
  display: inline-block;
  margin: 10px;
  background-color: rgb(46, 97, 240);
  border-radius: 10px;
  }
  
  
  .gc__img__img {
  vertical-align: bottom;
  width: 200px;
  height: 200px;
  border-radius: 10px;
  }
  
  .gc__img__description_layer {
    border-radius: 10px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: rgb(255, 255, 255);
  visibility: hidden;
  opacity: 0;
  justify-content: center;
  z-index: 10;

  
  
  transition: opacity .2s, visibility .2s;
  }
  
  .gc__img__wrap:hover .gc__img__description_layer {
  visibility: visible;
  opacity: 1;
  }
  
  .gc__img__description {
  transition: .2s;
  transform: translateY(1em);
  text-align: center;
  }
  
  .gc__img__wrap:hover .gc__img__description {
  transform: translateY(0);
  }
  
  .gc-iframe-container {display: flex; width: 100%; height: 100%; flex-direction: column; overflow: hidden;}
  .first-row {background-color: lime; }
  .gc-iframe { flex-grow: 1; border: none; margin: 0; padding: 0; border:0px; background: url("/static/images/loading.gif") center center no-repeat white; }
  
  .gc-iframe-fullscreen {  
    width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9999;
      background-color: black;
  }
  
  
  /* Make Images appear better of mobile*/
  @media only screen and (max-width: 450px) {
    .gc__img__img {
      vertical-align: bottom;
      width: 100px;
      height: 100px;
      }}
    
    @media only screen and (min-width: 450px) {
      .gc__img__img {
        vertical-align: bottom;
        width: 200px;
        height: 200px;
        }}
  
  
  /* CSS for demo page overlay*/
  #gc_overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.747);
    z-index: 2;
    cursor: pointer;
  }
  
  #gc_overlay_text{
    position: absolute;
    top: 50%;
    left: 50%;
    color: white;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
  }
  


/* CSS for special badges */
  .special_game .new_game_badge {
    position: absolute;
    top: 5%;
    left: 0px;
    z-index: 1;
    background-image: linear-gradient(45deg, red, orange);
    transition: opacity .2s, visibility .2s;
}

.special_game .featured_game_badge {
    position: absolute;
    top: 5%;
    left: 0px;
    z-index: 1;
    background-image: linear-gradient(45deg, #9c27b0, #2196f3);
    transition: opacity .2s, visibility .2s;
}

.special_game h1{
    margin:  0;
    padding: 0;
}

@media screen and (max-width: 768px) {
    .special_game .badge {
        top: 5%;
        left: 0px;
    }
    .special_game h1 {
        font-size: 1.5rem;
    }
}