@charset "utf-8";
*,
*::before,
*::after {
  box-sizing: border-box;
}

#container {
width: 100%;
}

body {
  background-color: #2a4551;
  font-family: Georgia, "Times New Roman", serif;
  color: #e0e0e0;
  line-height: 1.25;
}

header {
  text-align: center;
  background-color: #484644;
}

main {
  width: 80%;
  background-color: #495a5f;
  background-image: url("trinity.jpg");
  float: left;
  padding: 5px;
  margin-left: 10%;
}

main a:link, main a:visited {
color: #b69ebe;
text-decoration: none;
}

main a:hover {
color: #a68eae;
text-decoration: underline;
}

footer {
clear: both;
background-color: #484644;
color: #e0e0e0;
text-align: center;
margin-left: 10%;
padding: 5px;
font-size: 12pt;
width: 80%;
}

footer a:link {
color: #86746f;
text-decoration: none;
}

footer a:visited {
color: #808080;
text-decoration: none;
}

footer a:hover {
text-decoration: underline;
}

nav {
color: #e0e0e0;
padding: 5px;
width: 80%;
margin-left: 10%;
font-weight: bold;
}

nav ul {
list-style: none;
}

nav ul li {
float: left;
padding: 15px;

}

nav ul li a:link, nav ul li a:visited {
display: block;
padding: 5px 15px;
width: 150px;
margin-right: 4px;
color: #e0e0e0;
background-color: #495a5f;
text-decoration: none;
}

nav ul li a:hover {
color: #495a5f;
background-color: #e0e0e0;
}


.grid {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.card {
  position: relative;
  transition: all .4s linear;
  transform-style: preserve-3d;
  margin: 5px;
}

.card, 
.back, 
.front {
  height: 150px;
  width: 120px;
}

.back, .front {
  position: absolute;
  backface-visibility: hidden;
}

.front {
  z-index: 2;
  background: #959498 url('images/cardBack.jpg') no-repeat center center / contain;
}

.back {
  transform: rotateY(180deg);
  background-color: #241c24;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.selected {
  transform: rotateY(180deg);
}

.match .front {
display: none !important;
/*background: #241c24 !important;*/
}