.main .timer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    height: calc(350px + 7vw );
    color: var(--border-color-primary);
    
}
.timer__wrapper {
    padding: 1.5rem .5rem;
    border-radius: .5rem;
    background: var(--bg-color-60);
    backdrop-filter: blur(15px);
    position: sticky;
    z-index: 3;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 8px;
    border: 1px solid var(--border-color-05);
    width: 100vw;
    max-width: 600px;
}
.main .timer .header {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-bottom: 2rem;
            text-align: center;
            margin-inline: 1rem ;
}
            .main .timer .header h1 {
                margin-bottom: 1rem;
            }

        .main .timer .date {
            display: flex;
            justify-content: center;
            align-items: center;
            column-gap: 2rem;
        } 
            .main .timer .date .time {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
        

        
       #datetime {
        display: none;
       } 
       #endtime {
        display: none;
       }