style.css

/* CSS Reset */
* {
  margin: 0;
  padding: 0;
  /* resets margin & padding settings for all elements to 0 to remove any browser inherited settings */
  box-sizing: border-box;
  /* total width / height of an element = content + padding + border */
}

body {
  background-color: #fdcfdf;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23fba9c6' fill-opacity='0.25' fill-rule='evenodd'/%3E%3C/svg%3E");
  color: #fff;
  font-family: "IM Fell DW Pica", serif;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /*  alignment on the main axis
      main axis changes depending on the flex-direction property (for column flex-direction, main axis is vertical)
  */
  align-items: center;
  /*  alignment on the cross axis
      cross axis changes depending on the flex-direction property (for column flex-direction, cross axis is horizontal)
  */
  min-height: 100vh;
  /* 100% of the available height meaning 100% of the current laptop / mobile browser height*/
}

/* HEADER */

header {
  padding: 10px 0;
  font-size: 22px;
  width: 100%;
  background-color: rgba(251, 169, 198, 0.4);
}

@media only screen and (min-width: 768px) {
  header {
    font-size: 28px;
  }
}

@media only screen and (min-width: 1024px) {
  header {
    font-size: 32px;
  }
}

/* MAIN SECTION */

main {
  background-color: #fff;
  width: 380px;
  height: 500px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

.card {
  width: 100px;
  height: 100px;
  background-color: #bce6eb;
  margin: 10px;
}

.card:hover {
  opacity: 0.7;
  cursor: pointer;
}

img {
  width: 100%;
  height: 100%;
  /* sets the width / height to 100% of the parent container */
}

.hidden {
  display: none;
}

@media only screen and (min-width: 768px) {
  main {
    width: 500px;
    height: 380px;
  }
}

@media only screen and (min-width: 1024px) {
  main {
    width: 580px;
    height: 440px;
  }
  .card {
    width: 120px;
    height: 120px;
  }
}

.gameOverlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 2;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #fba9c6;
  background-color: #fff;
  padding: 20px;
}

p,
button {
  margin: 10px 0;
  text-transform: uppercase;
  color: #888;
}

button {
  cursor: pointer;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #888;
  font: inherit;
}

button:hover {
  color: #fff;
  background-color: #fba9c6;
  font-weight: bold;
  border: 1px solid #fdcfdf;
}

/* FOOTER */

footer {
  padding: 10px 0;
  font-size: 22px;
  width: 100%;
  background-color: rgba(251, 169, 198, 0.8);
}