@import url("../../css/BrandColors.css");


.hidden{
  display:none;
}


.wof--app-gameboard-title-container {
  width:100%;
  height: 10vh;
}
  
#wof--wheel-modal{
  text-align: center;
  align-items: center;
}

#wof--wheel-canvas{
  flex-grow: 0;
  flex-shrink: 0;
}


#wof--app-container{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0;
  padding:0;
  height:90vh;
}

#wof--app-letter-layout-left,
#wof--app-letter-layout-right
{
  margin:0;
  margin-top: 10vh
  padding:0;
  border-collapse:collapse;
  border:none;
  align-self: center;
  table-layout: fixed;
  text-align: center;
  margin:0 auto;
  padding:0;
  position:relative;
  max-height:80vh;
  width:10vw;
  height: 100%;
}
#wof--app-letter-layout-left h2,
#wof--app-letter-layout-right h2{
  cursor:pointer;
}

#wof--app-gameboard-container{
  max-width: 80vw;
  max-height: 90vh;
  display:flex;
  flex-direction:column;
}

#wof--app-gameboard-layout-table{
  margin:0;
  padding:0;
  border-collapse: collapse;
  border:none;
  align-self: center;
  table-layout: fixed;
  text-align: center;
  margin:0 auto;
  padding:0;
  position:relative;
  max-height:80vh;
  max-width:calc(((80vh*(1/4))*(2/3))*14);
  width:100%;
  height:calc(((80vw*(1/14))*(3/2))*4);
}

#wof--app-letter-layout-left tr,
#wof--app-letter-layout-right tr{
  height: calc(100% * (1/7));
  width: 100%;
}

#wof--app-letter-layout-left td,
#wof--app-letter-layout-right td{
  width: 50%;
}


#wof--app-gameboard-title-container{
  height: 10vh;
  width:100%;
  text-align:center;
}


/* entire container, keeps perspective */
.flip-container {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  background-color: #000;
  border: solid #000 1vmin;
  border: collapse;
}
/*
.flip-container, .wof--app-gameboard-layout-table-invisble {
  width: calc(80vw * (1/14));
}*/

/* flip the pane when clicked */
.flip-container.revealed .back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.flip-container.revealed .front {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}


/* how a card looks after it has been matched*/
.clicked {
  opacity:.1;
  -webkit-transition:opacity 0.4s linear;
  -moz-transition:opacity 0.4s linear;
  -ms-transition:opacity 0.4s linear;
  -o-transition:opacity 0.4s linear;
  transition:opacity 0.4s linear;
}

/* flip speed goes here */
.flipper {
  width:100%;
  height:100%;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  top: 0%;
  left: 0%;
}
  



/* hide back of pane during swap */
.front, .back, .inactive-flipper{
  width:100%;
  height:100%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  top: 0%;
  left: 0%;
}

/* back pane, placed above front */
.back {
  display:block;
  /* for firefox 31 */
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
  background-color: #fff; 
  border-radius: 5%;
  background-position:50% 50%;
  background-repeat: no-repeat;
  background-size: contain;

}

/* front, initially hidden pane */
.front {
  display:flex;
  align-items: center;
  justify-content: center;
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  background-color: #fff; /*cards should be white if blank*/
  border-radius: 5%;
  background-position:50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  color: #4b328e; /*starlight purple*/
}

.front h2{
  font-size:calc(((80vh*(1/4))*(2/3))*.8);
}

.inactive-flipper{
  background-color: #fce43a; /*starlight yellow*/
  border-radius: 5%;
  background-image: url(../images/star.svg);
  background-position:50% 50%;
  background-repeat: no-repeat;
  background-size: contain;

}

.blank-index{
  position: relative;
  background-color: transparent;
}