style.css

/*

This is a CSS file. CSS (Cascading Style Sheets) is a language for describing the
appearance of web pages. To create good-looking web pages, you need to learn CSS
in order to define the appearance and location of the HTML elements within the pages.

You can learn more about CSS here:
https://developer.mozilla.org/en-US/learn/css

This is a CSS comment. Anything inside these slashes and asterisks will be ignored
by the browser, which is handy for adding explanations to your CSS code!

*/

/* This selector matches any element on the page */
* {
  padding: 0;
  margin: 0;
}

/* The body element holds the whole web page */
body {
  /*
  Task 5 - Change the background color of the page

  Try changing the background color of the page. Right now, this color specified in HEX
  notiation, but you can also try experimenting with color keywords.

  Try changing the rule below to:
  background-color: blue;

  For more colors, see: http://www.html-color-names.com/color-chart.php
  */
  background-color: #F26522; /* this is the background color of the page */
  color: #DA4930; /* this is the default color of text on the page */
  font-family: "Days One", sans-serif; /* this is the default font on the page */
  text-align: center; /* this centers text on the page */
}

/* The #game element holds the game area */
#game {
  background-color: black; /* this is the background color that appears behind the cards */
  position: absolute; /* the rules here all handle positioning the #game element on the page */
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 255px;
  height: 420px;
  margin: auto;
  box-shadow: 0px 3px 12px #000;
  border-radius: 4px;
  padding: 10px;
}

/* These rules create the images on the cards */
.front {
  /*
  Task 6 - Change the image that appears on the front of the cards

  Right now, we're using a path to the an image included in a directory in our game,
  but you can also use an image that is hosted anywhere on the internet!

  Try changing the rule below to:
  background-image: url(http://www.raritananimalhospital.com/images/cat.jpg);

  For the best results, try finding images that are about the same size as the images
  that are currently being used (they're all 120x189 pixels).
  */
  background-image: url(./images/card.png); /* this is the image that appears on the front of all the cards */
  background-position: 0 0;
  border-radius: 4px;
  z-index: 10;
}

.ie {
  background-image: url(./images/ie.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.fx {
  background-image: url(./images/fx.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.cr {
  background-image: url(./images/cr.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.sf {
  background-image: url(./images/sf.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.op {
  background-image: url(./images/op.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.ns {
  background-image: url(./images/ns.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.tb {
  background-image: url(./images/tb.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.fm {
  background-image: url(./images/fm.png);
  background-repeat: no-repeat;
  background-size: contain;
}

/* The #gameIntro element holds the screen that shows when you start the app */
#gameIntro {
  text-align: center;
  position: absolute;
  margin: 10px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  -moz-transition: opacity 1s ease-out;
  -webkit-transition: opacity 1s ease-out;
  -o-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
}

#game.open #gameIntro {
  background-image: url(./images/start.png); /* this is the image that appears when you start the game */
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 3;
}

#game.play #gameIntro, #game.end #gameIntro {
  display: none;
}

/* The #gameStats element is the header bar at the top of the game */
#game.play #gameStats {
  display: block; /* this shows the bar when you start playing the game */
  background-color: #eee;
  width: 100%;
  float: left;
  box-shadow: inset 0 0 8px #000;
  border-radius: 4px;
  padding: 8px 0;
  height: 14px;
  font-size: 12px;
}

#gameStats {
  display: none;
}

/* The rules here are applied to the #install, #gamePlay, and #gameAgain buttons */
.button {
  background-color: white;
  border-radius: 5px;
  font-size: 2em;
  padding: 10px;
  width: 150px;
  border: 8px solid #DA4930;
  z-index: 99;
}

/* :hover styles are applied when the user's mouse hovers over the element */
.button:hover {
  background-color: #F26522 !important;
  color: #fff;
  cursor: pointer;
}

/* The #gameComplete element holds the screen that shows when you finish the game */
#gameComplete {
  background-image: url(./images/end.png);
  background-position: center 0;
  background-repeat: no-repeat;
  text-align: center;
  position: absolute;
  margin: 10px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  visibility: hidden;
  z-index: 1;
}

#game.end #gameComplete {
  opacity: 1;
  z-index: 3;
  visibility: visible;
  top: 0;
  bottom: 0;
}

#gameComplete a.button {
  background-color: white;
  border-radius: 5px;
  display: block;
  font-size: 30px;
  margin: 8px auto 0;
  padding: 10px;
  width: 200px;
  border: 8px solid #DA4930;
  text-decoration:none;
}

/* The #result element holds the score that appears at the end of the game */
#result {
  background-color: white;
  margin: 150px auto 0;
  width: 60%;
  border-radius: 5px;
  font-size: 20px;
  border: 8px solid #DA4930;
  padding: 20px 0;
  position: relative;
}

#install {
  margin: 10px auto 0;
  display: none;
}

#install.visible {
  display: block;
}

#gamePlay {
  margin: 220px auto 0;
  display: block;
}

#loading.loaded {
  display: none;
}

/* The #reset button and the #gameScore button are in the header bar */
#reset,
#gameScore {
  display: block;
  float: left;
  text-align: left;
  padding: 0 0 0 15px;
}

#reset {
  cursor: pointer;
}

/* The #cards element holds the cards */
#cards {
  position: absolute;
  top: 50px;
  left: 0;
  bottom: 0;
  right: 0;
  display: none;
  z-index: 2;
}

#game.play #cards {
  display: block;
}

/* 
The rules below here all control styling the cards, including the animations
that make the cards cards flip over
*/

.card {
  -webkit-perspective: 300px;
  -moz-perspective: 300px;
  width: 56px;
  height: 88px;
  position: absolute;
  -moz-transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  cursor: pointer;
}

.face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition-property: opacity, transform, box-shadow;
  -webkit-transition-duration: .5s;
  -webkit-backface-visibility: hidden;
  -moz-transition-property: opacity, -moz-transform, box-shadow;
  -moz-transition-duration: .5s;
  -moz-backface-visibility: hidden;
  -o-transition-property: opacity, -o-transform, box-shadow;
  -o-transition-duration: .5s;
  -o-backface-visibility: hidden;
}

.back {
  -webkit-transform: rotate3d(0,1,0,-180deg);
  -moz-transform: rotate3d(0,1,0,-180deg);
  z-index: 8;
  border-radius: 4px;
}

.card:hover .face, .card-flipped .face {
  box-shadow: 0 0 10px #ccc;
}

.card-flipped .front {
  -webkit-transform: rotate3d(0,1,0,180deg) scale(1.1);
  -moz-transform: rotate3d(0,1,0,180deg) scale(1.1);
  -o-transform: scale(1.1);
  z-index: 8;
}

.card-flipped .back {
  -webkit-transform: rotate3d(0,1,0,0deg) scale(1.1);
  -moz-transform: rotate3d(0,1,0,0deg) scale(1.1);
  -o-transform: scale(1.1);
  z-index: 10;
}

.card-removed {
  opacity: 0;
}

.reset {
  box-shadow: 0 0 30px #fff;
}