@import url('https://fonts.googleapis.com/css?family=Pirata+One&display=swap');
@import url('https://fonts.googleapis.com/css?family=Bebas+Neue|Pirata+One&display=swap');

body {
   background-image: url("../Background-twilight.jpg"); 
   background-repeat: no-repeat;
   background-size:cover; 
   background-color: black;
   font-family: 'Bebas Neue', cursive;
   font-style: normal;
   font-weight:500;
}

.body-content {
   margin : auto;
   width : 80%;
   padding : 1em;	
}

.deck {
  grid-area: decks;
}

.deck-container {
   padding: 0.2em;
   float: left;
   border : solid; 
   border-width: 0px; 
   border-radius : 8px;
   border-color : white;
   color: white;
   text-align: center;
   clear : both;
}

.game-status {
  grid-area: status;  
}

.game-status-container {
   font-size : 25px;
   text-align : center;
   color: white;
   font-family: 'Pirata One', cursive;
   font-style: normal;
   font-weight:400;
}

.solitary {
	grid-area: solitary; 
}

.solitary-container {
   padding: 0.2em;
   border : solid;
   border-radius : 8px;
   border-color : white;
   border-width : 0px;
   color: white;
   text-align: center;
   clear : both;
   float : left;
   margin-top: 0.5em;
}

img {
   height: 100%;
   width: 100%;
}

.modal-container {
   padding-left : 1em;
   padding-right : 1em;
   margin: 0.5em;
   background-color: rgb(50, 50, 50);
   color: white; 
   display: block;
   margin: auto;
   width:  30%;
   border-radius : 8px;		
   font-size:1.5em;
   line-height: 1.05em;
   
}

.modal-background {	   
   background: rgb(132,117,78);
   background: -webkit-linear-gradient(202deg, rgba(132,117,78,1) 0%, rgba(174,165,139,1) 50%, rgba(132,117,78,1) 100%);
   background: -o-linear-gradient(202deg, rgba(132,117,78,1) 0%, rgba(174,165,139,1) 50%, rgba(132,117,78,1) 100%);
   background: linear-gradient(292deg, rgba(132,117,78,1) 0%, rgba(174,165,139,1) 50%, rgba(132,117,78,1) 100%);
   box-shadow: 0px 0px 15px 5px #000000;
}

.escape-modal-container {
   padding-left : 1em;
   padding-right : 1em;
   margin: 0.5em;
   background-color: rgb(50, 50, 50);
   color: white; 
   display: block;
   margin: auto;
   width:  50%;
   border-radius : 8px;		
   font-size:1.5em;
   line-height: 1.05em;   
}

.modal-container h2 {
	font-size:2.5em;
	line-height: 1.2em;	
}

.modal-content {
	padding-bottom:0.5em;
}

.modal-close {
   float : right;
}

.modal-close h2 {
	font-size: 1.5em;
	font-weight:bold;
	font-family: 'Bebas Neue', cursive;
}

.modal-heading {
   float : left;
}

.modal-heading h2 {
   float : left;
   font-family: 'Pirata One', cursive;
   font-style: normal;
   font-weight:400;
}

.modal-content {
   clear : both;
   padding-bottom: 1em;
}

#escape-deck {
  position: relative;
  z-index: 1;
}

.escape-card {
  position: relative;
  z-index: 2;
}

.solitary-card {
  position: relative;
  z-index: 2;
}

.solitary-card-container {
   position : relative;
  /* background-color: #FFFFFFAA;*/
}

.solitary-bars {
  position: absolute;
  top : 0;
  left : 0;
  z-index: 3;
}

#escape-deck-container {
   position : relative;
}

.escape-deck-container {
  /* height: 6.3em;
     width:  4.5em; */
  height: 4em;
  width:  3em;
 
}

#action-deck {
  position: relative;
  z-index: 1;
}

#action-deck-container {
   position : relative;
}

.play-area {
  position : relative;
  display : inline-grid;
  grid-template-rows: 6.3em 6.3em 6.3em 6.3em 6.3em 6.3em;
  grid-template-columns: 4.5em 4.5em 4.5em 4.5em 4.5em 4.5em 4.5em 4.5em 4.5em 4.5em 4.5em 4.5em;
  grid-column-gap: 0.2em;
  grid-row-gap: 0.2em;
      
  grid-template-areas :    
    "e-c1r1 e-c2r1 e-c3r1 e-c4r1 e-c5r1 play-indicator play-indicator play-indicator play-indicator play-indicator play-indicator play-indicator"
    "e-c1r2 e-c2r2 e-c3r2 e-c4r2 e-c5r2 status status status status status status status"
    "e-c1r3 e-c2r3 e-c3r3 e-c4r3 e-c5r3 . s-card-1 s-card-2 s-card-3 s-card-4 s-card-5 option-music"
    "e-c1r4 e-c2r4 e-c3r4 e-c4r4 e-c5r4 . escape-deck . discard-deck . action-deck option-sfx"
    "e-c1r5 e-c2r5 e-c3r5 e-c4r5 e-c5r5 . keys logo logo logo compass ."
    "e-c1r6 e-c2r6 e-c3r6 e-c4r6 e-c5r6 . p-card-1 p-card-2 p-card-3 p-card-4 p-card-5 ."       
}


.card-container {
 border-radius : 0px;
 border : solid;
 border-width : 0.1px;
 border-color:  rgba(0, 0, 0, 0);
 /*box-shadow: 2px 2px 10px black;*/
 
}

.p-esc-container .card {
  /* height: 6.3em; 
     width:  4.5em; */ height: 4em;
  width:  3em;  
  
}

.card {
 position : relative;
 height: 6.3em; 
 width:  4.5em;

}

.game-logo-images {
 
}

#keys {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5em;
  height: 80%;
}

#logo {
  margin-top: 1em;
  margin-left: 1em;
  margin-right: auto;
  height: 75%;
}

#compass {	
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5em;
  height: 80%;	
}

.player-card {
   position: relative;
   z-index: 2;
}

.card-highlight {
   //border-color : red;
   box-shadow: 0px 0px 15px 5px #FFFFFF;
}

.play-indicator {
  grid-area : play-indicator;
}

#player-indicator {
   height : 80%;  
}

#turns {
  margin-left : 0.5em;
}

.discard-background {
   position : absolute;
   z-index : -1;
   left : -10px;
   top :  -10px;
   width : 6em; 
}

#discard-container {
   position : relative;
}

.flip {
  
}

.background-card-back {
  background-image: url("../card_back.png"); 
  background-size : 100%;	
}

.background-card-empty {
  background-image: url("../empty-space.png"); 
  background-size : 100%;	
}

.flip-container {
  position : absolute;
  top : 0;
  left: 0;
  z-index : 200;
}

.front {
	position : absolute;
	top : 0;
	left : 0;
}

.back {
	position : absolute;
	top : 0;
	left : 0;
}

.p-hand-container {
   position: relative;
   height: 6.3em; 
   width:  4.5em;
}


.deck-container .card-container {
   box-shadow: -2px 2px 10px black;
}

.w3-modal {
  z-index: 999;	 
}

#action-card-modal {
	padding-top : 50px;	
}

#select-card-modal {
	padding-top : 50px;	
}

#discard-foreground {
	position : absolute;
	top : 0;
	left : 0;
	z-index : 999;
	background-color : #ffff99;
}

.sound-button-with-heading {
   text-align: center;
   position : relative;
   font-size : 12px;
   color: white;
}

.sound-button-container {
   position : relative;
}

.sound-button {
   margin-left: auto;
   margin-right: auto;
   width : 3em;
}

#play-again {
	width : 100%;
	padding : 0.5em;
	margin-bottom : 0.5em;
}


.e-c1r1 {
	grid-area: e-c1r1;
}

.e-c2r1 {
	grid-area: e-c2r1;
}

.e-c3r1 {
	grid-area: e-c3r1;
}

.e-c4r1 {
	grid-area: e-c4r1;
}

.e-c5r1 {
	grid-area: e-c5r1;
}

.e-c1r2 {
	grid-area: e-c1r2;
}

.e-c2r2 {
	grid-area: e-c2r2;
}

.e-c3r2 {
	grid-area: e-c3r2;
}

.e-c4r2 {
	grid-area: e-c4r2;
}

.e-c5r2 {
	grid-area: e-c5r2;
}

.e-c1r3 {
	grid-area: e-c1r3;
}

.e-c2r3 {
	grid-area: e-c2r3;
}

.e-c3r3 {
	grid-area: e-c3r3;
}

.e-c4r3 {
	grid-area: e-c4r3;
}

.e-c5r3 {
	grid-area: e-c5r3;
}

.e-c1r4 {
	grid-area: e-c1r4;
}

.e-c2r4 {
	grid-area: e-c2r4;
}

.e-c3r4 {
	grid-area: e-c3r4;
}

.e-c4r4 {
	grid-area: e-c4r4;
}

.e-c5r4 {
	grid-area: e-c5r4;
}

.e-c1r5 {
	grid-area: e-c1r5;
}

.e-c2r5 {
	grid-area: e-c2r5;
}

.e-c3r5 {
	grid-area: e-c3r5;
}

.e-c4r5 {
	grid-area: e-c4r5;
}

.e-c5r5 {
	grid-area: e-c5r5;
}

.e-c1r6 {
	grid-area: e-c1r6;
}

.e-c2r6 {
	grid-area: e-c2r6;
}

.e-c3r6 {
	grid-area: e-c3r6;
}

.e-c4r6 {
	grid-area: e-c4r6;
}

.e-c5r6 {
	grid-area: e-c5r6;
}

.s-card-1 {
	grid-area: s-card-1;
}

.s-card-2 {
	grid-area: s-card-2;
}

.s-card-3 {
	grid-area: s-card-3;
}

.s-card-4 {
	grid-area: s-card-4;
}

.s-card-5 {
	grid-area: s-card-5;
}

.escape-deck {
	grid-area: escape-deck;
}

.discard-deck {
	grid-area: discard-deck;
}

.action-deck {
	grid-area: action-deck;
}

.p-card-1 {
	grid-area: p-card-1;
}

.p-card-2 {
	grid-area: p-card-2;
}

.p-card-3 {
	grid-area: p-card-3;
}

.p-card-4 {
	grid-area: p-card-4;
}

.p-card-5 {
	grid-area: p-card-5;
}

.keys {
	grid-area: keys;
}

.logo {
	grid-area: logo;
}

.compass {
	grid-area: compass;
}

.option-sfx {
	grid-area: option-sfx;
}

.option-music {
	grid-area: option-music;
}

@media only screen and (max-width : 750px) and (orientation : landscape)  {
	
  .play-area {
    position : relative;
    display : inline-grid;
    grid-template-rows: 2.5em 2.5em 2.5em 2.5em 2.5em 2.5em 2.5em;
    grid-template-columns: 2em 2em 2em 2em 2em 2em 2em 2em 2em 2em 2em 2em;
    grid-column-gap: 0.2em;
    grid-row-gap: 0.2em;
      
    grid-template-areas :    
      "e-c1r1 e-c2r1 e-c3r1 e-c4r1 e-c5r1 play-indicator play-indicator play-indicator play-indicator play-indicator play-indicator play-indicator"
      "e-c1r2 e-c2r2 e-c3r2 e-c4r2 e-c5r2 status status status status status status status"
      "e-c1r3 e-c2r3 e-c3r3 e-c4r3 e-c5r3 . s-card-1 s-card-2 s-card-3 s-card-4 s-card-5 option-music "
      "e-c1r4 e-c2r4 e-c3r4 e-c4r4 e-c5r4 . escape-deck . discard-deck . action-deck option-sfx"
      "e-c1r5 e-c2r5 e-c3r5 e-c4r5 e-c5r5 . keys logo logo logo compass ."
      "e-c1r6 e-c2r6 e-c3r6 e-c4r6 e-c5r6 . p-card-1 p-card-2 p-card-3 p-card-4 p-card-5 ."      
   }
    
   .card {
     position : relative; 
     height: 2.5em;
     width:  2em;
   }
   
   .p-hand-container {
      position: relative;  
      height: 2.5em; 
      width:  2em;   
   }
   
   .game-status-container {
     font-size : 12px;
     text-align : center;
     color: white;
     font-family: 'Pirata One', cursive;
     font-style: normal;
     font-weight:400;
   }
   
   .modal-container {
     padding-left : 1em;
     padding-right : 1em;
     margin: 0.5em;
     background-color: rgb(50, 50, 50);
     color: white; 
     display: block;
     margin: auto;
     width:  20%;
     border-radius : 8px;		
     font-size: 0.7em;
     line-height: 1.05em;   
  }
  
  .action-card-modal-content {
    width :70%;
    margin-left : 1.5em;
  }
  
  .body-content {
     margin : auto;
     width : 65%;
     padding : 1em;	
  }
  
  #logo {
    margin-top: 0.5em;
    margin-left: 1em;
    margin-right: auto;
    height: 75%;
  }
  
  .sound-button-with-heading {
     text-align: center;
     position : relative;
     font-size : 10px;
     color: white;
  }
  
  .sound-button {
    margin-left: auto;
    margin-right: auto;
    width : 1.5em;
  }
   
}


@media only screen and (max-width: 750px) and (orientation : portrait) {
  .play-area {
    position : relative;
    display : inline-grid;
    grid-template-rows: 3.7em 3.7em 3.7em 3.7em 3.7em 3.7em 3.7em 2em 1.75em 3.7em 3.7em;
    grid-template-columns: 2.7em 2.7em 2.7em 2.7em 2.7em 2.7em;
    grid-column-gap: 0.2em;
    grid-row-gap: 0.2em;
  
    grid-template-areas : 
       "s-card-1 s-card-2 s-card-3 s-card-4 s-card-5 ."  
       "e-c1r1 e-c2r1 e-c3r1 e-c4r1 e-c5r1 option-music"
       "e-c1r2 e-c2r2 e-c3r2 e-c4r2 e-c5r2 option-sfx"
       "e-c1r3 e-c2r3 e-c3r3 e-c4r3 e-c5r3 ."
       "e-c1r4 e-c2r4 e-c3r4 e-c4r4 e-c5r4 keys"
       "e-c1r5 e-c2r5 e-c3r5 e-c4r5 e-c5r5 logo"
       "e-c1r6 e-c2r6 e-c3r6 e-c4r6 e-c5r6 compass"   
       "play-indicator play-indicator play-indicator play-indicator play-indicator ."
       "status status status status status ." 
       "escape-deck . discard-deck . action-deck ."
       "p-card-1 p-card-2 p-card-3 p-card-4 p-card-5 .";    
  }
  
  .card {
     position : relative; 
     height: 3.7em;
     width:  2.7em;
  }
   
   .p-hand-container {
      position: relative;  
      height: 3.7em; 
      width:  2.7em;   
   }
   
   .game-status-container {
     font-size : 12px;
     text-align : center;
     color: white;
     font-family: 'Pirata One', cursive;
     font-style: normal;
     font-weight:400;
   }
   
   .modal-container {
     padding-left : 1em;
     padding-right : 1em;
     margin: 0.5em;
     background-color: rgb(50, 50, 50);
     color: white; 
     display: block;
     margin: auto;
     width:  70%;
     border-radius : 8px;		
     font-size:1.5em;
     line-height: 1.05em;   
  }
  
  #logo {
    margin-top: 0.5em;
    margin-left: 0.5em;
    margin-right: auto;
    width : 3.5em;
  }
   
}


@media only screen and (max-width: 320px) and (orientation : portrait) {
  .play-area {
    position : relative;
    display : inline-grid;
    grid-template-rows: 3.4em 3.4em 3.4em 3.4em 3.4em 3.4em 3.4em 2em 1.75em 3.4em 3.4em;
    grid-template-columns: 2.5em 2.5em 2.5em 2.5em 2.5em 2.7em;
    grid-column-gap: 0.2em;
    grid-row-gap: 0.2em;
  
    grid-template-areas : 
       "s-card-1 s-card-2 s-card-3 s-card-4 s-card-5 ."  
       "e-c1r1 e-c2r1 e-c3r1 e-c4r1 e-c5r1 option-music"
       "e-c1r2 e-c2r2 e-c3r2 e-c4r2 e-c5r2 option-sfx"
       "e-c1r3 e-c2r3 e-c3r3 e-c4r3 e-c5r3 ."
       "e-c1r4 e-c2r4 e-c3r4 e-c4r4 e-c5r4 keys"
       "e-c1r5 e-c2r5 e-c3r5 e-c4r5 e-c5r5 logo"
       "e-c1r6 e-c2r6 e-c3r6 e-c4r6 e-c5r6 compass"   
       "play-indicator play-indicator play-indicator play-indicator play-indicator ."
       "status status status status status ." 
       "escape-deck . discard-deck . action-deck ."
       "p-card-1 p-card-2 p-card-3 p-card-4 p-card-5 .";    
  }
  
  .card {
     position : relative; 
     height: 3.4em;
     width:  2.5em;
  }
   
   .p-hand-container {
      position: relative;  
      height: 3.4em; 
      width:  2.5em;   
   }
   
   .game-status-container {
     font-size : 12px;
     text-align : center;
     color: white;
     font-family: 'Pirata One', cursive;
     font-style: normal;
     font-weight:400;
   }
   
   .modal-container {
     padding-left : 1em;
     padding-right : 1em;
     margin: 0.5em;
     background-color: rgb(50, 50, 50);
     color: white; 
     display: block;
     margin: auto;
     width:  70%;
     border-radius : 8px;		
     font-size:1.5em;
     line-height: 1.05em;   
  }
   
}