styles.css

@font-face {
    font-family: Hylia Serif;
    src: url("Hylia Serif Beta v0-009/HyliaSerifBeta-Regular.otf") format("opentype");
    /*font made by: https://zeldauniverse.net/media/fonts/*/
}
/*This lets the size of the page control the position of the tiles.*/
#hereWeFlex {
  margin-left: 20pt;
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
}
/*This makes the outer board appear properly.*/
#total_board{
  background: transparent;
  width: 800px;
  height: 60%;
  padding:24px;
  margin-top: -30pt;
}
/*This makes each tile appear properly.*/
#total_board > div {
}
/*This makes the tiles.*/
li{
  margin: 2pt;
  height: 180pt;
  width: 180pt;
  background-color: #7986cb;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  float: left;
  z-index: 100;
  border: 2pt solid black;
  border-radius: 5px;
  cursor:pointer;
}

/*These control the card appearances while the card is hidden and flipped.*/
.hide{
  transform:rotateX(180deg);
  transition: All 1s;
  color: transparent;
  background-color: white;
  background-image: url("Potential Images/small_triangle.png");
  background-size: 90% 90%;
  background-repeat: no-repeat;
  background-position: center center;
}
.show{
  transition: All 1s;
  transform:rotateX(360deg);
  background-color: white;
  border: 3pt solid #F5D925;
  text-align: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: white;
  color: transparent;
}
.show_Forever{
  transition: All 1s;
  transform:rotateX(360deg);
  border: 4pt solid #5EFF33;
  color: transparent;
  text-align: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: white;
}
/*This controls the start game message styling.*/
.start_Message {
  font-family: Hylia Serif, Georgia, Times;
  font-size: 3em;
  font-variant: small-caps;
  color: white;
  width: 100%;
  background-color: #2685CE;
  border: 0px;
  margin-top: 700pt;
  margin-left: 36%;
/*This creates the border.*/
  border-radius: 25px;
  border: 4px solid black;
  padding: 0px;
  width: 25%;
  height: 70px;
  text-shadow: 0 1px 1px #DB4C4C;
  transform: scale(1, 1.5);
  /*These make the text scale appropriately for different browsers.*/
  -webkit-transform: scale(1, 1.5); /* Safari and Chrome */
  -moz-transform: scale(1, 1.5); /* Firefox */
  -ms-transform: scale(1, 1.5); /* IE 9+ */
  -o-transform: scale(1, 1.5); /* Opera */
}
/*This changes the final message styling.*/
.end_Message {
  margin-top: 100px;
  margin-left: 5%;
  font-family: Hylia Serif, Georgia, Times;
  font-size: 6em;
  font-variant: small-caps;
  color: #2685CE;
  width: 90%;
  background-color: 0;
  border: 0px;
}
.lost {
  color: #DB4C4C;
}
/*These control the life container and hearts.*/
.life_Container{
  width: 100%;
  height: 120px;
  display:flex;
  align-self: center;
  justify-content: center;
}
.heart{
  width: 45px;
  height: 45px;
  margin: 1pt;
  background-size: 100% 100%;
  background-position: center 0pt;
  background-image: url("images/OiEpiWZ.png");
}
/*This makes the background color.*/
body, html {
  text-align: center;
  width: 100%;
  height: 100%;
  background-image: url("Tile_Images/C1iQyUo.gif");
  background-size: 100% 80%;
  background-color: #F6FDFC;
  background-repeat: no-repeat;
  background-position: 10px 10px;
  background-color: #F6FDFC;
}
body{
  background-color: #F6FDFC;
}

/*These control the tile images:*/
/*These control the tile images:*/
/*These control the tile images:*/
.a{
  background-image: url("Tile_Images/cIesCeS.gif");
}
.c{
  background-image: url("Tile_Images/HFme1Xz.gif");
}
.d{
  background-image: url("Tile_Images/tenor.gif");
}
.e{
  background-image: url("Tile_Images/viUWFfC.gif");
}
.f{
  background-image: url("Tile_Images/47Tpi9K.gif");
}
.g{
  background-image: url("Tile_Images/JBKO8m5.gif");
}
.h{
  background-size: 120% 100%;
  background-image: url("Tile_Images/Nrq6rgV.gif");
}
.i{
  background-image: url("Tile_Images/LMEXqaz.gif");
}
/*This fixes one of the tile images.*/
.b{
  /*pixel link*/
  background-size: 200% 200%;
  background-position: center center;
  background-image: url("Tile_Images/gRGXJyN.gif");
}

/*This makes the game appear properly on desktop.*/
@media screen and (min-width: 750pt) {
 .end_Message {
    margin-top: 100px;
    margin-left: 0%;
  }
 .start_Message {
    margin-top: 400px;
    margin-left: 32%;
  }
  li{
    margin: 2pt;
    height: 120pt;
    width: 120pt;
  }
  #total_board{
    background: transparent;
    width: 800pt;
    height: 700px;
  }
  .life_Container{
     width: 100%;
     margin-left: -2%;
     height: 80px;
     display:flex;
     align-self: center;
     justify-content: center;
   }
   .heart{
     width: 30pt;
     height: 30pt;
     margin: 2pt;
     background-size: 100% 100%;
     background-position: center 0pt;
     background-image: url("images/OiEpiWZ.png");
   }
   /*This makes the background color.*/
   body, html {
     text-align: center;
     background-image: url("images/R90Odkc copy.jpg");
     background-size: 270% 270%;
     background-repeat: no-repeat;
     background-position: center center;
     background-color: white;
   }
   .hide{
     background-color: white;
     background-image: url("images/R90Odkc.jpg");
     background-size: 370% 280%;
     background-repeat: no-repeat;
     background-position: center center;
   }
   /*This controls the box containing the tiles.*/
   #hereWeFlex {
     margin-top: 30pt;
     margin-left: 0pt;
     margin-top: 0pt;
     width: 100%;
   }
   .b{
     background-size: 200% 200%;
     background-position: center -50pt;
     background-image: url("Tile_Images/gRGXJyN.gif");
   }
}