body {
  /* background-color: rgb(232, 233, 190) !important; */
  /* overflow: hidden; Hide scrollbars */
}

.main {
  background-color: rgb(190, 233, 219);
  max-width: 1200px;
  /* max-height: 675px; */
  /* margin:auto; */
}

.page-title {
  color: #bbb;
  background-color: #333;
}

#copyright {
  font-size: 10px;
  color: #606060;
}

/* -----------------  T-shirt image CSS   -----------------------------------*/
.theImage {
    text-align: center;
    /* margin-left: 2rem; */
    background-color: rgb(208, 212, 184);
  }
  #t-shirt {
    /* border-radius: 8px; */
    
    /* margin: auto; */
  }

  .backInputs, .frontInputs {
    width: 90%;
    /* margin-left: 1rem; */
    margin: auto !important;
  }

  @media only screen and (min-width: 768px) and (max-width: 920px) {
    .theImage, #inputDiv {
      width:80%;
    }
    #txtFront, #txtBack {
      width:90%;
    }
  }

  @media only screen and (min-width: 768px) and (max-width: 992px) {
    .theImage, #inputDiv {
      margin-left: 1.5rem !important;
    }
  }
  @media only screen and (min-width: 992px) {
    #inputDiv {
      width: 80%;
      margin:auto;
    }
    .theImage {

      /* background-color: rgb(208, 212, 184); */
    }
  }

  .white {
    width: 10%;
    background-color: white;
    border: 1px solid white;
    padding:1rem;
    border-radius: 50%;
  }

  .black {
    width: 10%;
    background-color: black;
    border: 1px solid black;
    padding:1rem;
    border-radius: 50%;
  }

  .black:hover, .white:hover {
    cursor: pointer;
  }