:root {
  --header-outer-height: 110px;
  --header-inner-height: 70px;
  --header-height-difference: calc( var(--header-outer-height) - var(--header-inner-height));
  --header-bg: #fff;
}

.responsive-wrapper {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/* Sticky header */

.header-outer {
  /* Make it stick */
  height: var(--header-outer-height);
  position: sticky;
  top: calc( var(--header-height-difference) * -1);
  /* Multiply by -1 to get a negative value */
  display: flex;
  align-items: center;
  /* Other */
  background-color: var(--header-bg);
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}

.header-inner {
  /* Make it stick */
  height: var(--header-inner-height);
  position: sticky;
  top: 0;
  /* Other */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Styling of other elements */

.header-logo img {
  display: block;
  height: calc(var(--header-inner-height) - 10px);
}

.header-navigation {
  display: flex;
  flex-wrap: wrap;
}

.header-navigation a {
  font-size: 1.125rem;
  color: inherit;
  margin-left: 1.75rem;
  position: relative;
  font-weight: 500;
  text-decoration: none;
}

.header-navigation a:hover:after {
  transform: scalex(1);
}

.header-navigation a:after {
  transition: 0.25s ease;
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: currentcolor;
  transform: scalex(0);
  position: absolute;
  bottom: -2px;
  left: 0;
}

body {
  font-family: "DM Sans", sans-serif;
  background-color: #f2f5f7;
  line-height: 1.5;
}

@media (max-width: 970px) {
  #app {
    width: 100%;
  }
}

@media (min-width: 970px) {
  #app {
    width: 970px;
    margin: 0 auto;
  }
}

.game-container {
  display: grid;
  grid-template-columns: none;
  gap: 15px;
}

@media (max-width: 319px){
  .game-container{
    grid-template-columns: 1fr;
  }
}

@media (min-width: 320px) and (max-width: 479px){
  .game-container{
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 480px) and (max-width: 768px){
  .game-container{
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 769px){
  .game-container{
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 5px;
  cursor: pointer;
}

/* On mouse-over, add a deeper shadow */

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}


.card:link,
.card:link h2,
.card:link span,
.card:visited,
.card:visited h2,
.card:visited span,
.card:hover,
.card:hover h2,
.card:hover span,
.card:active,
.card:active h2,
.card:active span
{ 
  text-decoration: none; 
}

/* Add some padding inside the card container */

.container {
  padding: 2px 16px;
}

.card img {
  border-radius: 5px 5px 0 0;
}