<div class="rectangle-container">
  <div class="rectangle"></div>
  <div class="time">
    <p class="hours">12</p>
    <p class="separator">:</p>
    <p class="minutes">00</p>
    <p class="seconds">&nbsp;</p>

  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Protest+Guerrilla&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

:root {
  --background: #dde1e7;
  --rectangle-background: rgb(227, 222, 231);
  --shadow-light: rgba(255, 255, 255, 0.45);
  --shadow-medium: rgba(94, 104, 121, 0.3);
  --shadow-dark: rgba(0, 0, 0, 0.45);
  --darkBlue: rgb(0, 0, 45);
  --textColor: #fff;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--background);
  font-family: "Protest Guerrilla", sans-serif;
}

.rectangle {
  position: relative;
  width: 340px;
  height: 120px;
  transform: skewY(-5deg);
  border-bottom-right-radius: 16px;
  box-shadow: inset -5px -5px 9px var(--shadow-light),
    inset 5px 5px 9px var(--shadow-light),
    0px 10px 10px -10px var(--shadow-dark),
    10px 0px 10px -10px var(--shadow-dark);
}

.rectangle::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30px;
  width: 30px;
  height: 100%;
  background: var(--background);
  transform-origin: right;
  transform: skewY(45deg);
  box-shadow: 0px 10px 10px -10px var(--shadow-dark),
    10px 0px 10px -10px var(--shadow-dark);
}
.rectangle::after {
  content: "";
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
  height: 30px;
  background: rgb(227, 222, 231);
  transform-origin: bottom;
  transform: skewx(45deg);
  box-shadow: -5px -5px 9px var(--shadow-light),
    5px 5px 9px var(--shadow-medium);
}

.time {
  display: flex;
  font-weight: 900;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  position: absolute;
  margin: 5px 25px 0 10px;
  width: 300px;
  height: 80px;
  top: 48.5%;
  left: 50%;
  transform: translate(-50%, -50%) skewY(-5deg);
  font-size: 40px;
  transform-origin: right;
  background-color: transparent;
  box-shadow: inset -5px -5px 9px var(--shadow-light),
    inset 5px 5px 9px var(--shadow-medium);
}
.hours,
.separator,
.minutes,
.seconds {
  background: var(--darkBlue);
  color: var(--textColor);
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 10px;
  font-weight: 900;
}
.seconds {
  font-size: 15px;
  padding: 10px 4px;
}

document.addEventListener("DOMContentLoaded", function () {
  function updateTime() {
    const currentTime = new Date();
    const hours = document.querySelector(".hours");
    const minutes = document.querySelector(".minutes");
    const seconds = document.querySelector(".seconds");

    hours.innerHTML = currentTime.getHours().toString().padStart(2, "0");
    minutes.innerHTML = currentTime.getMinutes().toString().padStart(2, "0");
    seconds.innerHTML = currentTime.getSeconds().toString().padStart(2, "0");
  }
  updateTime();

  setInterval(updateTime, 1000);
});