@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

:root {
    --soft-periwinkle: #9f80ff;
    --midnight-violet: #170E1F;
    --periwinkle: #D8CAFB;
    --dark-raspberry: #772548;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

body { 
    font-family: 'Roboto Mono', monospace; 
    background: linear-gradient(135deg, var(--midnight-violet) 0%, var(--soft-periwinkle) 50%, var(--periwinkle) 100%);
    min-height: 100vh; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    padding: 20px;
}

.card { 
    background: rgba(23, 14, 31, 0.95); 
    padding: 40px 20px; 
    border-radius: 20px; 
    box-shadow: 0 20px 40px rgba(119, 37, 72, 0.3); 
    text-align: center; 
    max-width: 500px; 
    width: 100%;
    border: 1px solid var(--periwinkle);
}

.card h { 
    font-size: 2rem; 
    margin-bottom: 10px; 
    background: linear-gradient(150deg, var(--soft-periwinkle), var(--dark-raspberry));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card p { 
    font-size: 1.2rem; 
    margin-bottom: 30px; 
    margin-top: 20px;
    color: var(--periwinkle); 
}

.timer { 
    display: flex; 
    justify-content: space-around; 
}

.box { 
    background: rgba(216, 202, 251, 0.15); 
    padding: 20px; 
    border-radius: 15px; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.3), inset 0 0 20px rgba(159, 128, 255, 0.1); 
    min-width: 80px; 
    transition: all 0.3s ease;
    border: 1px solid var(--soft-periwinkle);
    backdrop-filter: blur(10px);
}

.box:hover { 
    transform: scale(1.05); 
    box-shadow: 0 15px 30px rgba(119, 37, 72, 0.4), inset 0 0 30px rgba(159, 128, 255, 0.3);
    background: rgba(216, 202, 251, 0.25);
}

.num { 
    display: block; 
    font-size: 2.5rem; 
    font-weight: 700; 
    color: var(--soft-periwinkle); 
}

.label { 
    font-size: 0.9rem; 
    color: var(--periwinkle); 
    text-transform: uppercase; 
    letter-spacing: 1px;
}

.footer-div { 
    margin-top: 40px; 
}

.footer { 
    color: var(--dark-raspberry);
    font-size: 1.2rem; 
}