*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  color: black;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
}

#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

main {
  position: fixed;
  top: 0;
  left: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  padding-top: 10.648vh;
  padding-right: 26.563vw;
  padding-left: 16.667vh;
  width: 100vw;
  height: 100vh;
}

/* Status & Logo */

#statusContainer {
  position: relative;
  -webkit-flex: 0 0 11.111vh;
  flex: 0 0 11.111vh;
  background-image: -webkit-linear-gradient(left, black 30%, transparent);
  background-image: linear-gradient(to right, black 30%, transparent);
  color: white;
}

#logo {
  position: absolute;
  top: -5.556vh;
  left: -4.948vw;
  z-index: 1;
  width: 21.759vmin;
  height: 21.759vmin;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-filter: drop-shadow(0 0.185vmin 1.204vmin rgba(0, 0, 0, 0.4));
  filter: drop-shadow(0 0.185vmin 1.204vmin rgba(0, 0, 0, 0.4));
}

[data-league='SOCCER'] #logo,
[data-league^='NCAA'] #logo {
  top: -4.167vh;
  left: -4.167vw;
  width: 18.981vmin;
  height: 18.981vmin;
}

body.no-logo #logo {
  visibility: hidden;
}

#status {
  padding-left: 8.333vw;
  text-align: left;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 4.63vmin;
  line-height: 11.111vh;
}

/* Games */

#gamesContainer {
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  background-color: black;
}

.game {
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 0 0 12.685vh;
  flex: 0 0 12.685vh;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  background-color: white;
  line-height: 3.704vmin;
}

#gameTemplate {
  display: none;
}

.game + .game {
  margin-top: 0.463vmin;
}

.game-info-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 0 0 21.354vw;
  flex: 0 0 21.354vw;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  background-color: #f2f2f2;
  text-align: right;
  line-height: 3.472vmin;
}

.game-info-container img {
  width: 12.685vh;
  height: 12.685vh;
  object-fit: contain;
}

.game-info-container img.hidden {
  visibility: hidden;
}

.game-date-time {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-justify-content: center;
  justify-content: center;
  white-space: nowrap;
}

.game-date {
  font-size: 2.407vmin;
}

.game-time {
  font-weight: bold;
  font-size: 2.685vmin;
}

.game-team-names {
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-justify-content: center;
  justify-content: center;
  padding-left: 2.083vw;
  font-weight: bold;
  font-size: 3.056vmin;
}

.game-team-home:not(:empty)::before {
  content: '@ ';
}

.game-network {
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 0 0 10.156vw;
  flex: 0 0 10.156vw;
  -webkit-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-justify-content: center;
  justify-content: center;
  padding-right: 2.083vw;
  color: #dc2429;
  text-align: right;
  white-space: pre;
  font-weight: bold;
  font-size: 2.407vmin;
}

/* Transitions */

body:not(.no-transitions) .transition,
body:not(.no-transitions) .text-transition {
  opacity: 0;
  -webkit-transition: 1000ms opacity ease-in-out;
  transition: 1000ms opacity ease-in-out;
}

body:not(.fade-out) .transition.visible,
body:not(.fade-out) main.visible .text-transition {
  opacity: 1 !important;
}

/* Error Message */

#error {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  -webkit-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 0 5.208vw;
  width: 100vw;
  height: 100vh;
  background-color: black;
  color: white;
  text-align: center;
  white-space: pre-wrap;
  font-size: 5.093vmin;
  line-height: 6.204vmin;
}

#error.visible {
  display: -webkit-flex;
  display: flex;
}

/* Portrait Styles */

@media (orientation: portrait) {
  main {
    padding-top: 10.156vh;
    padding-right: 6.944vw;
    padding-left: 8.796vw;
  }

  #statusContainer {
    -webkit-flex-basis: 6.25vh;
    flex-basis: 6.25vh;
  }

  #logo {
    top: -4.167vh;
    left: -8.796vw;
    width: 25vmin;
    height: 25vmin;
  }

  [data-league='SOCCER'] #logo,
  [data-league^='NCAA'] #logo {
    top: -3.385vh;
    left: -6.944vw;
    width: 21.296vmin;
    height: 21.296vmin;
  }

  #status {
    padding-left: 16.667vw;
    line-height: 6.25vh;
  }

  #error.visible {
    padding: 0 4.63vw;
  }

  .game {
    -webkit-flex-basis: 10.938vh;
    flex-basis: 10.938vh;
  }

  .game-info-container {
    -webkit-flex-basis: 20.37vw;
    flex-basis: 20.37vw;
  }

  .game-info-container img {
    width: 5.469vh;
    height: 10.938vh;
  }

  .game-team-names {
    padding-left: 4.63vw;
  }

  .game-network {
    -webkit-flex-basis: 13.889vw;
    flex-basis: 13.889vw;
    padding-right: 2.315vw;
  }
}

/* Fonts */

@font-face {
  font-weight: 600;
  font-style: normal;
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-SemiBold.ttf') format('truetype');
}

@font-face {
  font-weight: bold;
  font-style: normal;
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
}