@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");

.bg-container{
    font-family: "roboto";
    background-color: rgb(211, 235, 255);
    margin: 15px;
    padding: 30px;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    border:4px solid rgb(66, 154, 255) ;
    border-radius: 25%;

}
.heading{
    color: rgb(6, 139, 255);
    font-family: "Bree serif";
    font-size: 50px;
}
.timer{
    margin: 0% 15%;
    padding: 4px 0px;
    border-radius: 15px;
    background-color: white;
    color: rgb(0, 166, 255);
    font-size: 40px;
}
.units{
    color: rgb(255, 0, 0);
    font-size: 30px;
    font-weight: 500;
}
.button:active{
    scale: 0.97;
}
.button{
    margin: 8px;
    color:white;
}
#timeContainer{
    background-color: bisque;
    border-radius: 30px;
    border: 0px solid rgb(255, 208, 151);
    min-height: 0vh;
    margin-top: 30px;
}
.line{
    text-align: center;
    font-size: 30px;
    color: rgb(255, 140, 17);
}

/*  watch  */

.bg-container-watch{
    margin-left: auto;
    margin-right: auto;
    max-width: 50vw;
    margin-top: 0vh;
    color: white;
    background-color: rgb(255, 130, 245);
    border-radius: 25vh;
    border: 4px solid rgb(255, 76, 240);;
    padding: 4vw;
    text-align: center;
}

.b-container{
    padding: 8px;
}

.tab{

    font-size: 20px;
    font-family: "bree Serif";
    color: rgb(0, 125, 23);
    margin: 0px 10px;
    border: 0px solid rgb(174, 213, 181);
    border-width: 0px 0px 3px 0px;

}
.tab:hover{
    cursor: pointer;
}
.selected{

    border: 0px solid rgb(0, 125, 23);
    border-width: 0px 0px 3px 0px;
}

.timerContainer{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10vh;
    background-color: rgb(231, 231, 231);
    padding: 80px;
    width: fit-content;
    border: 3px solid rgb(188, 188, 188);
    border-radius: 25vh;
}

#secondsTime{
    font-size: 50px;
}
#milliSecendsTime{
    font-size: 30px;
}
#Status{
    font-weight: 700;
    font-size: large;
    color: rgb(57, 57, 171);
}
