/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@import url("https://fonts.googleapis.com/css?family=Quicksand:400,700&display=swap");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.btn {
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
  background: #09d0b2;
  padding: .75rem 1.5rem;
  text-decoration: none;
  color: #fff;
  border-radius: .25rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.35s;
}

.btn:focus {
  background: #09d0b2;
  color: #fff;
}

.btn:hover {
  background: #e4bb15;
  color: #393A43;
}

body {
  background: #fff;
  color: #111;
  font-family: 'Quicksand', cursive;
  font-size: 16px;
}

header {
  padding: 2rem;
  text-align: center;
}

header h1 {
  font-size: 2.5rem;
}

.container {
  max-width: 800px;
  margin: 0 auto;
}

.top-bar {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-flex-wrap: wrap;
  /* OLD - iOS 6-, Safari 3.1-6, NEW - Chrome, TWEENER - IE 10 */
  -moz-flex-wrap: wrap;
  /* OLD - Firefox 19- */
  -ms-flex-wrap: wrap;
  /* IE 10 */
  flex-wrap: wrap;
  -webkit-justify-content: center;
  /* OLD - iOS 6-, Safari 3.1-6, NEW - Chrome */
  -moz-justify-content: center;
  /* OLD - Firefox 19- */
  -ms-flex-pack: center;
  /* IE 10 */
  justify-content: center;
  -webkit-align-items: center;
  /* OLD - iOS 6-, Safari 3.1-6, NEW - Chrome */
  -moz-align-items: center;
  /* OLD - Firefox 19- */
  -ms-flex-align: center;
  /* IE 10 */
  align-items: center;
  padding: 1rem 2.5% 2rem;
}

.top-bar div {
  margin: 0 1rem;
}

@media (min-width: 691px) {
  .top-bar #timer,
  .top-bar #moves {
    font-size: 1.45rem;
  }
}

.top-bar #timer {
  background: #eee;
  border-radius: .25rem;
  padding: .5rem 1rem;
}

@media (max-width: 690px) {
  .top-bar .reset {
    -webkit-box-flex: 0 0 100%;
    /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 0 0 100%;
    /* OLD - Firefox 19- */
    -webkit-flex: 0 0 100%;
    /* Chrome */
    -ms-flex: 0 0 100%;
    /* IE 10 */
    flex: 0 0 100%;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    margin-top: 2rem;
    text-align: center;
  }
}

#game {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-flex-wrap: wrap;
  /* OLD - iOS 6-, Safari 3.1-6, NEW - Chrome, TWEENER - IE 10 */
  -moz-flex-wrap: wrap;
  /* OLD - Firefox 19- */
  -ms-flex-wrap: wrap;
  /* IE 10 */
  flex-wrap: wrap;
  padding-bottom: 3rem;
}

#game .tile {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-box-flex: 0 0 20%;
  /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 0 0 20%;
  /* OLD - Firefox 19- */
  -webkit-flex: 0 0 20%;
  /* Chrome */
  -ms-flex: 0 0 20%;
  /* IE 10 */
  flex: 0 0 20%;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-justify-content: center;
  /* OLD - iOS 6-, Safari 3.1-6, NEW - Chrome */
  -moz-justify-content: center;
  /* OLD - Firefox 19- */
  -ms-flex-pack: center;
  /* IE 10 */
  justify-content: center;
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.2);
  position: relative;
  vertical-align: middle;
  background: #393A43;
  height: 5rem;
  margin: 2.5%;
  border-radius: .5rem;
  color: #fff;
  font-size: 4rem;
  text-align: center;
  box-sizing: border-box;
  border: 5px solid transparent;
  transition: all 0.35s;
}

#game .tile:before {
  position: absolute;
  top: 30%;
  content: '';
  display: block;
  font-family: 'FontAwesome';
  font-size: 2rem;
  opacity: 0;
  transition: all .1s;
}

#game .tile:not(.flipped), #game .tile:not(.selected) {
  cursor: pointer;
}

#game .tile:not(.flipped):hover, #game .tile:not(.flipped):focus, #game .tile:not(.selected):hover, #game .tile:not(.selected):focus {
  background-color: #292930;
}

#game .tile.selected:before, #game .tile.flipped:before {
  opacity: .9;
}

#game .tile.selected.bomb, #game .tile.flipped.bomb {
  background-color: #c72323;
}

#game .tile.selected.bomb:before, #game .tile.flipped.bomb:before {
  content: '\f1e2';
}

#game .tile.selected.diamond, #game .tile.flipped.diamond {
  background-color: #e02d8a;
}

#game .tile.selected.diamond:before, #game .tile.flipped.diamond:before {
  content: '\f219';
}

#game .tile.selected.leaf, #game .tile.flipped.leaf {
  background-color: #1dcd14;
}

#game .tile.selected.leaf:before, #game .tile.flipped.leaf:before {
  content: '\f06c';
}

#game .tile.selected.paper, #game .tile.flipped.paper {
  background-color: #b436d9;
}

#game .tile.selected.paper:before, #game .tile.flipped.paper:before {
  content: '\f0c6';
}

#game .tile.selected.bolt, #game .tile.flipped.bolt {
  background-color: #e4c911;
}

#game .tile.selected.bolt:before, #game .tile.flipped.bolt:before {
  content: '\f0e7';
}

#game .tile.selected.rocket, #game .tile.flipped.rocket {
  background-color: #128ae6;
}

#game .tile.selected.rocket:before, #game .tile.flipped.rocket:before {
  content: '\f135';
}

#game .tile.selected.send, #game .tile.flipped.send {
  background-color: #12e6bc;
}

#game .tile.selected.send:before, #game .tile.flipped.send:before {
  content: '\f1d8';
}

#game .tile.selected.ghost, #game .tile.flipped.ghost {
  background-color: #ea9e1b;
}

#game .tile.selected.ghost:before, #game .tile.flipped.ghost:before {
  content: '\f2ac';
}

#game .tile.flipped:before {
  top: 25%;
  font-size: 2.5rem;
}

@media (min-width: 561px) {
  #game .tile {
    height: 8rem;
  }
  #game .tile:before {
    top: 40%;
  }
  #game .tile.flipped:before {
    top: 35%;
  }
}

@media (min-width: 691px) {
  #game .tile {
    height: 9rem;
  }
}

@media (min-width: 901px) {
  #game .tile {
    height: 10rem;
  }
}

#winner {
  max-width: 50%;
  opacity: 0;
  color: #fff;
  font-size: 0;
  font-weight: 700;
  transition: all 0.35s;
  background: linear-gradient(0.35turn, #0AF1F0, #E01FEF);
  margin: 0 auto;
}

#winner.won {
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.2);
  padding: 1rem;
  border-radius: .5rem;
  margin: 1.5rem auto -1rem;
  font-size: 1.25rem;
  opacity: 1;
}

@media (min-width: 691px) {
  #winner.won {
    font-size: 3rem;
    padding: 2rem;
    margin: 2rem auto 0;
  }
}

/*# sourceMappingURL=styles.css.map */