Super-Memory/styles.css

/* Neon Glow Font */
@font-face {
  font-family: "Neon Glow";
  src: url(font/SuperMario256.ttf);
}

body {
  background-color: #1a1a1a;
  display: grid;
  grid-template-areas:
      "header header header"
      "sidebar main aside"
      "footer footer footer"; 
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto; 
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  max-width: 1400px;
  margin: 0 auto;
  color: white;
  max-width: 1000px;
  max-height: 750px;

}

.container1 {
  grid-area: header;
  background-color: #1a1a1a; 
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 5px;
  font-size: 27px;
}

.container2 {
  grid-area: main;
  background-color: #1a1a1a;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container3 {
  grid-area: sidebar;
  background-color: #1a1a1a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 40%;
  padding: 20px;
}

.container3 p {
  margin: 0;
  font-size: 1.2em;
}

#attempts {
  margin-top: 10px;
  padding: 10px;
  font-size: 4em;
  background-color: #ffffff; 
  border-radius: 5px;
  width: 90px;
  text-align: center;
  color: #0dbe39; 
  font-family: "Neon Glow"; 
}

.container4 {
  grid-area: aside;
  background-color: #1a1a1a;
}

.container5 {
  grid-area: footer;
  background-color: #1a1a1a;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 20px;
}

.memory-game {
  width: 640px;
  height: 640px;
  display: flex;
  flex-wrap: wrap;
  perspective: 1000px;
}

.memory-card {
  width: calc(25% - 10px);
  height: calc(25% - 10px);
  margin: 5px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.memory-card.flip {
  transform: rotateY(180deg);
}

.memory-card img {
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  position: absolute;
}

.front-face {
  transform: rotateY(180deg);
}

.back-face {
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background-image: url('img/bg.jpg');
  background-size: cover;
  background-position: center;
  position: absolute;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background: #222;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  border: 2px solid rgb(245, 245, 245);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  color: white;
}

.hidden {
  display: none;
}

/* Neon effect */
.neon {
  --blur: 1.75rem;
  --box-blur: calc(0.5 * var(--blur));
  --glow: #ff00005e;
  color: #ff0050;
  text-shadow: 0 0 var(--blur) #ff00509e;
  font-family: "Neon Glow";
  animation: pulsate 0.5s infinite alternate;
}

@keyframes pulsate {
  0% {
      text-shadow: 0 0 var(--blur) var(--glow), 0 0 calc(var(--blur) * 2) var(--glow), 0 0 calc(var(--blur) * 3) var(--glow);
  }
  100% {
      text-shadow: 0 0 calc(var(--blur) * 0.75) var(--glow), 0 0 calc(var(--blur) * 1.5) var(--glow), 0 0 calc(var(--blur) * 2.25) var(--glow);
  }
}

.neon-button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 1.5em;
  color: #ff0050;
  text-decoration: none;
  text-shadow: 0 0 var(--blur) #ff0050;
  border: 2px solid #ff0050;
  border-radius: 5px;
  transition: color 0.3s ease, background-color 0.3s ease, text-shadow 0.3s ease;
}

.neon-button:hover {
  color: #101010;
  background-color: #ff0050;
  text-shadow: 0 0 calc(var(--blur) * 1.5) #ff0050;
}

.counter-text {
  --blur: 1.75rem;
  --box-blur: calc(0.5 * var(--blur));
  --glow: rgba(13, 190, 57, 0.24); 
  color: #0dbe39; 
  text-shadow: 0 0 var(--blur) var(--glow); 
  font-family: "Neon Glow"; 
  animation: pulsate-counter 0.3s infinite alternate; 
}

@keyframes pulsate-counter {
  0% {
      text-shadow: 0 0 var(--blur) var(--glow), 0 0 calc(var(--blur) * 2) var(--glow), 0 0 calc(var(--blur) * 3) var(--glow);
  }
  100% {
      text-shadow: 0 0 calc(var(--blur) * 0.75) var(--glow), 0 0 calc(var(--blur) * 1.5) var(--glow), 0 0 calc(var(--blur) * 2.25) var(--glow);
  }
}