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

body {
  min-height: 100vh;
  /* background-image: linear-gradient(60deg, #13547a, #80d0c7);
  background-repeat: no-repeat; */
  /* background-color: #6a89cc; */
  /* background-image: linear-gradient(to top, #9890e3 0%, #b1f4cf 100%); */
  background-image: linear-gradient(to top, #6a85b6 0%, #bac8e0 100%);

}

/*card design*/
.startgame {
  background-color: #80CBC4;
  margin-top: 20%;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, .2);
  font-family: 'Poppins', sans-serif;
}



.gamestart {
  background-color: #3F51B5;

}

.game {
  background-color: #CFD8DC;
  margin-top: 10%;

}

.count {
  font-family: "Austin News Text Semibold", Georgia, Times, serif;

  background-color: #37474F;
  border-radius: 100px;
  width: 188px;
}


.modal-content {
  border: none !important;
}

.modal-header {
  background-color: #3c6382;
  border: none !important;
}

.modal-body {
  border: none !important;
}

.modal-footer {
  border: none !important;

}

.modal-footer>:not(:last-child) {
  margin-right: none !important;
}

.btn-info {
  background-color: #3c6382;
  width: 100px;
  border-radius: 100px;
}

.btn-info:hover {
  color: #fff;
  background-color: #0a3d62;
  border-color: #0a3d62;
}

.btn-secondary {
  width: 240px;
  background-color: #3c6382;
  border-radius: 100px;
}

.btn-secondary:hover {
  background-color: #0a3d62;
  border-color: #0a3d62;

}

.randcolor {
  font-family: "Austin News Text Semibold", Georgia, Times, serif;
  text-transform: uppercase;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  font-size: 38px;
}


.btn-danger {
  height: 100px;
  width: 100px;
  background-color: #D32F2F;
  border-color: #D32F2F;
}

.btn-danger:hover {
  background-color: #D32F2F;
}

.btn-success {
  height: 100px;
  width: 100px;
  background-color: #388E3C;

}

.btn-success:hover {
  background-color: #388E3C;
}

.square {
  width: 220px;
  height: 220px;
  border-radius: 5%;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);

}

/*color*/
.red {
  background-color: #F44336;
}

.yellow {
  background-color: #FFEE58;
}

.blue {
  background-color: #2196F3;
}

.green {
  background-color: #4CAF50;
}

.orange {
  background-color: #FF9800;
}

.purple {
  background-color: #9C27B0;
}

.game {
  display: none;
}

/* footer */
.footer {
  background-color: #57606f;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;
}