main.css

* {
    margin: 0px;
    padding: 0px;

}

body {

    height: 100%;
    width: 100%;
    background-color: rgb(255, 255, 255);

}

/* main section */
section {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

/* outer div */
.outer {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: rgb(243, 236, 236);
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    opacity: 1;
    box-shadow: inset 2px 2px 20px 8px rgb(93, 91, 91),
                      0px 0px 200px 2px rgb(0, 0, 0);

}

/* timer div  */
#timer {
    margin-bottom: 4rem;
    color: rgb(0, 0, 0);
    font-size: 5rem;
    letter-spacing: 8px;

}

/* all btns parent */
.btns {
    width: 30rem;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-around;
}


.btns button {
    padding: 1rem;
    border-radius: 20px;
    width: 8rem;
    font-size: 1.2rem;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
    color: white;
    border: none;

}





/* id for click events */
#start {
    background-color: rgb(22, 165, 53);
    box-shadow: inset 4px 4px 5px 5px rgb(81, 226, 97),
        2px 5px 10px 0px black;
}

#start:hover {
    opacity: 0.8;
}


#stop {
    background-color: rgb(188, 183, 13);
    box-shadow: inset 4px 4px 5px 5px rgb(218, 208, 24),
        2px 5px 10px 0px black;
}

#stop:hover {
    opacity: 0.8;
}

#reset {
    background-color: rgb(249, 0, 0);
    box-shadow: inset 4px 4px 5px 5px rgb(255, 52, 52),
        2px 5px 10px 0px black;
}

#reset:hover {
    opacity: 0.8;
}







/* 
p{
    margin-top: 2rem;
    align-items: center;
    letter-spacing: 2px;
    font-weight: bold;
    text-shadow: 2px 8px 4px black;
} */






/* for  extra large device */
@media screen and (max-width: 600px) {


    body {
        height: 100vh;
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .btns {
        width: 15rem;
        display: flex;
        justify-content: center;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
    }


    .outer {
        height: 80vh;
        width: 95vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;


    }

    #timer {
        width: auto;
        margin-bottom: 4rem;
        font-size: 2rem;

    }

    .btn {
        margin-top: 1rem;
    }

    section {
        height: 100%;
        width: 100%;

    }



}



/* for small device */
@media screen and (min-width:600px) {


    body {
        height: 100vh;
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #timer {

        margin-bottom: 4rem;
        font-size: 4rem;
        letter-spacing: 8px;

    }


    .btns {
        width: 30rem;
        display: flex;
        justify-content: center;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
    }

    .btns button {
        padding: 1rem;
        border-radius: 20px;
        width: 7rem;
        font-size: 1.5rem;
        font-family: Arial, Helvetica, sans-serif;
        cursor: pointer;
        color: white;

    }

    section {
        height: 100%;
        width: 100%;

    }

    .outer {
        height: 80vh;
        width: 80vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;


    }

    .btn {
        margin-top: 1rem;
    }



}



/* for tablet device */
@media screen and (min-width:700px) {


    body {
        height: 100vh;
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    #timer {
        margin-bottom: 4rem;
        font-size: 4rem;
        letter-spacing: 8px;

    }


    .btns {
        width: 30rem;
        display: flex;
        justify-content: center;
        align-items: center;   
        flex-direction: row;
      


    }

    .btns button {
        padding: 1rem;
        border-radius: 20px;
        width: 8rem;
        font-size: 1.2rem;
        font-family: Arial, Helvetica, sans-serif;
        cursor: pointer;
        color: white;
        margin: 0px 10px 0px 10px;

    }

    section {
        height: 80%;
        width: 80%;




    }

    .outer {

        height: 80%;
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;


    }

    .btn {
        margin-top: 1rem;
    }




}



/* for large device */

@media screen and (min-width: 1000px) {



    #timer {
        margin-bottom: 4rem;
        font-size: 4rem;
        letter-spacing: 8px;

    }


    .btns {
        width: 30rem;
        display: flex;
        justify-content: center;
        align-items: center;
        justify-content: space-around;
        flex-direction: row;


    }

    .btns button {
        padding: 1rem;
        border-radius: 20px;
        width: 8rem;
        font-size: 1.2rem;
        font-family: Arial, Helvetica, sans-serif;
        cursor: pointer;
        color: white;

    }

    section {
        height: 60vh;
        width: 80vw;



    }

    .outer {

        height: 60vh;
        width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;


    }

    .btn {
        margin-top: 1rem;
    }


}