html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: #ffffff url('../img/geometry2.png'); /* Background pattern from Subtle Patterns */
    font-family: 'Coda', cursive;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

/*
 * Styles for the deck of cards
 */

.deck {
    width: 660px;
    min-height: 680px;
    background: linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%);
    padding: 32px;
    border-radius: 10px;
    box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 3em;
}

.deck .card {
    height: 125px;
    width: 125px;
    background: #2e3d49;
    font-size: 0;
    color: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}

.deck .card.open {
    transform: rotateY(0);
    background: #02b3e4;
    cursor: default;
}

.deck .card.show {
    font-size: 33px;
    display: flex!important;
}

.deck .card.match {
    cursor: default;
    background: #02ccba;
    font-size: 33px;
}

.deck .card.disabled {
  pointer-events: none;
}

/*
 * Styles for the Score Panel
 */

.score-panel {
    text-align: left;
    width: 550px;
    margin-bottom: 10px;
    display: flex;
}

.score-panel .stars {
    margin: 0;
    padding: 0;
    display: inline-block;
    margin: 0 5px 0 0;
}

.score-panel .stars li {
    list-style: none;
    display: inline-block;
}

.score-panel .restart {
    float: right;
    cursor: pointer;
}

/*
 *Styles for the Modal
 */

.modal-title {
  text-align: center;
  text-transform: uppercase;
}

.modal-footer {
  justify-content: center;
}

.btn {
  background-color: #2e3d49;
  color: white;
}

.modalBody {
  text-align: center;
}

/*
 * 359px media query
 */

 @media only screen and (max-width: 359px) {
    h1 {
      text-align: center;
    }

   .deck {
     width: 100%;
     min-height: 330px;
     padding: 15px;
   }

   .deck .card {
     height: 60px;
     width: 60px;
   }

   .score-panel {
     width: 100%;
   }

 }

 /*
  * 360px ~ 405px media query
  */

@media only screen and (min-width: 360px) and (max-width: 405px) {

  .deck {
    width: 100%;
    min-height: 371px;
    padding: 17.44px;
  }

  .deck .card {
    height: 68.125px;
    width: 68.125px;
  }

  .score-panel {
    width: 100%;
  }

}

/*
 * 406px ~ 453px media query
 */

@media only screen and (min-width: 406px) and (max-width: 453px) {

 .deck {
   width: 100%;
   min-height: 374px;
   padding: 19.68px;
 }

 .deck .card {
   height: 76.875px;
   width: 76.875px;
 }

 .score-panel {
   width: 100%;
 }

}

/*
 * 454px ~ 504px media query
 */

@media only screen and (min-width: 454px) and (max-width: 504px) {

 .deck {
   width: 100%;
   min-height: 468px;
   padding: 22.016px;
 }

 .deck .card {
   height: 86px;
   width: 86px;
 }

 .score-panel {
   width: 100%;
 }

}

/*
 * 505px ~ 557px media query
 */

@media only screen and (min-width: 505px) and (max-width: 557px) {

 .deck {
   width: 100%;
   min-height: 520px;
   padding: 24.48px;
 }

 .deck .card {
   height: 95.625px;
   width: 95.625px;
 }

 .score-panel {
   width: 100%;
 }

}

/*
 * 558px ~ 575px media query
 */

@media only screen and (min-width: 558px) and (max-width: 575px) {

 .deck {
   width: 100%;
   min-height: 575px;
   padding: 27.04px;
 }

 .deck .card {
   height: 105.625px;
   width: 105.625px;
 }

 .score-panel {
   width: 100%;
 }

}