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

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(150deg,
      rgba(5, 5, 5, 0.769),
      rgb(203, 198, 198),
      rgba(0, 0, 0, 0.806));
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
}

:root {
  /* Light theme (default) */
  --bg-color: #f0f0f0;
  --text-color: #111;
}

body.light {
  --bg-color: #f0f0f0;
  --text-color: #111;
}

body.dark {
  --bg-color: #222;
  --text-color: #eee;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
  transition: background 0.3s, color 0.3s;
}

#theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.5rem;
  cursor: pointer;
}

.bigbox {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 15rem;
}

.container {
  position: relative;
  border-radius: 90px;
  box-shadow: inset 0px 0px 20px 2px rgb(0, 0, 0),
    inset 0px 0px 40px 8px rgb(0, 0, 0);
  background: linear-gradient(220deg,
      rgb(255, 255, 255),
      rgb(153, 149, 149),
      rgb(255, 255, 255));
  height: 23rem;
  width: 21rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  border-radius: 70px;
  background: black;
  color: navajowhite;
  height: 20rem;
  width: 18.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 10px 3px rgb(0, 0, 0);
}

.box::before {
  content: "";
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 70px;
  background: rgb(33, 32, 32);
  box-shadow: 0 0 15px 5px rgb(44, 42, 42);
  height: 19rem;
  width: 18rem;
}

.clock {
  background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFzM7NlIAUs_BKWFYcjZw40-sfl_qCIF89gMlhTlmrKCTs7fHlXE5tROn2BCa4vqtZcpM&usqp=CAU");
  /* background: url('https://media.idownloadblog.com/wp-content/uploads/2015/04/IanFuchs_WatchCert-notext-iPad-768x768.png'); */
  box-shadow: inset 0px 0px 70px 70px rgb(0, 0, 0);
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 18rem;
  width: 17.5rem;
  background-size: 170% 170%;
  background-repeat: no-repeat;
  background-position: center;
}

.clock::before {
  content: "";
  position: absolute;
  height: 8px;
  width: 8px;
  background: radial-gradient(navajowhite, rgb(0, 0, 0), black, black);
  border-radius: 50%;
  z-index: 1000;
}

.hours,
.minutes,
.seconds {
  position: absolute;
}

.hours,
.hr {
  height: 8rem;
  width: 8rem;
  display: flex;
  justify-content: center;
}

.hr::before {
  content: "";
  position: absolute;
  height: 60px;
  width: 4px;
  background: white;
  border-radius: 10px 10px 50% 50%;
  box-shadow: 0 0 8px 1px black, inset 0 0 3px 0.8px orange;
  border: 1px solid black;
  z-index: 900;
}

.minutes,
.mnt {
  height: 10rem;
  width: 10rem;
  display: flex;
  justify-content: center;
}

.mnt::before {
  content: "";
  position: absolute;
  height: 81px;
  width: 4px;
  background: white;
  border-radius: 10px 10px 50% 50%;
  box-shadow: 0 0 8px 1px black, inset 0 0 3px 0.8px orange;
  border: 1px solid black;
  z-index: 500;
}

.seconds,
.sec {
  height: 12rem;
  width: 12rem;
  display: flex;
  justify-content: center;
}

.sec::before {
  content: "";
  position: absolute;
  height: 115px;
  width: 1.2px;
  background: white;
  box-shadow: 0 0 8px 1px black;
  border-radius: 10px 10px 10px 10px;
  z-index: 100;
  border: 1px solid rgb(0, 0, 0);
}

.hr,
.mnt,
.sec {
  position: absolute;
  justify-content: center;
}

.number {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border: 2px solid red; */
  /* width: 15.5rem; */
}

.one {
  transform: translate(2rem, -7.5rem);
  margin-top: 10px;
  font-size: xx-large;
  font-weight: bolder;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.three {
  transform: translate(7.1rem, -0.34rem);
  margin-top: 10px;
  font-size: xx-large;
  font-weight: bolder;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.six {
  transform: translate(-1.35rem, 7rem);
  margin-top: 10px;
  font-size: xx-large;
  font-weight: bolder;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.nine {
  transform: translate(-9.9rem, -0.34rem);
  margin-top: 10px;
  font-size: xx-large;
  font-weight: bolder;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.main {
  height: 62rem;
  width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
}

.holes {
  position: absolute;
  display: grid;
  justify-content: center;
  align-items: center;
}

.hole1,
.hole2,
.hole3,
.hole4,
.hole5,
.hole6 {
  position: relative;
  margin: 1rem;
  display: grid;
  height: 1rem;
  width: 1.3rem;
  background: linear-gradient(270deg,
      rgba(191, 201, 201, 0.719),
      rgb(37, 46, 47) 80%);
  box-shadow: inset 0 0 1px 1px rgb(50, 50, 50),
    inset 0 0 1px 2px rgba(255, 255, 255, 0.694);
  z-index: 10;
  top: 28rem;
  border-radius: 10px;
}

.rtop {
  position: absolute;
  top: 14.1rem;
  left: 15.97rem;
  height: 7rem;
  width: 7rem;
  border-radius: 0 0 0 50%;
  background: transparent;
  box-shadow: -80px 70px 0 8px black;
  z-index: -1;
}

.rbottom {
  position: absolute;
  bottom: 14.1rem;
  left: 15.97rem;
  height: 7rem;
  width: 7rem;
  border-radius: 50% 0 0 0;
  background: transparent;
  box-shadow: -80px -60px 0 0px black;
  z-index: -1;
}

.ltop {
  position: absolute;
  top: 14rem;
  right: 15.89rem;
  height: 7rem;
  width: 7rem;
  border-radius: 0 0 50% 0;
  background: transparent;
  box-shadow: 85px 70px 0 8px black;
  z-index: -1;
}

.lbottom {
  position: absolute;
  bottom: 13.98rem;
  right: 15.89rem;
  height: 7rem;
  width: 7rem;
  border-radius: 0 50% 0 0;
  background: transparent;
  box-shadow: 85px -70px 0 8px black;
  z-index: -1;
}

.key {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem;
  width: 0.5rem;
  left: 21rem;
  top: 6rem;
  position: absolute;
  background: repeating-linear-gradient(rgb(125, 116, 116), black 2.35px);
  border-radius: 5px 10px 10px 5px;
  z-index: 1;
}

.key::before {
  content: "";
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem;
  width: 0.5rem;
  left: 0rem;
  top: 0rem;
  opacity: 0.5;
  position: absolute;
  background: radial-gradient(rgb(231, 229, 229), black);
  /* background: rgb(255, 255, 255); */
  border-radius: 5px 10px 10px 5px;
}

.btn {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4rem;
  width: 0.1rem;
  left: 21rem;
  bottom: 6rem;
  background: linear-gradient(90deg, rgb(0, 0, 0), rgb(255, 0, 0));
  border-radius: 0 5px 5px 0;
  z-index: 1;
}

.camera {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1rem;
  width: 1rem;
  left: 9.8rem;
  top: 0.2rem;
  position: absolute;
  background: rgba(0, 0, 0, 0.724);
  border-radius: 50%;
  box-shadow: inset 0px 0px 1px 3px rgb(0, 0, 0);
  z-index: 1;
}

.camera::before {
  content: "";
  position: absolute;
  height: 0.5rem;
  width: 0.5rem;
  background: rgb(107, 95, 95);
  border-radius: 50%;
  box-shadow: inset 0px 0px 1px 1px rgba(32, 31, 31, 0.932);
  border: 2px solid rgb(138, 134, 134);
}

.camera::after {
  content: "";
  position: absolute;
  height: 0.1rem;
  width: 0.1rem;
  background: rgb(23, 22, 22);
  border-radius: 50px;
  box-shadow: inset 0 0 1px 1px rgba(49, 47, 47, 0.932);
}

.band1 {
  position: absolute;
  bottom: 30rem;
  left: 5rem;
  height: 35rem;
  width: 11rem;
  background: linear-gradient(rgb(22, 21, 21), rgb(5, 5, 5), rgb(33, 31, 31));
  border-radius: 5px 5px 0 0;
  border: 2px solid transparent;
  border-top-color: rgba(24, 24, 24, 0.829);
  z-index: -1;
  box-shadow: 0 12px 30px 5px rgba(27, 27, 27, 0.632),
    inset 0 0 20px 10px rgb(0, 0, 0),
    inset 0 0 20px 15px rgba(102, 96, 96, 0.781),
    inset 0 0 50px 10px rgb(69, 66, 66);
}

.band1::after {
  content: "";
  position: absolute;
  top: 0.1rem;
  height: 0.1rem;
  width: 10.8rem;
  border-radius: 50%;
  background: radial-gradient(white, black);
  box-shadow: 0 -1px 5px 2px rgb(141, 140, 140);
  z-index: -100;
}

.band2 {
  position: absolute;
  top: 35rem;
  left: 5rem;
  height: 40rem;
  width: 11rem;
  background: linear-gradient(rgb(22, 21, 21), rgb(5, 5, 5), rgb(33, 31, 31));
  border-radius: 20px;
  box-shadow: 0 0 30px 5px rgba(27, 27, 27, 0.632),
    inset 0 0 20px 10px rgb(0, 0, 0),
    inset 0 0 20px 15px rgba(102, 96, 96, 0.781),
    inset 0 0 50px 10px rgb(69, 66, 66);
  z-index: -1;
}

.bandholder {
  position: absolute;
  background: linear-gradient(270deg,
      rgb(252, 252, 252),
      black 8%,
      rgb(105, 103, 103) 200%);
  box-shadow: 0px -2px 1px 1px black, inset 10px 1px 5px 2px rgb(0, 0, 0),
    inset -10px 5px 10px 4px rgb(34, 34, 34);
  height: 3rem;
  width: 11.5rem;
  left: 4.78rem;
  top: 5rem;
  border-radius: 5px;
  border: 1px ridge rgb(45, 45, 45);
  border-bottom: 2px ridge rgb(35, 35, 35);
  border-right: 3px ridge rgb(0, 0, 0);
  z-index: 1;
}

/* .joint1 { */
/* position: absolute; */
/* height: 3rem; */
/* width: 14rem; */
/* background: rgb(26, 25, 25); */
/* top: 18.5rem; */
/* right: 3.5rem; */
/* border-radius: 50px 50px 0 0; */
/* z-index: -10; */
/* } */

/* .joint1::before { */
/* content: ''; */
/* position: absolute; */
/* height: 6rem; */
/* width: 15rem; */
/* background: radial-gradient(rgb(0, 0, 0), rgb(122, 122, 122)); */
/* inset: 25px -32px; */
/* border-radius: 50%; */
/* border-top: 8px double rgba(56, 54, 54, 0.817); */
/* } */

/* .joint2 { */
/* position: absolute; */
/* height: 3rem; */
/* width: 12rem; */
/* border-radius: 50% 50% 0 0; */
/* background: radial-gradient(rgb(27, 26, 26), rgb(0, 0, 0)); */
/* bottom: 18rem; */
/* right: 4.5rem; */
/* z-index: -1; */
/* transform: rotate(180deg); */
/* } */

/* .joint2::before { */
/* content: ''; */
/* position: absolute; */
/* top: 10rem; */
/* height: 6rem; */
/* width: 15rem; */
/* inset: 25px -32px; */
/* border-radius: 50%; */
/* z-index: -1; */
/* background: radial-gradient(rgb(0, 0, 0), rgb(122, 122, 122)); */
/* border-top: 8px double rgba(56, 54, 54, 0.817); */
/* } */

.lock {
  position: absolute;
  height: 8.8rem;
  width: 11.9rem;
  border-top: 25px ridge rgba(56, 54, 54, 0.838);
  border-right: 12px groove rgb(33, 32, 32);
  border-left: 12px ridge rgb(33, 32, 32);
  border-bottom: 6px solid rgb(33, 32, 32);
  top: -11.4rem;
  left: 4.56rem;
  border-radius: 30px 30px 3% 3%;
  z-index: -10;
}

.lockstick {
  position: absolute;
  height: 7.65rem;
  width: 1rem;
  background: radial-gradient(rgb(125, 124, 124),
      rgb(16, 16, 16),
      rgb(12, 12, 12));
  top: -10.6rem;
  left: 9.9rem;
  border-radius: 0 0 0px 0px;
  border-bottom: 1px solid rgb(71, 70, 70);
  box-shadow: 0 0 5px 0.1px rgba(56, 54, 54, 0.468);
  z-index: 1;
}

.lockstickTop {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0.6rem;
  width: 1rem;
  left: 9.9rem;
  top: -10.5rem;
  background: linear-gradient(rgb(255, 255, 255) 0.2px, rgb(0, 0, 0));
  box-shadow: 0.1px -0.6px 0px 0.6px rgba(166, 164, 164, 0.848),
    inset 0 0.5px 0px 0.1px rgb(85, 77, 77);
  transform: skew(-8deg);
  border-radius: 1px 1px 0.7% 0.7%;
  z-index: 1;
}

.lockstickBottom {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0.35rem;
  width: 1.5rem;
  top: -3.14rem;
  left: 9.65rem;
  aspect-ratio: 0.7;
  border-radius: 50%;
  border: 1.5px solid rgb(22, 22, 22);
  border-top: 2px groove rgb(70, 70, 70);
  /* border-left-color: rgb(253, 0, 0); */
  /* border-right-color: rgb(253, 0, 0); */
  /* border-bottom-color: rgb(253, 0, 0); */
}

.bar {
  position: absolute;
  display: flex;
  justify-content: center;
  align-content: center;
  /* height: 1rem; */
  /* width: 15.6rem; */
  /* top: -9.5px; */
  /* transform: translate(0px, -135px); */
  /* border-radius: 50px 50px 0 0; */
  /* border: 13px solid transparent; */
  /* border-top-color: rgba(87, 87, 87, 0.215); */
}

.BarContent {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  right: -7.5rem;
  top: -8.9rem;
}

.alarm {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  border: 2px solid white;
  border-radius: 50%;
  height: 0.7rem;
  width: 0.7rem;
  right: 13rem;
  top: 0.2rem;
  z-index: 10;
}

.alarm::before {
  content: "";
  position: absolute;
  height: 0.2rem;
  width: 0.2rem;
  top: 0rem;
  box-shadow: 1px 1px white;
  transform: rotate(45deg);
}

.alarmear1 {
  position: absolute;
  height: 1.1rem;
  width: 0.6rem;
  border: 1.5px solid transparent;
  border-radius: 50%;
  border-top-color: white;
  transform: rotate(45deg);
}

.alarmear2 {
  position: absolute;
  height: 1.1rem;
  width: 0.6rem;
  border: 1.5px solid transparent;
  border-radius: 50%;
  border-top-color: white;
  transform: rotate(-45deg);
}

.charging {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0.5rem;
  width: 1rem;
  right: 1.5rem;
  top: 0.25rem;
  border-radius: 2px;
  font-size: 6px;
  font-weight: 600;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: black;
  background: linear-gradient(90deg, lime 80%, black 1%);
  border: 1px solid rgb(255, 255, 255);
}

.charging::before {
  content: "";
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0.1rem;
  width: 0.1rem;
  left: 0.9rem;
  border-radius: 0.5px 0.5px 0.5px 0.5px;
  background: rgb(255, 255, 255);
  z-index: -1;
}

.wifi {
  position: absolute;
}

.wifiband1 {
  position: absolute;
  right: 2.645rem;
  top: 0.23rem;
  width: 1.01rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: white;
}

.wifiband2 {
  position: absolute;
  right: 2.75rem;
  top: 0.35rem;
  width: 0.8rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: white;
}

.wifiband3 {
  position: absolute;
  right: 2.87rem;
  top: 0.458rem;
  width: 0.56rem;
  aspect-ratio: 1.09;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: white;
}

.wifiband4 {
  position: absolute;
  right: 3.058rem;
  top: 0.51rem;
  height: 2.8px;
  width: 2.8px;
  transform: rotate(45deg);
  border-radius: 50px 0 0 0;
  aspect-ratio: 9;
  border: 0.7px solid transparent;
  background: white;
  border-top-color: white;
}

/************** Digital Section ********/

.digicontainer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  padding-left: 1rem;
  top: 1rem;
  height: 4rem;
  width: max-content;
  color: white;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.hour,
.second,
.minute,
.session {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  height: 4rem;
  width: max-content;
  font-size: 2.5rem;
  font-weight: 700;
}

#session {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: small;
  top: -7px;
}

.date,
.day {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 4rem;
  width: max-content;
  font-size: 2.5rem;
  font-weight: 700;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

#date {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 3rem;
  font-size: large;
  text-align: center;
  top: 30px;
}

#day {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 6.5rem;
  font-size: large;
  font-weight: 350;
  text-transform: uppercase;
  top: 30px;
}

#second {
  position: relative;
  animation: secBlink 0.5s ease infinite alternate both;
  top: -3px;
}

@keyframes secBlink {
  0% {
    color: transparent;
  }
}

.weather {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 4.2rem;
  left: 8rem;
}

.cloudBox {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cloud1 {
  position: absolute;
  bottom: -0.4rem;
  height: 0.5rem;
  width: 1.2rem;
  background: rgb(255, 255, 255);
  border-radius: 20px;
}

.cloud2 {
  position: absolute;
  bottom: -0.1rem;
  height: 0.4rem;
  width: 0.5rem;
  right: -0.45rem;
  background: white;
  border-radius: 50px;
  transform: rotate(-45deg);
}

.cloud3 {
  position: absolute;
  height: 0.6rem;
  width: 0.6rem;
  border-radius: 50%;
  background: white;
  bottom: -0.15rem;
  right: -0.15rem;
}

.temp {
  position: absolute;
  left: 0.8rem;
  bottom: -0.65rem;
  font-size: 15px;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}