:root {
  --card-width: 136px;
  --card-height: 211px;
  /* random color changed using js */
  --random-glow: rgba(0,0,0,0);
}

body {
  margin: 0;
  background: url(img/background.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: repeat-x;
  color: #e39b2d;
  font-family: 'Josefin Sans';
  text-shadow: 2px 2px #000;
  min-height: 100vh;
}

h1 {
  font-size: 60px;
  text-align: center;
}

#ui-container {
  text-align: center;
}

#ui-container h3 {
  margin: 0;
  display: inline-block;
  font-size: 40px;
  text-align: center;
}

#ui-container h3:first-child {
  margin-right: 40px;
}

#card-container {
  font-size:0;
  margin: 50px auto;
  width: calc((var(--card-width) + 50px) * 4);
}

.card {
  display: inline-block;
  position: relative;
  margin: 10px;
  width: var(--card-width);
  height: var(--card-height);
  border: 10px solid rgba(0,0,0,0); 
  border-radius: 5%;
  overflow: hidden;
}

/* Style the two logo images themselves. */
.card-down,
.card-up {
  /* Take images out of the flow. */
  position: absolute;

  width: 100%;
  height: 100%;

  /* When facing away from the screen each image should be hidden. */
  backface-visibility: hidden;
  border-radius: 5px;
  transition-duration: .3s;
}

.card-down {
  background-image: url(img/BlackAndGold.png);
  background-position: center;
  background-size: cover;
}

.card-up {
  background-position: center;
  background-size: cover;
  transform: rotateY(180deg);
}

.flipped .card-down {
  transform: rotateY(180deg);
}

.flipped .card-up {
  transform: rotateY(0deg);
}

.image-1 .card-up {
  background-image: url(img/image-1.png);
}

.image-2 .card-up {
  background-image: url(img/image-2.png);
}

.image-3 .card-up {
  background-image: url(img/image-3.png);
}

.image-4 .card-up {
  background-image: url(img/image-4.png);
}

.image-5 .card-up {
  background-image: url(img/image-5.png);
}

.image-6 .card-up {
  background-image: url(img/image-6.png);
}

.matched {
  animation: flash 3s;
}
/* from transparent to random rgb value back to transparent */
@keyframes flash {
  0% {
    background-color: rgba(0,0,0,0);
  }
  50% {
    background-color: var(--random-glow);
  }
  100% {
    background-color: rgba(0,0,0,0);
  }
}


#navBar{
  height: 100px;
  width: 100vw;
  background-color:#e39b2d;
  background-attachment: fixed;
}

#home{
  float: right;
  height: 50px;
  width: 100px;
  color:#e39b2d;
  background-color: #197013;
  margin: 20px 20px 20px 20px;
  border-radius: 10px;
  text-align: center;
  vertical-align: middle;
}

#homeTest{
  color:#e39b2d;
  font-weight: bold;
  text-decoration-style: none;


  /*display:inline-block;
  position: relative;
  width: 50px;
  height: 20px;
   Center vertically 
  top: 30%;
  margin-top: -20px;*/

}