body{
    background-color: #efe6f9;
}

/* ======================
 *  Colour changing button
 * ======================= */
.color-change{
    background: transparent;
    color: black;
    padding: 0.375rem 0.75rem;
    letter-spacing: 0.05rem;
    display: inline-block;
    transition: all 0.3s linear;
    /* font-size: 0.875rem; */
    font-size: 2vw;
    border: 2px solid var(--clr-black);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    border-radius: 0.25rem;

}
/* when you hover over the button these are the changes
transition in .color-change class is what makes the change less instantenous*/
.color-change:hover {
  color: white;
  background: black;
}

/* ==================
 *  Analogue Clock
 * ================== */
#clock-container{
    border-radius: 50%;
    height: 25vw;
    position: relative;
    width: 25vw;
    margin: auto;
    background-image: url(clock_icons/clock1.png);
    background-size: cover;
    box-shadow: 0 -15px 15px rgb(255,255,255,0.05),
    inset 0 -15px 15px rgb(255,255,255,0.05),
    0 15px 15px rgb(0,0,0,0.3),
    inset 0 15px 15px rgb(0,0,0,0.3);
}

#dot {
    position: absolute;
    border-radius: 10px;
    content: '';
    width: 5.5%;
    height: 5.5%;
    background-color: black;
    border-radius: 50%;
    z-index: 1000;
    left: 48%;
    top:47.35%;
}

#hour-hand #minu-hand #sec-hand #dot{
    position: absolute;
    border-radius: 10px;

    /* transform-origin specifies the point around where the transformation is applied, 
    for this roation it need to be done at the bottom of each clock hand  */
    transform-origin: bottom;
    transform: rotate(90deg);
      transition: all 0.05s;
      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}

#hour-hand{
/* transform-origin specifies the point around where the transformation is applied, 
for this roation it need to be done at the bottom of each clock hand  */
    transform-origin: bottom;
position:absolute;
content: '';
width: 2.25%;
height: 15%;
background-color: black;
z-index: 12;
border-radius: 6px 6px 0 0;
left: 49.5%;
top: 35.5%;
}


#min-hand{
/* transform-origin specifies the point around where the transformation is applied, 
for this roation it need to be done at the bottom of each clock hand  */
    transform-origin: bottom;
position: absolute;
content: '';
width: 1.5%;
height: 23%;
background-color: black;
z-index: 11;
border-radius: 6px 6px 0 0;
left: 50%;
top: 27.5%;
}


#sec-hand{
/* transform-origin specifies the point around where the transformation is applied, 
for this roation it need to be done at the bottom of each clock hand  */
transform-origin: bottom;
position: absolute;
content: '';
width: 0.95%;
height: 30%;
background-color: black;
z-index: 10;
border-radius: 6px 6px 0 0;
left: 50.385%;
top: 20.5%;

}


/* ==================
 *  Digital Clock
 * ================== */
 #date {
     font-size: 3.5vw;
 }

 .digital-clock {
    margin-top: 1.5%;
    display: flex;
    justify-content: center;
    font-size: 50px;
  }

  .digit-container {
      display: flex;
      margin: auto;
      margin-top: 1.5%;
      width:min-content;
      margin-bottom:3% ;
  }
  .digit {
    margin: 0 5px;
    height: 8.5vw;
    width: 8.5vw;
    display: flex;
    flex:1;
    flex:auto;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 3px 5px black;
    border-radius: 5px;
    color:black;
    font-size:4vw;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1);
  }

  .seperator {
      font-size: 8vw;
      margin-left: 3%;
      margin-right:3%;
  }