* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* border-box includes padding and border values
display: flex and margin: auto centers
the container vetically and horizontally
*/

body {
  margin:0;
  background-image: url('/images/Background Flat halftone FX.png');
  background-size: cover;
  background-position: center; 
  background-attachment: fixed;
  background-color: #12181f;
  color: #ffffff;
  font-size: 12px;
  font-family: "Courier New",Courier,monospace;  
}



/* Style the header */
.header {
  background-color: rgba(0,0,0,0.75);
  padding: 20px;
  text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  
}

/* Style the topnav links */
.topnav a {
  
  display: block;
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 1px 3px;
  text-decoration: none;
  
  
}

/* Change color on hover */
.topnav a:hover {
  background-color: #000000;
  color: black;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
    background-color: rgba(0,0,0,0.75);

}

/* Left and right column */
.column.side {
  width: 25%;
  background-color: rgba(0,0,0,0.75);
}

/* Middle column */
.column.middle {
  width: 50%;
  padding: 5px;
  background-color: rgba(0,0,0,0.75);
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
    margin: 0;
  }
}




.gameboard {
		border: 9px groove #ffe6b3;
		width: 450px;
		height: 550px;
		position: relative;
	  top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

/* flex-container by default shrinks the width
to fit the container
flex-wrap sets flex-items, the direct child elements of a flex-container, 
to wrap along multiple lines according to their size
Perspective sets how far in the z-plane an object is from the viewer.
Lower value, greater effect- 1000px should be subtle
*/

.memory-game {
  width: 350px;
  height: 450px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  perspective: 1000px;
  margin-top: 10px;

}


/*
setting the memory-card to postition: relative
will allow the memory-card's children, in this case 
card front and back, to be absolutely positioned
relative TO the memory card
backface visibility hides the back of the card when it's flipped
*/
.memory-card {
  width: calc(25% - 10px);
  height: calc(25% - 10px);
  margin: 5px;
  position: relative;
  box-shadow: 1px 1px 1px rgba(0,0,0,.3);
  transform: scale(1);
  transform-style: preserve-3d;
  transition: transform .5s;
}

/*
width and height are being calculated for
w: 4 card column minus 10px from the margin
h: 3 card rows minus 10px from margin
-preserve 3d positions the card in the 3d space made by the parent,
not doing so would flatten it to z=0
*/




.back-face:hover {
  background-color: #7dce9f;
  color: black;
}





/*
:active is a psuedo-class
that will trigger every time the memory-card is clicked.
*/


 .memory-card:active {
   transform: scale(0.97);
   transition: transform .2s;
 }



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



/* 
setting the card front and back to position: absolute 
will remove the elements from the OG position
and stack them on top of each other
*/


.front-face { 
  width: 100%;
  height: 100%;
  padding: 5px;
  position: absolute;
  border-radius: 5px;
  background: #27ae60;
  backface-visibility: hidden;
}

.back-face {
  width: 100%;
  height: 100%;
  padding: 20px;
  position: absolute;
  border-radius: 5px;
  background: #27ae60;
  backface-visibility: hidden;
}



.front-face {
  transform: rotateY(180deg);
}




/* Style the footer*/
footer {
  
    background-color: rgba(0,0,0,0.75);
    font-family: "Courier New",Courier,monospace;
    font-size: 14px;
    text-align: center;
    margin: 0;
    color: #ffffff;
    text-decoration: line-through;
    text-shadow: #ffff80 1px 0 10px;
}

a {  
color: #ffffff;
text-align: center;
text-shadow: #ffff80 1px 0 10px;
}

a:hover {

text-shadow: #ffff80 1px 0 10px,
1px 1px 0 rgba( 0, 0, 0, 0.25);
}