body {
  margin: 0; 
  padding: 0; 
  box-sizing: border-box;
  height: 100vh; 
  /* background: coral; */
  /* background: linear-gradient(45deg, coral, coral, coral, rgb(245, 135, 95)); */
  background: url('squarebackgr.webp') repeat;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

#title {
  text-align: center; 
  color: ghostwhite; 
  font-weight: bold; 
}

.wrapper {
  background: orangered;
  padding: 20px 1px;  /* left-right padding - Set from 10px t o 1px */
  position: absolute; 
  left: 50%;
  top: 50%; 
  transform: translate(-50%, -50%);  
  width: 480px;
  color: ghostwhite;
  text-align: left;
  border-radius: 15px;
  text-shadow: 4px 4px 10px #222; 
  border: 4px solid ghostwhite;
}

/* Indent the content container */
.content-container {
   margin-left: 105px; 
   text-align: left;
}


#symbols {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: 350px;   
}

 h2 {
  color: ghostwhite; 
  font-size: 1.5em;
}


button { 
  margin: 2px; /* Empty space between buttons */
  padding: 8px 18px;
  color: #222;
  font-style: normal;
  outline: none; 

}


h4 { 
  text-align: center; 
  font-weight: normal;
}


@media screen and (max-width: 600 pixels) {
  .wrapper {
    max-width: 470px; 
    /* padding: 1px 1px; */
    position: absolute; 
    left: 50%;
    top: 50%; 
    transform: translate(-50%, -50%);  
    color: ghostwhite;
    text-align: left;
    border-radius: 12px;
    text-shadow: 4px 4px 10px #222; 
    border: 1px solid ghostwhite;
  }

  #symbols {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: 200px;   
}
  
}