body {
  background-color: white;
  margin: 0;
}

.nav-link {
  cursor: pointer;
  font-weight: bold;
  color: white !important;
  border-radius: 10px;
}

.nav-link:hover {
  cursor: pointer;
  font-weight: bold;
  background-color: white;
  color: #00a0e3 !important;
}

#gameHolder {
  padding: 10px 8vw;
  display: flex;
  flex-wrap: wrap;
}

.flip-card {
  cursor: pointer;
  background-color: transparent;
  width: 8vw;
  height: 8vw;
  max-width: 15%;
  margin: 3px 1vw;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front img,
.flip-card-back img {
  width: 100%;
}

/* Style the back side */
.flip-card-back {
  transform: rotateY(180deg);
}

#memory-bg {
  animation: bgfade 15s infinite;
  width: 100vw;
  height: calc(100vh - 56px);
  margin-bottom: calc(85px - 100vh);
  max-width: 100%;
}

@keyframes bgfade {
  0% {
    background: url(images/memory-bg1.jpg) no-repeat center center fixed;
    background-size: contain;
  }
  50% {
    background: url(images/memory-bg2.jpg) no-repeat center center fixed;
    background-size: contain;
  }
  100% {
    background: url(images/memory-bg1.jpg) no-repeat center center fixed;
    background-size: contain;
  }
}

#startGameModal .modal-header,
#scoreModal .modal-header,
#startGameButton {
  background-color: #00a0e3;
  color: white;
}

#startGameModal .modal-header button span,
#scoreModal .modal-header button span {
  color: white;
}

#resultModal .modal-header,
#resultModal .modal-content {
  border-bottom: 0 !important;
}

.text-winner {
  line-height: 80px;
}

#curPlayerName,
#resultLink {
  display: none;
}

.playerScoreName {
  display: flex;
  justify-content: space-around;
  padding: 5px 15px;
  font-size: 20px;
}

.pageTitle {
  width: 100%;
  font-size: 25px;
  margin-bottom: 20px;
  font-weight: bold;
}

.pageContent {
  font-size: 20px;
}