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

body {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  background: #eee;
  padding: 20px;
}

h1 {
  font-size: 2.5rem;
  color: rgb(1, 94, 38);
  text-align: center;
  margin-bottom: 20px;
}

#characterContainer {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

#characterObj {
  width: 100%;
  max-width: 500px; /* Limit maximum width */
  height: auto;
}

#controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

button {
  height: 50px;
  width: 30%;
  max-width: 200px; /* Limit maximum width */
  margin: 10px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #eee;
  background-color: rgb(45, 224, 75);
  border: none;
  cursor: pointer;
  transition: background-color 0.25s;
}

button:hover {
  background-color: rgb(43, 92, 43);
}

/* ******* Character SVG Layers ******* */
 #hands,#food,#toung,#sad_lip,#teeth,#angry_mouth,#angry_nose,#redEyes,#tears,#dead_eye{
  opacity: 0;
}



/* Responsive styles */
@media screen and (max-width: 768px) {
  #characterObj {
    max-width: 80%; /* Adjust character size for smaller screens */
  }

 
button {
  height: 30px;
  width: 30%;
  max-width: 200px; /* Limit maximum width */
  margin: 10px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #eee;
  background-color: rgb(45, 224, 75);
  border: none;
  cursor: pointer;
  transition: background-color 0.25s;
}

button:hover {
  background-color: rgb(43, 92, 43);
}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait) {
  /* Styles for iPad Portrait Mode */

  #characterObj {
    max-width: 50%; /* Adjust character size for smaller screens */
  }
}