.container{
    z-index: 44;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0  3rem;
    position: relative;
    justify-content: space-around;
    height: 10vh;

}

.heading{
    padding: 1rem 0rem;
    text-align: center;
    font-size: 1.3rem;

}

.heading h1{
    color:  #D9874B;
    font-weight: lighter;
    letter-spacing: 3px;
    cursor: pointer;
    -webkit-background-clip: text;
    background-clip: text;
    -moz-text-fill-color:transparent;
    font-size: 75px;
    
}


.countdown-wrapper{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;

}


.card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.countdown-font{
    display: flex;
    background: linear-gradient(hsl(235, 16%, 15%) 50%,
    hsl(237,21%, 20%)50%);
    height: 90px;
    width: 80px;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 4px 3px rgba(0,0,0,0.377);
    border-radius: 10px;
    z-index: 44;
    position: relative;
    transition: all .4s ease-in;
    transform-style: preserve-3d;
    cursor: pointer;
}

.countdown-font.active{
    transform: translateY(360deg);
}
.countdown-font::after{
    position: absolute;
    content: "";
    width: 8%;
    height: 10%;
    background: hsl(346, 27%, 7%);
    left: 0px;
    top: 44%;
    border-radius: 0 50% 80% 0;


}

.countdown-font::before{
    position: absolute;
    content: "";
    width: 8%;
    height: 10%;
    background: hsl(348, 26%,7%);
    right: 0px;
    top: 44%;
    border-radius: 50% 0 0 80%;
}

.text{
    font-size: 2.3rem;
    color: hsl(135, 81%, 48%);
    cursor: pointer;
    transition: all .4s ease-in;
}

.text:hover{color: 345,82%, 52%;}

.disabled {
    pointer-events: none;
    opacity: 0.5;
  }