* {
   box-sizing: border-box;
   overflow-y: hidden;
 }

 body {
   height: 100vh;
   font-family: 'Odibee Sans', cursive;
   background-image: url('./images/magic.jpg');
   background-repeat: no-repeat;
   background-size: 100% 100%;
   color: rgba(255, 255, 255, 0.863);
 }

 .header {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   column-gap: 2vw;
 }

 #buttons {
   display: flex;
   justify-content: center;
 }

 #start,
 #restart {
   margin-top: 0.5rem;
   padding: 8px 17px;
   font-size: 1.3rem;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   background-color: red;
   color: #fff;
   font-weight: 700;
 }

 .score-card {
   display: flex;
   justify-content: center;
   font-size: 1.5rem;
   column-gap: 2vw;
 }

 .score-card p {
   background-color: red;
   padding: 2px;
   font-weight: 700;
 }

 #message-container{
  display: flex;
  justify-content: center;
 }

 #message{
  background-color: red;
  color: white;
  font-weight: 700;
  text-align: center;
  font-size: 2.5rem;
  flex-basis: 27vw;
  padding: 10px;
 }

 #game-title {
   font-size: 3rem;
   text-align: center;
   color: white;
   background-color: red;
   padding: 10px;
 }

 .game-container {
   display: flex;
   justify-content: center;
   align-items: center;
 }

 #game {
   height: auto;
   flex-basis: 60%;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   row-gap: 4vh;
 }

 #game div {
   border: 1px solid black;
   border-radius: 5px;
   flex-basis: 19%;
   height: 17vh;
   margin: 10px;
   display: inline-block;
   background-image: url("images/dribble-04.jpg");
   transition: transform 0.5s;
   background-size: 100% 100%;
   background-repeat: no-repeat;
   cursor: pointer;
 }

 .rotate-card {
   transform: perspective(1000px) rotateY(180deg);
 }

 #game-instruction {
   background-color: rgb(134, 7, 7);
   text-align: center;
   flex-basis: 60vw;
   display: flex;
   justify-content: center;
   font-weight: 700;
   font-size: 1.5rem;

 }

 @media (max-width: 480px) {
   body {
     font-size: 14px;
   }

   #game {
     flex-basis: 90%;
   }

   #game div {
     flex-basis: 42%;
     height: 7vh;
     margin: 5px;
   }

   #game-title {
     font-size: 20px;
   }

   .score-card {
     font-size: 0.9rem;
   }
 }