body    {
    /* responsible for styling body tag. */
    background: url("images/4.jpg") no-repeat center center fixed #000; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    text-shadow: 2px 2px 4px #000000;
    font-family: 'Lato', sans-serif;
    color:wheat;
    text-align: center;
    font-size: 1.8rem;
    
}

p.alternative-option-text {
    font-weight: lighter;
    font-size: 50%;
}


div#pomodoro-timer-container{
    /* parent container of the complete web app. */

    width: 85%;
    margin:auto;
    border-radius: 1%;
    display: block;
    padding: 1%;
    padding-bottom: 9.5%;
    background: rgba(0, 0, 0, 0.356);
}

span.pomodoro-punch {

    /* To style punch line */
    
    font-size: small;
    font-style: italic;
}

hr.live-seperator {
    border-top: none;
    border-bottom: 5px solid;
    width: 10%;
    display: block;
}

span.live-sec {
    
    /* Responsible for changing pomodoro timer font. */
    font-size: 5.5rem;

}

span.sec-remaining-text {
    /* To style specific "Seconds remaining " text  */

    font-size: 0.95rem  ;
}


input.setTimeLimit:hover {
    /* To set hover opacity for custom input box for every device */
    opacity: 1;
}

span.seperator {

    /* for general styling.  */
    padding-top: 5%;
    display: block;
}





/* for styling buttons on websites for all devices  */

button.btn {

    /* To style buttons  */
    
    margin: 3% 1% 0% 1%;
    background-color: rgba(2, 2, 2, 0.356);
    border:0px;
    border-radius: 5%;
    font-weight: 700;
    color:rgb(201, 185, 185);
    padding: 10px 15px;
    /* padding: 1% 2%; */
}


button.btn:hover {
    
    color:black;
    background-color: rgba(189, 163, 163, 0.356);;
}


/* Styling last part of the Web App ie. the footer and social media section for all devices  */

span.footer {
    /* To style website footer */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 45%;
}


hr.seperator {
    /* for styling horizontal line.  */

    width: 50%;
    margin-top: 10%;
}

i {
    /* To style font-awesome font */
    color:wheat;
}

i:hover {
    /* font awesome hover state */
    color: black;
}

div.social-media-container {
    display: block;
    padding: 3.5%;

}

a.social-media-icon {

    padding: 2%;
    text-decoration: none; 
    display: inline;
}






/* Below are properties setted in order to make the web application responsive for almost all devices. */

@media (max-width:768px){
    
    /* To handle mobile and tablet resolution devices. */

    div#live-timer {
        background-color: rgba(2, 2, 2, .100);
        border-radius: 5%;
        font-weight: lighter;
        width: 95%;
        padding: 5px;
        margin: 10% auto;
    }

    ::placeholder {
        color: wheat;
        text-align: center;
    }

    div#pomodoro-timer-container{
        /* parent container of the complete web app. */
    
        border-radius: 1%;
        display: block;
        padding: 2.5%;
        padding-bottom: 9.5%;
        background: rgba(0, 0, 0, 0.356);
    }


    div#live-timer, div#title-pomodoro, span.seperator , span.footer {
        user-select: none; /* standerd */
        -moz-user-select: none; /* firefox specific */
        -webkit-user-select: none; /* Chrome, Opera and Safari*/
        -ms-user-select: none; /* IE, ms-edge */		
    }

    input.setTimeLimit {

        display: block;
        background-color: transparent;
        text-align: center;
        color: wheat;
        opacity: 0.3;
        border-radius: 2%;
        border:1px solid black;
        margin: 10% auto;
        padding: 3%;
        width: 50%;
    }

    button.cntrl-btn {

        /* to change the way button looks for mobile and touch devices keeping all other button properties constant */

        margin: 3% 1% 0% 1%;
        background-color: rgba(2, 2, 2, 0.356);
        border:0px;
        display: block;
        margin: 2% auto;
        border-radius: 5%;
        font-weight: 700;
        color:wheat;
        padding: 10px 50px;
        /* padding: 1% 20%; */
    }

    body {

        font-size: 1.10rem;
    }

}


@media (min-width: 769px){

    /* To handle laptop and desktop devices */
    div#live-timer {
        background-color: rgba(2, 2, 2, .100);
        border-radius: 5%;
        width: 30%;
        padding: 15px;
        margin: 5% auto;
    }

    ::placeholder {
        color: black;
        text-align: center;
    }

    input.setTimeLimit {

        background-color: white;
        color: black;
        opacity: 0.3;
        border-radius: 2%;
        text-align: center;
        border:0px;
        margin: 5% 0 5% 0;
        padding: 1%;
        width: 20%;
    }
    button.cntrl-btn {


        margin: 3% 1% 0% 1%;
        background-color: rgba(2, 2, 2, 0.356);
        border:0px;
        display: inline-block;
        margin: 2% auto;
        border-radius: 5%;
        font-weight: 700;
        color:#FFFF;
        padding: 10px 50px;
        /* padding: 1% 20%; */
    }
    
    

}