aside {

  height: 100%;
  font-family: "Press Start 2P","Sigmar One";
  font-size: 110%;
  justify-content: space-evenly;
}

main {

  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  height: 90%;

}

body {
  height: 97vh;
  background-image: url(../myImage/8.png);
  background-size: cover;


}

.topRow {
  height: 15%;
  justify-content: center;
}

header p {
  font-family: "Press Start 2P","Modak";
  font-size: 500%;
  position: relative;
  bottom: 4rem;
  color: hotpink;
  text-shadow: 10px 10px 20px lightsalmon;
}

.secondRow {
  height: 80%;
}

aside > div{
  height: 9%;
  margin-bottom:4%;
  margin-right: 4%;
  margin-left: 4%;
  background-color: rgba(135,206,250,0.5);
  text-align: center;
  vertical-align: middle;
  border-radius: 10px;

}

aside > div  *{
  position: relative;
  top: 1vh;

}

.flip-card {
  background-color: transparent;
  height: 33%;
  perspective: 1000px;
  flex-basis: 13%;
  margin: 1%;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.card-front, .card-back {
  height: 95%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
    -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: box-shadow 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.card-front{
  transform: rotateY(180deg);
}
.card-revealed{
  transform: rotateY(180deg);
}
.card-back {
  background-image: url(../myImage/cherry-blossomswatercolor-canvas.png);
}
.card-back:hover{
box-shadow: 0 5px 15px rgba(0,0,0,0.4);
transform: scale(1.2, 1.2);
}
.card-front:hover{
box-shadow: 0 5px 15px rgba(0,0,0,0.4);

}
.asuna {
  background-image: url(../myImage/queens/asuna\ sword.png);
  background-size: 200%;
  background-position: 70% 50%;
}

.cowgirl {
  background-image: url(../myImage/queens/cowgirl\ 2.jfif);
  background-position: 50% 10%;
}

.ichigo {
  background-image: url(../myImage/queens/ichigo.jfif);
}

.kill {
  background-image: url(../myImage/queens/kill.jfif);
  background-size: 150%;
  background-position: 0% 0%;
}

.koko {
  background-image: url(../myImage/queens/koko.jfif);
}

.kurisu {
  background-image: url(../myImage/queens/kurisu.jfif);
}

.priestess {
  background-image: url(../myImage/queens/priess\ 3.jfif);
  background-position: 50% 15%;
}

.rem {
  background-image: url(../myImage/queens/rem.jfif);
  background-size: 120%;
}

.sorceress {
  background-image: url(../myImage/queens/sorceress.jfif);
  background-size: 130%;
  background-position: 50% 10%;
}



.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  text-align: center;
   background-color: rgba(255,192,203,.8);
}



.modalContent {
 /*background-color:rgba(255,255,255, 0.7);*/
 background-image: url(../myQueens/WinScreen.png);
 background-size: contain;
 background-repeat: no-repeat;
 background-position-x: 35%;
 height: 100%;
margin: 0 auto; /* 15% from the top and centered */
padding: 20px;

width: 100%; /* Could be more or less, depending on screen size */
border-radius: 20px;
}
.modalContent div {
  font-family:  "Press Start 2P";
  height: 60px;
  width: 200px;
  position: relative;
  top: 30%;
  left:28%;
  background-color: transparent;
  line-height: 140%;
  font-size: 1.25rem;
}
.modalContent span{
  display: inline-block;
  transition: all 0.5 ease-in-out;
  text-shadow: 2px 2px hotpink;
  transition: transform 0.5 ease-in-out;
}
.modalContent span:hover{

  text-shadow: 2px 2px lightseagreen;
  cursor: pointer;
  transform: scale(1.2);
}

.gameOverBack{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  text-align: center;
  background-size: cover;
  background-color: rgba(0,0,0,.9);
}
.gameOverContent{
  position: relative;
  left: 24%;
  top: 19%;
  width: 80%;
  height: 80%;
  background-image: url(../myQueens/maybeMaster.png);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1;
}

.gameOverContent span{
  font-family: "Press Start 2P";
  font-size: 4rem;
  position: relative;
  right: 17%;
  top: 5%;
  text-shadow: 0px 0px 5px hotpink;
}
.gameOverContent p{
  font-family: "Press Start 2P";
  font-size: 2rem;
  position: relative;
  right: 17%;
  top: 5%;
  text-shadow: 0px 0px 5px hotpink;
  transition: all 0.3s ease-in-out;
}
.gameOverContent p:hover{
  transform: scale(1.1);
  text-shadow: 0px 0px 15px lightseagreen;
  cursor: pointer;
}

.hidden {
  display: none;

}

/*media queries
ipad */
/* Portrait and Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1) {
body > * {
  overflow: hidden;
}
}

/* Portrait */
@media only screen
  and (min-device-width: 766px)
  and (max-device-width: 1028px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 1) {
    html, body { overflow: hidden; }
    main#gameCards {
      width: 90%;
      position: relative;
      bottom: 5%;
    }


    .flip-card{
      flex-basis: 25%;
      height: 18%;
      margin: 5px;
    }
    .topRow.row {
      height: 10%;
      margin-top: 0;
      margin-bottom: 0;
    }

    header p {
      font-family: "Press Start 2P","Modak";
      font-size: 250%;
      position: relative;
      bottom: 10%;
      right:0%;
      margin-top: 1rem;
      margin-bottom: 1rem;

}
    aside.col-2 {
      position: absolute;
      font-size: 79%;
      justify-content: space-evenly;
      width:100%;
      display: flex;
      justify-content: left;
      flex-wrap: wrap;
      height: 7%;
      top: 90%;

    }
    aside.col-2 > div{
      position: relative;
      flex-basis: 0;
      height: 80%;
      background-color: rgba(135,206,250,0.5);
      margin: 0;
      border-radius: 10px;
      margin: 1% 1%;
      left: 0%;
      padding-left:1%;
      padding-right:1%;
}
    aside.col-2 > div  *{
      margin-top: 1%;
      vertical-align: middle;
}
.gameOverBack{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  text-align: center;
  background-size: cover;
  background-color: rgba(0,0,0,.9);
}
.gameOverContent{

  left: -20%;
  top: 20%;
  width: 150%;
  height: 80%;
}

.gameOverContent span{
  left: -3%;
  font-size:5rem;
}
.gameOverContent p{
  font-size: 2.5rem;
  left:-4%;
  top: 5%;
  text-shadow: 0px 0px 5px lightseagreen;

}

.modalContent{
  position: relative;
  top: 19.5rem;
  right: 2rem;
  transform: scale(1.25);
}
.modalContent .modalText{
  position: relative;
  top: 11rem;
  left: 10.5rem;
}
}

/* Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1) {

.topRow {
  height: 10%;
  justify-content: center;
}
header p {
  font-size: 250%;
  bottom: 30%;
  right: 0;
}
aside.col-2 {
  position: relative;
  height: 100%;
  font-size: 70%;
  width:15%;
  right: 0;
}
aside > div{
  margin-bottom:4%;
  margin-right: 2%;
  margin-left: 2%;
}
aside > div *{
  position: relative;
  top: 35%;
}

main.col-10 {
  position: relative;
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  height: 90%;
}
.flip-card {
  background-color: transparent;
  height: 33%;
  perspective: 1000px;
  flex-basis: 13%;
  margin: 1%;
}
.gameOverContent{
  position: relative;
  left: 10%;
  top: 20%;
  width: 80%;
  height: 80%;
  background-image: url(../myQueens/maybeMaster.png);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1;
}

.gameOverContent span{
  right: 0%;
  top: 5%;

}
.gameOverContent p{
  right: 0%;
  top: 5%;
  text-shadow: 0px 0px 5px lightseagreen;
  transition: all 0.3s ease-in-out;
}
.gameOverContent p:hover{
  transform: scale(1.1);
  text-shadow: 0px 0px 15px lightseagreen;
  cursor: pointer;
}
.secondRow {
  height: 90%;
}

.rem {
  background-size: 180%;
  background-position-y: 5px;
}

.kill {

  background-size: 175%;
  background-position: 0% 0%;
}

.sorceress {

  background-size: 210%;
  background-position: 50% -5%;
}

.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  text-align: center;
   background-color: rgba(255,192,203,.8);
}



.modalContent {
position: relative;
right: 5%;


}
.modalContent div {

  position: relative;
  top: 30%;
  left:25%;
}


  }
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 370px)
  and (max-device-width: 670px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen
  and (min-device-width: 370px)
  and (max-device-width: 670px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
.container{
  max-width: 375px;
  max-height: 667px;
}
header p {

  font-size: 1.6rem;
  position: relative;
  bottom: 1.5rem;
  text-align: center;

}
 aside  {
   position: absolute;
   font-size: .5rem;
   display: flex;
   top: 101%;
   height: 3rem;

 }

 .row.secondRow{
   position: relative;
   bottom: 4%;
 }
 main.col-10{
  width: 100%;
  position: relative;
  bottom: 8%;
 }
 .flip-card{
      flex-basis: 30%;
      height: 18%;
      margin: 5px;
    }
aside.col-2 div{
  height: 100%;


}
aside.col-2 p{
  position: relative;
  top: .5rem;
}
.gameOverContent{
  left: 6%;
  height: 50%;
  top: 53%;
  transform:scale(2);
}
.gameOverContent span{
  font-size: 1.20rem;
  left: 3.5%;
  bottom: 5%;
}
.gameOverContent p{
  font-size: .6rem;
  left:2%;
  top: 5%;
  text-shadow: 0 0 4px lightseagreen;

}

.modalContent{
  transform: scale(1.4);
  position: relative;
  top:20.1rem;
  right: 0rem;
}
.modalContent .modalText{
 top: 5rem;
 left: 3rem;
 font-size: .7rem;
 width: 160px;
}
.modalContent .modalText span{

}
}

/* Landscape */
@media only screen
  and (min-device-width: 370px)
  and (max-device-width: 670px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
html{
  max-width: 667px;
  max-height: 375px;
  margin: 0;
}
header p{
font-size: 2rem;
bottom: 1.5rem;;
}
aside{
  font-size: .5rem;
}
.row.secondRow{
  margin-bottom: 0;
}
.gameOverContent{
  position: relative;
  transform: scale(1.25);
  top: 10%;
}
.gameOverContent span{
  font-size: 2rem;
  left: -13%;
  top: 1rem;
}
.gameOverContent p{
  font-size: 1rem;
  left: -14%;
  text-shadow: 0 0 5px lightseagreen;
}
.sorceress {

  background-size: 150%;
  background-position: 50% -5%;
}
aside p{
  position: relative;
  top: 10px;
}
.modalContent{
  transform: scale(1.4);
  position: relative;
  bottom: 2rem;

}
.modalContent .modalText{
  font-size: .8rem;
  left: 7.8rem;

}
.modalContent .modalText span{

}
}
.hidden {
  display: none;

}