*{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}
.container{
    width: 600px;
    height: 270px;
    background-color: #FDB7EA;
    font-size: 30px;
    border: 5px solid  #FBF3B9;
    text-align: center;
    margin: 200px 370px 200px 370px;
    border-radius: 10px;
}
body{
    background-color: #B7B1F2;
}
p{
    color: #2A3335;
}
#Guess-number-head{
    color: #2A3335;
}
#userInput{
    width: 180px;
    height: 23px;
    /* border: 1px solid #410e49; */
    border-radius: 3px;
    font-size: 16px;
    color: black;
    font-weight: bold;
    text-align: center;
}
#outputtext{
    color: red;
}
#enterButton{
    padding: 2px 7px 2px 7px ;
    font-size: 16px;
    font-weight: bold;
    border: 1px solid black;
    border-radius: 3px;
    /* background-color: #B7C7F9; */
    background-color: #6C9AE6;;
    cursor: pointer;
    transition:  0.5 s ease ;
    color: black;
}
#enterButton:hover {
    color: black;
    background-color:#4cfff0 ;
}
#attempts{
    color: black;
    font-size: 20px;
    padding: 10px;
    margin-top: 10px;
}
@media (max-width: 768px) { /* Tablet */
    .container {
        font-size: 24px; /* Slightly smaller text */
    }

    #userInput {
        width: 140px; /* Make input wider on tablets */
        height: auto;
    }

    #enterButton {
        padding: 2px 10px; /* Adjust button padding */
        font-size: 16px
    }

    #attempts {
        font-size: 18px; /* Adjust font size for attempts */
    }
}

@media (max-width: 480px) { /* Mobile */
    .container {
        font-size: 20px; /* Further reduce text size */
        padding: 15px; /* Less padding */
    }

    #userInput {
        width: 80px;  /* Full width input on mobile */
        height: auto; /* Adjust height for touch interfaces */
    }

    #enterButton {
      /* Full width button for touch */
        font-size: 14px;
        padding: 2px 8px;
    }

    #attempts {
        font-size: 16px; /* Smaller attempts text */
    }
}