#game-area {
  background: #f4e8d0 url('https://musikschuleonline.com/i/game-cards/backgrounds/game-background.jpg');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  min-height: 545px;
  position: relative;
  /*background-attachment: fixed;*/
}

.article-one-b #game-area li {
    margin-left: 0;
}
.article-one-b #game-area li.card {
  margin-left: 0.5em;
  margin-top: 0.5em;
}

a:link {
  color: black;
  background-color: transparent;
}
a:visited {
  color: #303030;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: green;
  background-color: transparent;
  text-decoration: none;
}
a:active {
  transform: translateY(-4px);
}
/* level selection modal styling */
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    /*position: fixed; !* Stay in place *!*/
    /*z-index: 1; !* Sit on top *!*/
    /*top: 15%;*/
    /*left: 15%;*/
    /*overflow: scroll;*/
    background: linear-gradient(to bottom, rgba(116, 43, 2, 0.5), rgba(192,108,42, 0.5));
    border: 3px ridge rgba(116, 43, 2, 1);
    color: white;
    height: 80%;
    /*width: 60%;*/
  }
::-webkit-scrollbar{
  width: 12px;  /* for vertical scrollbars */
  height: 0;
}

::-webkit-scrollbar-track{
  /*background: linear-gradient(to bottom, rgba(97, 215, 255, 0.5), rgba(73, 188, 16, 0.5));*/
}

::-webkit-scrollbar-thumb{
  background: rgba(0, 0, 0, 0.5);
}

/* Modal Content */
.level-selection {
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: auto;
}
.level-desc {
  margin-bottom: 0.2em;
}
#game-area .level-modal-content {
  text-align: center;
  margin: 1em;
}
#game-area .level-modal-content p {
  text-align: center;
}
/* grid positioning */
.level-modal-content .intro {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
  margin: auto;
}
.level.easy {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}
.level.medium {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 4;
}
.level.hard {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 4;
  grid-row-end: 5;
}
.level.expert {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 5;
  grid-row-end: 6;
}
.level {
  width: 100%;
  cursor: pointer;
  align-items: center;
}
/* level selection images */
.level-select {
  height: 3em;
}
.hard .level-select {
  height: 4em;
}
.expert .level-select {
  height: 3em;
}
.pack-select.tbc {
  width: 2.3em;
}
.level:hover {
  background-color: rgba(116, 43, 2, 0.4);
}
.level:active {
  transform: translateY(4px);
}
/* theme selection styling */
.selectPack {
  width: 100%;
  cursor: pointer;
}
.selectPack:hover {
  background-color: rgba(116, 43, 2, 0.4);
}
.selectPack:active {
  transform: translateY(4px);
}
.theme-selection {
  display: none;
  grid-template-columns: auto;
  flex-wrap: wrap;
}
.themes {
  display: none;
}
/* grid positioning */
.theme-selection-area .intro {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}
.selectPack.one {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}
.selectPack.two {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 4;
}
.selectPack.three {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 4;
  grid-row-end: 5;
}
/* game area styling */
/* header styling */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  vertical-align: middle;
}
h1 {
    font-weight: 300;
    margin-bottom: 0;
    margin-top: 0.2em;
}
.heading {
  background-color: rgba(250, 250, 250, 0.5);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 1%;
  font-size: 0.8em;
}
/* Styles for the Score Panel */
.score-panel {
  text-align: center;
  width: 70%;
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: 25% 25% 25% 25%;
  margin: 0;
}
.score-panel .stars {
  padding: 0;
  margin: 0 5px 0 0;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}
.score-panel .stars li {
  list-style: none;
  display: inline-block;
}
.moves {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
.score-panel div {
  /*margin: auto;*/
}
.score-panel .restart {
  float: right;
  cursor: pointer;
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}
.timer {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
}
.difficulty-class {
  margin: 0;
}
/* Styling for the all decks of cards */
.deck {
  padding: 1.5em;
  padding-bottom: 10px;
  border-radius: 10px;
  /*box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);*/
  display: flex;
  flex-wrap: wrap;
  /*justify-content: space-between;*/
  justify-content: center;
  align-items: center;
  width: 90%;
  height: 90%;
}
.card {
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
  width: 6em;
  height: 6em;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
}
.deck .card.open {
  transform: rotateY(0);
  cursor: default;
}
.card img {
  display: none;
  border-radius: 8px;
  /*width: 50%;*/
  /*height: 50%;*/
  /*margin: auto;*/
}
.card.open.show img {
  display: block;
}
.card.hold img {
  display: block;
}
.disabled {
  pointer-events: none;
}
/* styling for easy decks */
.deck.easy {
  max-width: 260px;
}
.deck.easy .card {
  height: 6em;
  width: 6em;
}
.card {
  background: #aeaeae url('https://musikschuleonline.com/i/game-cards/shirt-card.png');
}
.card.open {
  background: rgba(174, 174, 174, 1);
}
.card.match {
  animation-name: easy-composers-right-animation;
  cursor: default;
  animation-duration: 1s;
}
.card.hold {
  background: rgba(53, 141, 53, 1);
  cursor: default;
}
.card.wrong {
   animation-name: easy-composers-wrong-animation;
   animation-duration: 1s;
}
@-webkit-keyframes easy-composers-right-animation {
  from {background-color: rgba(174, 174, 174, 1);}
  to {background-color: rgba(153, 153, 153 1);}
	0% { -webkit-transform: translate(1px, 1px) rotate(2deg); }
	25% { -webkit-transform: translate(-1px, -1px) rotate(-2deg); }
	50% { -webkit-transform: translate(1px, 1px) rotate(2deg); }
	75% { -webkit-transform: translate(-1px, -1px) rotate(-2deg); }
	100% { -webkit-transform: translate(1px, 1px) rotate(2deg); }
}
@-webkit-keyframes easy-composers-wrong-animation {
  from {background-color: rgba(242, 61, 61,1 );}
  to {background-color: rgba(174, 174, 174, 1);}
	0% { -webkit-transform: translate(1px, 1px) rotate(2deg); }
	25% { -webkit-transform: translate(-1px, -1px) rotate(-2deg); }
	50% { -webkit-transform: translate(1px, 1px) rotate(2deg); }
	75% { -webkit-transform: translate(-1px, -1px) rotate(-2deg); }
	100% { -webkit-transform: translate(1px, 1px) rotate(2deg); }
}

/* congratulations animation styling */
.congrats {
  font-size: 0;
  display: none;
}
.congrats.live {
  display: block;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  top: 35%;
  left: 25%;
  font-size: 1.8em;
}
/* winning modal styling */
.winModal {
  display: none;
  width: auto;
  height: auto;
  /*position: relative; !* Stay in place *!*/
  /*z-index: 1; !* Sit on top *!*/
  /*top: 20%;*/
  /*left: 20%;*/
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
    background: linear-gradient(to bottom, rgba(116, 43, 2, 0.9), rgba(192,108,42, 0.9));
    border: 3px ridge rgba(116, 43, 2, 1);
  overflow: hidden;
  padding: 1em;
}
.win-modal-content {
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.winning-score {
  display: grid;
  grid-template-columns: auto;
  flex-wrap: wrap;
  font-size: 1em;
}
/* grid positioning */
.you-win {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}
.scoreStars {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}
.youScore {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}
.scoreMoves {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 4;
}
.moveScore {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 4;
}
.scoreTime {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 4;
  grid-row-end: 5;
}
.timeScore {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 4;
  grid-row-end: 5;
}
.winModal .restartGame {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 5;
  grid-row-end: 6;
}
.fa.fa-repeat {
  cursor: pointer;
  /*width: 3px;*/
}
#levelContent .intro{
  text-transform: uppercase;
}

#win-modal{
    color: #f5f7ed;
}

.game-bottom-text{
  margin-top: 20px;
}

.game-bottom-text p{
  text-align: center;
}