.img-grayscale img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

/* To Do: Adjust button styling on different screen sizes */

button {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

.game-header-link-holder {
    position: relative;
    display: flex;
}

.game-header-link {
    flex:  1 1 auto;
}

.game-header-link-img {
    flex:  1 1 auto;
}


.game-header-link-holder {
  transition-property: background;
  transition-duration: .6s;
  transition-timing-function: ease;
}

.game-header-link-img {
  transition-property: filter;
  transition-duration: .6s;
  transition-timing-function: ease;
}

.game-header-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;

}
.game-header-link-overlay {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.25);
    z-index: 2;
}

.game-header-link-overlay-visible {
    background-color: rgba(0,0,0,0.5);
    display: block;
}

.game-header-link-img-holder {
    background: rgba(0, 0, 0, 0.4);
}

.game-header-links {
	height: 38px;
	margin-bottom: 0;
}

.game-header-link {
	font-size: 1rem;
	height: 38px;
	width: 84px;
}

.game-header-link-img {
	height: 38px;
}



.game-header-link-holder {
    background: linear-gradient(90deg, #DF185B 0%, #DF185B 33%, #20222E 66%, #20222E 100%);
    background-size: 300% 100%;
    background-position-x: 100%;
}
.game-header-link-holder>.game-header-link-img-holder>.game-header-link-img {
    filter: invert(20%) sepia(53%) saturate(7490%) hue-rotate(330deg) brightness(90%) contrast(93%);
}

.game-header-link-holder:hover,
.game-header-link-holder:active {
    background-position-x: 0;
}
.game-header-link-holder:hover>.game-header-link-img-holder>.game-header-link-img,
.game-header-link-holder:active>.game-header-link-img-holder>.game-header-link-img {
    filter: invert(100%);
}

.game-header-link-holder:active>.game-header-link-overlay {
    display: block;
}


.game-header-link-holder {
    width: calc(112px + 38px);
    height: 38px;
}
.game-header-link {
    width: 112px;
}
@media (min-width: 1200px) {
    .game-header-link-holder {
        width: calc(125px + 38px);
        height: 38px;
    }
    .game-header-link {
        width: 125px;
    }
}



.game-header-links {
    height: 38px;
}

.game-header-link {
    font-size: 0.78rem;
    height: 38px;
    width: 69px;
}

.game-header-link-img {
    height: 38px;
}

.screen-container {
  --screenContainerWidth: 100%;
}

@media (min-width: 425px) {
  .screen-container {
    --screenContainerWidth: 425px;
  }
}

@media (min-width: 768px) {
  .screen-container {
    --screenContainerWidth: 744px;
  }
}

@media (min-width: 1024px) {
  .screen-container {
    --screenContainerWidth: 868px;
  }
}

@media (min-width: 1200px) {
  .screen-container {
    --screenContainerWidth: 1024px;
  }
}

@media (min-width: 1440px) {
  .screen-container {
    --screenContainerWidth: 1230px;
  }
}

.screen-container {
  --screenContainerMargin: calc((100% - var(--screenContainerWidth))/2);
  margin-left: var(--screenContainerMargin);
  margin-right: var(--screenContainerMargin);
  width: var(--screenContainerWidth);
}

/* large desktops */
@media (min-width: 1200px) {
  .game-header-links {
      height: 38px;
      margin-bottom: 0;
  }

  .game-header-link {
      font-size: 0.96rem;
      height: 38px;
      width: 84px;
  }

  .game-header-link-img {
      height: 38px;
  }
}