.card-outterShell * { box-sizing: border-box; }

.card-outterShell {
  background-color: transparent;
  width: 100%;
  height: 100%;
  perspective: 800px; /* Adjust for different Cardsize */
  align-self: center;
  justify-self: center;
}

.card-outterShell .card-innerShell { padding-bottom: 100%; }

.card-outterShell.inactive { 
  opacity: 0.4;
  transition: opacity 1s;
  pointer-events: none;
}

.card-outterShell.inactive .card-innerShell .front {
  box-shadow: none;
}

.card-outterShell:hover .card-innerShell {
  cursor: pointer;
}

.card-outterShell:hover .card-innerShell > .front {
  border: 10px double rgb(107, 201, 235);
}

.card-outterShell:hover .card-innerShell > .front,
.card-outterShell:hover .card-innerShell > .back
{
  box-shadow: 0 2px 5px 0 rgba(110,230,245,0.60),
              0 2px 10px 0 rgba(110,230,245,0.18);
}

.card-outterShell .card-innerShell {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card-outterShell .card-innerShell.turn {
  transform: rotateY(180deg);
}

/* .back is the default hidden face and contains the smileys */
.card-outterShell .card-innerShell > .front,
.card-outterShell .card-innerShell > .back
{
  border: 2px solid transparent; /* Spaceholder so hover doesnt ruin layout */ 
  border-radius: 8px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),
              0 2px 10px 0 rgba(0,0,0,0.12);
  
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card-outterShell .card-innerShell > .front {
  background-color: lightblue;
  background-size: 33.33%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z' fill='%23faf9f9'/%3E%3C/svg%3E");
  
  border: 8px double white;
}

.card-outterShell .card-innerShell > .back {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightgreen;
  transform: rotateY(180deg);

  background-image: url("resources/pattern.svg");
  background-blend-mode: overlay;
}

.card-outterShell .card-innerShell.turn {
  transform: rotateY(180deg);
}



button.buttons {
  color: #fff;
  background-color: rgb(0, 120, 212);
  border: none;
  outline: none;

  padding: 5px 8px;
}

button.buttons:hover {
  cursor: pointer;
  color: #eee;
  background-color: rgb(1, 103, 180);
}

.game {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  width: 100%;
  max-width: 1200px;
}

.game .content {
  background-color: #fff;
  display: flex;
  flex-direction: row;
  min-height: 400px;
}

.game .content .menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30%;
  max-width: 260px;
  padding: 10px;
}

.game .content .menu > div {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

.game .content .menu > div > span { display: block; margin-bottom: 5px;}

.game .content .menu .player-list {
  text-align: center;
  background-color: #fff;

  margin: 0;
  padding: 0;

  width: 100%;
  min-width: fit-content;
}

.game .content .menu .player-list li {
  font-size: 1.1em;
  margin-top: 15px;
}

.game .content .menu .player-list li:last-child {
  display: flex;
  margin-top: 0.8em;
  align-items: flex-start;
  justify-content: center;
}

.game .content .menu .player-list li > input {
  font-size: 1.05em;
  width: 90%;
}

/*****************************Button styling*********************************/
button[class^=li-buttons] {
  height: 2em;
  width: 2em;

  margin: 0 5px;
  outline: none;
  border-radius: 50%;
  background-size: 100%;
  
  transition: all 0.25s;
}

button[class^=li-buttons]:focus {
  border: 1px solid black;
}

button[class^=li-buttons]:hover {
  cursor: pointer;

  height: 2.2em;
  width: 2.2em;

  transition: all 0.5s;
}

button.li-buttons-plus {
  background-color: #6cdd9d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");;
  
  border: 1px solid #004b1c;
}

button.li-buttons-plus:hover {
  background-color: #17d469;
}

button.li-buttons-sub {
  background-color: #FF6E69;
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 13H5v-2h14v2z'/%3E%3C/svg%3E");

  border: 1px solid #a4373a;
}

button.li-buttons-sub:hover {
  background-color: #ff423b;
}
/****************************************************************************/

.game .content .menu .player-list-active {
  list-style: none;

  margin: 16px 0;
  padding: 0;
  max-width: 100%;
  width: 100%;
}

.game .content .menu .player-list-active li {
  display: flex;
  flex-direction: column;
  
  margin-bottom: 30px;
  padding: 5px 0;
  
  width: 100%;
  
  color: rgba(0, 0, 0, 0.4);
  box-shadow: 0 -10px 10px  -10px rgba(0,0,0,0.12),
              0 10px  10px  -10px rgba(0,0,0,0.12),
              0 -5px  5px   -5px  rgba(0,0,0,0.18),
              0 5px   5px   -5px  rgba(0,0,0,0.18);
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;

  transition: all 1s;
}

.game .content .menu .player-list-active li.active {
  color: black;
  box-shadow: 0 -10px  10px -10px rgba(110,230,245,0.4),
              0 10px   10px -10px rgba(110,230,245,0.4),
              0 -5px   5px  -5px  rgba(110,230,245,0.6),
              0 5px    5px  -5px  rgba(110,230,245,0.6);
  border-top: 1px solid rgb(110,230,245);
  border-bottom: 1px solid rgb(110,230,245);

  transition: all 1.5s;
}

.game .content .menu .player-list-active li :first-child {
  font-size: 1.1em;
  text-align: center;
}

.game .content .game-area {
  display: flex;
  width: 100%;
  min-height: fit-content;
  background-color: #faf9f9;
  justify-content: center;
  align-items: center;
}

.game .content .game-area [class$="-block"] {
  background-color: #fff;
  padding: 10px;
  width: fit-content;
  text-align: center;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),
                0 2px 10px 0 rgba(0,0,0,0.12);
}

.game .content .game-area .end-block > span { display: block; font-size: 1.1em;}

.game .content .game-area .end-block #winner {
  font-size: 1.2em;
  margin: 10px 0;
}

.game .content .game-area.active {
  display: grid;
  grid-gap: 20px;

  padding: 10px;
}



.hidden {
  visibility: hidden!important;
}

.removed {
  display: none!important; 
}



@media only screen and (max-width: 900px) {
  .game .content {
    flex-direction: column;
  }

  .game .content .menu {
    max-width: none;
    width: 100%;
    justify-content: center;
    padding: 10px 0px;
  }

  .game .content .menu .player-list-active {
    width: 100%;
  }

  .game .content .game-area.active {
    padding: 10px 0;
    width: 100vw;
  }
}