@import url('https://fonts.googleapis.com/css2?family=Mouse+Memoirs&family=Roboto&display=swap');

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

body {
  height: 100vh;
  display: flex;
  background: #70095f;
  background-blend-mode: color-burn;
}

#bg-image {

 margin: 0 auto;
 

}
 @media only screen and (min-width: 960px,) { 
  .main-container {
    background-image: url('images/dino-index-dt.png');
    background-size: cover no-repeat;
    width: 100%;
    background-repeat: no-repeat;
    object-fit: contain;
    margin: 0%;
    padding: 0%;
  }
  .centered {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translate(-50%, -10%);
  
  }
}

@media only screen and (max-width: 700px) { 
  .main-container {
    background-image: url('images/dino-start.png');
  }
}
  


#main-head {
  font-family: mouse memoirs, sans-serif;
  font-size: 120px;
  letter-spacing: 5px;
  text-transform: uppercase;
  background-color:#70095f;
  color:#ffff;
  border-radius: 10px;
  margin-bottom: 30px;
 
}

#how-to-btn {
  text-transform: uppercase;
  font-family: Mouse Memoirs, sans-serif;
  font-size: 45px;
  margin-bottom: 20px;
  background-color:#fff;
  color: #70095f;
}

#start-btn {
  text-transform: uppercase;
  font-family: Mouse Memoirs, sans-serif;
  font-size: 45px;
  background-color: #70095f;
  color: #ffff;
}

/* Modal */
.popup .overlay {
  position: relative;
  top:0px;
  left:0px;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.7);
  z-index:1;
  display:none;
}
 
.popup .content {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(0);
  background:#fff;
  width:95%;
  max-width:500px;
  height:250px;
  z-index:2;
  text-align:center;
  padding:20px;
  box-sizing:border-box;
  font-family: Roboto,sans-serif;
}
 
.popup .close-btn {
  cursor:pointer;
  position:absolute;
  right:20px;
  top:20px;
  width:30px;
  height:30px;
  background:#222;
  color:#fff;
  font-size:25px;
  font-weight:600;
  line-height:30px;
  text-align:center;
  border-radius:50%;
}
 
.popup.active .overlay {
  display:block;
}
 
.popup.active .content {
  transition:all 300ms ease-in-out;
  transform:translate(-50%,-50%) scale(1);
}
 

/* Container holding the image and the text */
.main-container {
  position: relative;
  text-align: center;
  background-size: cover no-repeat;
  object-fit: cover;
 
}
  /* buttons */
 

  /* Centered text */
 .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  a .btn btn-primary btn-lg .active{
    text-transform: uppercase;
  }
  
.memory-game {
  width: 640px;
  height: 640px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  perspective: 1000px;
}

.memory-card {
  width: calc(25% - 10px);
  height: calc(33.333% - 10px);
  margin: 5px;
  position: relative;
  transform: scale(1);
  transform-style: preserve-3d;
  transition: transform .5s;
  box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

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

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

.front-face,
.back-face {
  width: 100%;
  height: 100%;
  padding: 10px;
  position: absolute;
  border-radius: 5px;
  background: #FFFFFF;
  backface-visibility: hidden;
}

@media only screen and (max-width: 700px) { 
  .front-face,
  .back-face {
    padding: 2px;
    border-radius: 5px;
    
  }
}

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