index.css

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box; 
}

body {
    height: 100vh;
    background-color: black;
    font-family: 'IBM Plex Mono';font-size: 22px;
}

#title-card {
  color: white;
  text-align: center;

}

.congrats {
  position: relative;
  visibility: hidden;
}

.congratsOpen {
  visibility: visible;
}

#congrats {
  text-align: center;
  background-color: white;
  position: absolute;
  top: 250px;
  left: 38%;
  z-index: 1;
  width: 500px;
  height: 250px;
  box-shadow: 10px 10px 10px rgb(45, 45, 74);
  border-radius: 10px;
}

#close {
  position: absolute;
  top: 400px;
  left: 48%;
  background-color: black;
  border-radius: 10px;
  box-shadow: 2px 2px 2px blue;
  color: white;
  z-index: 1;
  width: 100px;
  height: 50px;
  cursor: pointer;
}

#close:active {
  display: block;
}

.memory-wrap {
    width: 640px;
    height: 640px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: 0px 80px 45px 20px #fff;
    perspective: 1000px;
}

.memory-card {
    position: relative;
    width: 25%;
    height: 33.33%;
    background-color: black;
    box-shadow: 0px 0px 5px 0px #fff;
    border-radius: 10px;
    transform: scale(1);
    transform-style: preserve-3d;
    transition: transform .5s;
}

.memory-card:active {
    transform: scale(.97);
    transition: transform .2s;
}

.memory-card.flip {
  transform: rotateY(180deg);
}
  
.front-face, .back-face {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 10px;
    backface-visibility: hidden;
}

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

/* @font-face {
    font-family: DisposableDroidBB;
    src: url(DisposableDroidBB.ttf);
} */


:root {
    --shadows1: 5px 5px white;
    --shadows2: 5px 5px white;
    --shadows3: 5px 5px white;
  }
  
  body {
    background-color: black;
    margin: 0;
  }
  #space {
    position: fixed;
    background: black;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  .particle, .particle::after {
    position: absolute;
    background: magenta;
  }
  .particle::after {
    content: "";
    right: 100vw;
  }
  .particle:nth-child(1){
    animation: move 15s infinite linear;
  }
  .particle:nth-child(2){
    animation: move 30s infinite linear;
  }
  .particle:nth-child(3){
    animation: move 60s infinite linear;
  }
  .particle:nth-child(1), .particle:nth-child(1)::after{
    box-shadow: var(--shadows1);
    width: 2px;
    height: 2px;
  }
  .particle:nth-child(2), .particle:nth-child(2)::after{
    box-shadow: var(--shadows2);
    width: 4px;
    height: 4px;
  }
  .particle:nth-child(3), .particle:nth-child(3)::after{
    box-shadow: var(--shadows3);
    width: 5px;
    height: 5px;
  }
  @keyframes move {
    from {transform: translateX(0vw);}
    to {transform: translateX(100vw);}
  }
#wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin: auto;
    margin-left: 27%;
    width: 800px;
    height: 800px;
    gap: 0;
    background-color: #fff;
    box-shadow: 0px 0px 25px 20px #fff;
}

#wrap img {
    width: 180px;
    height: 180px;
}