.wrap {
  display: grid;
  place-items: center;
  grid-template-columns: 50% 50%;
  grid-template-rows: 150px 150px;
}

#main {
  border: 1px solid rgba(128, 127, 127, 0.349);
  padding: 5px;
}

body {
  background-color: rgb(184, 141, 141);
}

.logout {
  background-color: rgb(235, 241, 243);
  width: 95%;
  border-radius: 6px;
  margin: 0 auto 0 auto;
  padding: 0 10px 0 0;
  border: #2980b9 4px solid;
  text-align: right;
}

#signupDiv,
#loginDiv {
  background-color: rgb(235, 241, 243);
  width: 95%;
  border-radius: 6px;
  margin: 0 auto 0 auto;
  padding: 0px 0px 70px 15px;
  border: #2980b9 4px solid;
}

.outputs {
  border: rgba(25, 140, 248, 0.904) 2px solid;
  border-radius: 3px;
  padding: 15px;
  background-color: aliceblue;
  width: 210px;
}


/* Input form desgin */

.content {
  background-color: #2980b9;
  padding: 25px 50px 25px 50px;
}


/* Design for DB output */


/* wrap for all stats */

#stats {
  display: flex;
  flex-direction: row;
  justify-content: center;
}


/* box for stat list */

#statsOutputBoxDesign {
  /* background: rgba(235, 178, 23, 0.418); */
  width: 200px;
  padding: 15px;
}


/* ul design */

#statsOutput {
  background: rgba(151, 25, 201, 0.514);
  width: 200px;
  padding: 15px;
  list-style-type: none;
}


/* delete btn */

.delete-btn {
  display: inline-block;
  Cursor: pointer;
  width: 18px;
  height: 17px;
  background: url(delete-icn.svg) no-repeat center;
}