/*style.css--------------------------*/
/* comment out section vvvvv ---
* {outline: 1px solid red;}


/*----------------------------*/
/*global----------------------*/
* {
    font-size: inherit;

}
html {font-size: 16px;}

.container {
    border-radius:2%; 
    cursor: pointer;
    user-select: none;  
}
/*---logo------------------------*/
.logo {
    border:2px solid rgba(80, 80, 80, 0.928);
    border-radius:0% 0% 10px 10px;
}

/*---mainscreen-------------------*/
.mainscreen {
    border: 1px solid black;
    border-radius:1%;
}
.timer {
    border: 1px solid black;
    border-radius:3px;
}
/*timer mode SECTION------------*/
.stopwatchlight {
    border: 2px solid black;
    border-radius: 50%;
}
.alarmlight {
    border: 2px solid black;
    border-radius: 50%;
}
.timerlight {
    border: 2px solid black;
    border-radius: 50%;
}
/*time display SECTION--------------*/
.timedisplay {
    border: 1px solid #333;
    border-radius: 2px;
}
.time-text {
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: clamp(1.8rem, 4.5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: 2px;
    color: #212121;
    padding: 0;
    border-radius: 3px;
    filter: brightness(1.2);
    line-height: 0.9;
    width: 90%;
    text-align: center;
    white-space: pre;

}
/* Flashing animation for input mode */
@keyframes flash {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

.time-text.flashing {
    animation: flash 1s infinite;
}
/* Flashing animation for alarm */
@keyframes alarm-flash {
    0% { 
        opacity: 1; 
        background-color: transparent;
    }
    50% { 
        opacity: 0.3; 
    }
    100% { 
        opacity: 1; 
        background-color: transparent;
    }
}

.time-text.alarm-flashing {
    animation: alarm-flash 0.5s infinite;
}
/*start/stop button SECTION----*/
.sbutton {
    border:3px solid rgb(21, 21, 21);
    border-radius:50px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}
.sbutton:active {
    transform: translateY(2px);
}
/*----timerselector-------------*/
.timerselector {
    border-radius:10px;
    border:3px solid black;
}
.alarm p {
        font-size:small;
        font-weight:700;
        text-align:center;
}
.abutton {
    border-radius:50px;
    border:2px solid black;
    color:white;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}
.abutton:active {
    transform: translateY(2px);
}
.optionlight {
    border-radius:1px;
    border:2px solid black;
}
.optionbutton {
    border-radius:4px;
    border:2px solid black;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}
.optionbutton p {
    line-height: 1;
}
.optionbutton:active {
    transform: translateY(2px);
}

/*----keypad---------------------*/
.keypad {
    border:3px solid black;
    border-radius:10px;
}
.keypad > div > div {
    border:2px solid black;
    color:white;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}
.keypad > div > div:active {
    transform: translateY(2px);
}

.keypad > div:nth-child(1) > div,
.keypad > div:nth-child(2) > div,
.keypad > div:nth-child(3) > div,
.keypad > div:nth-child(4) > div,
.keypad > div:nth-child(5) > div,
.keypad > div:nth-child(6) > div,
.keypad > div:nth-child(7) > div,
.keypad > div:nth-child(8) > div,
.keypad > div:nth-child(9) > div,
.keypad > div:nth-child(11) > div {
    border-radius:25px;
}
.keypad > div:nth-child(10) > div,
.keypad > div:nth-child(12) > div {
    border-radius:10px;
}