* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Helvetica Neue";
  font-weight: 400;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

*::-webkit-scrollbar {
  display: none;
}

html,
body {
  height: 100%;
  width: 100%;
}

main {
  height: 100%;
  width: 100%;
  background-image: url("./assets/bg.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  & #container {
    display: flex;
    flex-direction: column;
    width: 80%;
    gap: 4rem;
    align-items: center;
    width: fit-content;

    & #hero {
      display: flex;
      flex-direction: column;
      gap: 10px;
      text-align: center;

      & h1 {
        font-weight: 700;
        font-size: 48px;
      }

      & h3 {
        font-size: 28px;
      }
    }

    & h2 {
      font-size: 36px;
      font-weight: 500;
    }

    & #clock-container {
      backdrop-filter: blur(20px);
      padding: 2rem;
      border-radius: 50%;
      width: fit-content;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      & img {
        width: 400px;
        height: 400px;
        object-fit: cover;
        object-position: center;
      }

      & #hour-hand,
      & #minute-hand,
      & #second-hand {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateY(-50%) rotate(-90deg);
        height: 8px;
        width: 31%;
        transform-origin: center left;
        background-color: white;
        transition: transform 0.5s linear;
        border-radius: 10px;
      }

      .circle {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        border-radius: 50%;
        z-index: 100;
      }

      #second-hand {
        background: aquamarine;
        z-index: 4;
      }

      #minute-hand {
        background: hotpink;
        width: 25%;
        z-index: 2;
      }

      #hour-hand {
        background: white;
        width: 20%;
        z-index: 1;
      }
    }
  }
}