body {
    text-align: center;
    background-color: ivory;
}

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  gap: 20px;
  font-family: sans-serif;
  font-size: 25px;

}


.mainimg {

    width: 270px;
    height: 270px;
    border-radius: 50%;
    max-width: 100%;
    max-height: 100%;
    margin-top: 30px;
}
.caption {
    font-size: 25px;
}

#num-field {
    margin-top: 20px;
    width: 70px;
    height: 30px;
    display: none;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 40%;
  margin-top: 40px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
  padding: 2px 16px;
}

#guessbtn {

  height: 50px;
  width: 100px;
  background-color: teal;
  color: yellow;
  font-weight: bold;
  font-size: 20px;
  border-radius: 10%;
  display: none;
}

#displaybtn {

  
  margin-top: 10px;
  height: 60px;
  width: 200px;
  background-color: teal;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 10%;
  display: none;
  
}

#replaybtn {

  
  height: 60px;
  width: 100px;
  background-color: teal;
  color: yellow;
  font-weight: bold;
  font-size: 20px;
  border-radius: 10%;
  display: none;
}
  
#guesshead {
  
  /*background-color: rgb(128, 0, 6);*/
  color: white;
  font-weight: bold;
  font-size: 20px;
  
  display: hidden;
  padding: 10px;
  margin-bottom: 40px;

}

#labeltext {

  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  display: none;

  
}
#labelbox {
   background-color: #E0B0FF	;
  border-radius: 2%;
  padding:8px;
  display: none;
  width: 50%;
}

@media only screen and (max-width: 600px) {


}

#numberlogo img {

  
  height: 200px;
  width: 300px;
  
  
}

#playbtn {

  height: 70px;
  width: 120px;
  background-color: green;
  color: yellow;
  font-weight: bold;
  font-size: 40px;
  font-family:'Courier New', Courier, monospace;
  display: inline;
  border-radius: 10%;
}