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

/* body {
  background: #000;
  margin: 50px;
  color: burlywood;
  text-align: center;
} */

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  text-align: center;
  transition: background 0.6s ease;
}

.bg-blue {
  background-color: #1e90ff;
}

.bg-purple {
  background-color: #8e44ad;
}

.bg-orange {
  background-color: #f39c12;
}

.bg-gradient-sunset {
  background: linear-gradient(135deg, #ff6e7f, #bfe9ff);
}

.bg-gradient-mint {
  background: linear-gradient(135deg, #a1ffce, #faffd1);
  color: #333;
}

.bg-gradient-space {
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
}

.customColor4{
  background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
}

.blues {
  background: radial-gradient(circle,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
}
.rainbow {
  background: radial-gradient(ellipse farthest-corner at left top, #ff0000, #ff7300, #ffeb00, #47ff00, #00ffee, #2b65ff, #8000ff);
}
.golden {
  background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
  radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
}
.modal-content {
  background: rgba(255, 255, 255, 0.2);
}



#Clock7 {
  width: 450px;
  height: 150px;
  margin: 200px auto;
  scale: 1;
  color: white;
  /* display: flex; */
  clear: both;
  display: inline;
  /* background-color: #fff; */
  padding: 20px;
  border: 2px solid burlywood;
  border-radius: 20px;
  box-shadow: inset 0px 0px 20px burlywood;
}

.path {
  fill: white;
  /* stroke: burlywood; */
  /* stroke-miterlimit: 10;
  stroke-width: 1.5px; */
}

.clock {
  background-color: lightblue;
  color: darkblue;
  font-size: 24px;
  padding: 20px;
}

.alert {
  background-color: pink;
  color: red;
}