@media screen and (max-width: 650px){
    body{
            background-color: hsl(200, 70%, 90%);
            font-family: 'Roboto Condensed', sans-serif;
        }
        .container {
            margin-top: 60px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 100px);
            gap: 2px;
            width: auto;
            height: auto;
        }
        .box {
            font-family: 'Orbitron', sans-serif;
            background-color: hsl(0, 0%, 20%);
            border: 1px solid #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 48px;
            font-weight: 700;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 1.2);
        }
        .h1 {
            color: hsl(180, 100%, 50%); /* Text color */
        }



#overlay-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Adjust opacity as needed */
  z-index: 9999;
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
}

#overlay-content {
  text-align: center;
  color: white;
}


#overlay-container2 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 12%;
  left: 0;
  width: 100%;
  height: 88%;
  background-color: rgba(75, 0, 130, 0.9); /* Adjust opacity as needed */
  z-index: 9999;
  opacity: 2;
  transition: opacity 2.5s ease-in-out;
}

#overlay-content2 {
  text-align: center;
  color: white;
  width: 100%;
  padding: 15px;
}


    .title{
        display:flex;
        justify-content: space-around;
        background-color: gray;
        padding: 1px;
        height: 45px;
        align-items: center;
        border-radius: 12px 12px 0 0;
    }
    .title2{
        display:flex;
        justify-content: space-around;
        align-items: center;
        background-color: #FFFFFF;
        padding: 1px;
        height: 40px;
        border-radius: 0 0 12px 12px;
    }
    .butDiv{
        margin-top: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #button{
        height: 40px;
        width: 150px;
        background-color: brown;
        border: none;
        font-size: 15px;
        border-radius: 15px;
        font-weight: bold;
        color: hsl(200, 70%, 90%);
    }
    #twop{
        height: 40px;
        width: 140px;
        background-color: green;
        border: 5px solid lime;
        font-size: 15px;
        border-radius: 9px;
        font-weight: bold;
        color: white;
        padding: 2px;
        margin-right: 20px;
    }
    #onep{
        height: 40px;
        width: 140px;
        background-color: #CCCCCC;
        border: none;
        font-size: 15px;
        border-radius: 9px;
        font-weight: bold;
        color: black;
        padding: 2px;
        margin-left: 20px;

    }
    #button:active{

        background-color: gray;
    }
    #heading{
        display:flex;
        justify-content: space-between;
        margin-top: 25px;
        padding: 0 15px 0 15px;
    }
    overlay-content2 .blocker{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
      @keyframes shake {
      0% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      50% { transform: translateX(5px); }
      75% { transform: translateX(-5px); }
      100% { transform: translateX(0); }
  }

  #icon {
    display: inline-block;
    animation: shake 0.5s ease-in-out infinite;
    margin-right: 15px;
  }
  #htext{
      text-align: center;
  }
  
}



@media screen and (min-width: 650px){
    body{
            background-color: hsl(200, 70%, 90%);
            font-family: 'Roboto Condensed', sans-serif;
        }
        .containerWrap{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #htext{
            margin-left: 30px;
        }
        .container {
            
            margin-top: 60px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 100px);
            gap: 2px;
            width: 600px;
            height: 400px;
        }
        .box {
            font-family: 'Orbitron', sans-serif;
            background-color: hsl(0, 0%, 20%);
            border: 1px solid #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 48px;
            font-weight: 700;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 1.2);
        }
        .h1 {
            color: hsl(180, 100%, 50%); /* Text color */
        }



#overlay-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Adjust opacity as needed */
  z-index: 9999;
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
}

#overlay-content {
  text-align: center;
  color: white;
}


#overlay-container2 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 12%;
  left: 0;
  width: 100%;
  height: 88%;
  background-color: rgba(75, 0, 130, 0.9); /* Adjust opacity as needed */
  z-index: 9999;
  opacity: 2;
  transition: opacity 2.5s ease-in-out;
}

#overlay-content2 {
  text-align: center;
  color: white;
  width: 100%;
  padding: 15px;
}

    #scoreWrap{
        margin-left: 15px;
        width: 650px;
    }

    .title{
        display:flex;
        justify-content: space-around;
        background-color: gray;
        padding: 1px;
        height: 45px;
        width: 500px;
        align-items: center;
        border-radius: 12px 12px 0 0;
    }
    .title2{
        display:flex;
        justify-content: space-around;
        align-items: center;
        background-color: #FFFFFF;
        padding: 1px;
        width: 500px;
        height: 40px;
        border-radius: 0 0 12px 12px;
    }
    .butDiv{
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #button{
        height: 40px;
        width: 150px;
        background-color: brown;
        border: none;
        font-size: 15px;
        border-radius: 15px;
        font-weight: bold;
        color: hsl(200, 70%, 90%);
    }
    #twop{
        height: 40px;
        width: 140px;
        background-color: green;
        border: 5px solid lime;
        font-size: 15px;
        border-radius: 9px;
        font-weight: bold;
        color: white;
        padding: 2px;
        margin-right: 20px;
    }
    #onep{
        height: 40px;
        width: 140px;
        background-color: #CCCCCC;
        border: none;
        font-size: 15px;
        border-radius: 9px;
        font-weight: bold;
        color: black;
        padding: 2px;
        margin-left: 20px;

    }
    #button:active{

        background-color: gray;
    }
    #heading{
        display:flex;
        justify-content: space-between;
        margin-top: 25px;
        padding: 0 15px 0 15px;
    }
    overlay-content2 .blocker{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
      @keyframes shake {
      0% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      50% { transform: translateX(5px); }
      75% { transform: translateX(-5px); }
      100% { transform: translateX(0); }
  }

  #icon {
    display: inline-block;
    animation: shake 0.5s ease-in-out infinite;
    margin-right: 100px;
  }
  
}