/*layout.css-----------------------------*/
/*--------------------*/

/*-----------
* {outline: 1px solid red;}
/*----------------------------*/
/*global----------------------*/
html {
    display:flex;
    justify-content:center;
    height:100vh;
    width:100vw;
    margin:auto;
}
body {
    display:flex;
    justify-content:center;
    align-items:center;
    height:98%;
    width:98%;
    margin:auto;
}

/*----------------------------*/
.container {
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    height:95%;
    width:100%;
    max-height:1000px;
    max-width:700px;
    min-height:600px;
    min-width:350px;
    gap:2px;
}
/*--logo-------------------------*/
.logo {
    display:flex;
    justify-content: center;
    align-items:center;
    height:4%;
    width:35%;
    margin-top: 2px;
}


/*---mainscreen--------------------*/
.mainscreen {
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    align-items: center;
    height:50%;
    width:87%;
    margin-top: 3px;
}
    .timer {
        display:flex;
        flex-direction:row;
        height:24%;
        width:98%;
    }
        /*timer mode SECTION---------*/
        .timer > :nth-child(1) {
            position: relative;
            display: flex;
            flex-direction: column;
            height:100%;
            width:15%;
        }
            .stopwatchlight, .timerlight, .alarmlight {
                position: absolute;
                height: auto;
                min-width:5%;
                width: 25%;
                aspect-ratio: 1;
            }
            
            .stopwatchlight {
                top: 5px;
                right: 4px;
            }
            .alarmlight {
                top: 50%;
                transform: translateY(-50%);
                left: 7px;
            }
            .timerlight {
                bottom: 5px;
                right: 4px;
            }
        /*time display SECTION--------*/
        .timer > :nth-child(2) {
            display:flex;
            justify-content:center;
            align-items:center;
            height:100%;
            width:65%;
        }
            .timedisplay {
                display:flex;
                justify-content:center;
                align-items:center;
                height: 95%;
                width:95%;
            }
        /*start/stop button SECTION----*/
        .timer > :nth-child(3) {
            display:flex;
            justify-content:center;
            align-items:center;
            height:100%;
            width:20%;
        }
            .sbutton {
                display:flex;
                justify-content:center;
                align-items:center;
                height:auto;
                width:75%;
                max-height:80%;
                aspect-ratio: 1;
            }


/*----timerselector-------------------*/
.timerselector {
    display:flex;
    flex-direction:row;
    height:8%;
    width:75%;
    margin-top:1%;
}
    /*alarm button*/
    .alarm {
        display:flex;
        flex-direction:column;
        align-items: center;
        height:100%;
        width:20%;
    }
    .alarm p {
        margin-top:0;
        padding:0;
        height:20%;
    }
    .abutton {
        display:flex;
        justify-content:center;
        align-items:center;
        
        height:50%;
        width:50%;
        margin-bottom:8px;
    }
    /*option section*/
    .timerselector > div {
        height:100%;
        width:20%;
    }

        /*option light subsection*/
        .option > :nth-child(1) {
            display:flex;
            justify-content:center;
            align-items:center;
            height:20%;
            width:100%;
        }
            .optionlight {
                height:100%;
                width:30%;
                margin-top:8px;
            }
        /*option button subsection*/
        .option > :nth-child(2) {
            display:flex;
            justify-content:center;
            align-items:center;
            height:80%;
            width:100%;       
        }
            .optionbutton {
                display:flex;
                justify-content:center;
                align-items:center;
                height:50%;
                width:70%;
            }
            .optionbutton p {
                text-align:center;
                margin:0;
            }

    
/*---keypad---------------------------*/
.keypad {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    height:28%;
    width:53%;
    margin-top:2%;
}
    .keypad > div {
        display:flex;
        justify-content:center;
        align-items:center;
        height:25%;
        width:33.333%;
    }
    /*numbers 0-9*/
    .keypad > div > div {
        display:flex;
        justify-content:center;
        align-items:center;
    }
    .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 {
        height:78%;
        width: 78%;
    }
    .keypad > div:nth-child(10) > div,
    .keypad > div:nth-child(12) > div { 
        height:50%;
        width:70%;
    }


/*---*/







/*----------------------------*/
/*---TEXT--------------------------*/
@media screen and (max-width:500px){
    html { font-size: 12px; }

}
@media screen and (min-width:501px){
    html { font-size: 20px; }
}
@media screen and (min-width:700px){
    html { font-size: 24px; }
}
/*----------------------------*/