* {
  box-sizing: border-box; }

body, h1, ul, ol {
  margin: 0;
  padding: 0; }

ul {
  list-style: none; }

a {
  text-decoration: none; }

html, body {
  height: 100%; }

body {
  min-width: 320px;
  overflow-x: hidden;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  background: url("../images/sc2void.jpg") no-repeat;
  background-size: 100%; }
  @media (max-width: 768px) {
    body {
      background-size: cover;
      background-position: center; } }

#sc-void {
  left: 50%;
  bottom: 60px;
  position: absolute;
  width: 680px;
  height: 300px;
  transform: translate(-50%);
  background: url("../images/sc-logo.png") no-repeat;
  background-size: 100%; }
  @media (max-width: 768px) {
    #sc-void {
      width: 100%;
      bottom: 5%; } }
  @media (max-width: 480px) {
    #sc-void {
      max-height: 210px; } }

#logo-blizzard {
  width: 75px;
  height: 32px;
  transition: .2s;
  align-self: center;
  fill: #009ae4; }
  #logo-blizzard:hover {
    fill: #00aeff; }

#navbar-trigger {
  top: 18px;
  right: 12px;
  width: 24px;
  height: 24px;
  z-index: 9;
  display: none;
  cursor: pointer;
  position: absolute;
  color: #009ae4;
  transition: .2s; }
  #navbar-trigger:hover {
    color: #00aeff; }
  @media (max-width: 768px) {
    #navbar-trigger {
      display: block; } }

#navbar-icon {
  width: inherit;
  height: inherit;
  fill: currentColor; }
  #navbar-icon rect {
    transition: .3s; }
  #navbar-state:checked ~ .header #navbar-icon rect:nth-child(3) {
    transform: translateY(-16px); }
  #navbar-state:checked ~ .header #navbar-icon rect:nth-child(4) {
    transform: translateX(16px); }
  #navbar-state:checked ~ .header #navbar-icon rect:nth-child(5) {
    transform: translateY(16px); }
  #navbar-state:checked ~ .header #navbar-icon rect:nth-child(8) {
    transform: translateX(-16px); }

#logo-link {
  height: 100%;
  display: flex;
  z-index: 999;
  flex-basis: 120px;
  text-align: center;
  position: relative;
  justify-content: center; }
  @media (max-width: 768px) {
    #logo-link {
      margin: auto;
      width: 75px;
      height: 60px; } }

#navbar-state {
  display: none; }

.header {
  z-index: 99;
  overflow: hidden;
  height: 60px;
  background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.8)); }
  .header .container {
    display: flex;
    margin: auto;
    height: 100%;
    position: relative;
    max-width: 1100px; }
  @media (max-width: 768px) {
    .header {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      transition: background .35s linear, height .35s ease-in;
      height: 60px; }
      #navbar-state:checked ~ .header {
        height: 100%;
        background: linear-gradient(black, rgba(0, 0, 0, 0.8));
        transition: background .35s linear, height .35s ease-in 200ms; }
      .header .container {
        display: block; } }

.games {
  flex: 1;
  display: flex; }
  @media (max-width: 768px) {
    .games {
      display: block;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      padding-top: 70px; } }
  .games .game {
    flex: 1;
    display: flex;
    position: relative;
    transition: background-position .3s; }
    @media (max-width: 768px) {
      .games .game {
        opacity: 0;
        padding: 0 8%;
        height: 60px !important;
        transform: scale(1.1) translateY(-24px);
        transition: opacity .3s ease-out, transform .3s ease-out; }
        #navbar-state:checked ~ .header .games .game {
          opacity: 1;
          transform: none; }
        .games .game-logo {
          margin-right: 10px;
          transform: scale(1) !important; }
        .games .game-name {
          width: auto !important;
          position: static !important;
          transform: none !important; }
        .games .game-link {
          border-bottom: 1px solid #333;
          justify-content: flex-start !important; } }
    .games .game-logo {
      transition: .3s;
      transform: scale(1);
      height: 42px; }
    .games .game-name {
      top: 0;
      left: 0;
      width: 100%;
      transition: .2s;
      text-align: center;
      position: absolute;
      transform: scale(0) translateY(100px); }
    .games .game:hover .game-logo {
      transform: scale(0.4); }
    .games .game:hover .game-name {
      transform: scale(1.1) translateY(20px); }
    .games .game-link {
      width: 100%;
      display: flex;
      transition: .2s;
      white-space: nowrap;
      align-items: center;
      position: relative;
      justify-content: center;
      height: 60px;
      color: rgba(255, 255, 255, 0.7);
      font-size: 14px; }
      .games .game-link:hover {
        color: #fff; }
    @media (max-width: 768px) {
      .games .game:nth-child(6) {
        transition-delay: 50ms, 50ms; }
      .games .game:nth-child(5) {
        transition-delay: 100ms, 100ms; }
      .games .game:nth-child(4) {
        transition-delay: 150ms, 150ms; }
      .games .game:nth-child(3) {
        transition-delay: 200ms, 200ms; }
      .games .game:nth-child(2) {
        transition-delay: 250ms, 250ms; }
      .games .game:nth-child(1) {
        transition-delay: 300ms, 300ms; }
      #navbar-state:checked ~ .header .games .game:nth-child(1) {
        transition-delay: 200ms, 200ms; }
      #navbar-state:checked ~ .header .games .game:nth-child(2) {
        transition-delay: 250ms, 250ms; }
      #navbar-state:checked ~ .header .games .game:nth-child(3) {
        transition-delay: 300ms, 300ms; }
      #navbar-state:checked ~ .header .games .game:nth-child(4) {
        transition-delay: 350ms, 350ms; }
      #navbar-state:checked ~ .header .games .game:nth-child(5) {
        transition-delay: 400ms, 400ms; }
      #navbar-state:checked ~ .header .games .game:nth-child(6) {
        transition-delay: 450ms, 450ms; } }