body{
    height: 100vh;
    width: 100%;
    padding: 0px;
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #c2c2c2;
}

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

section{
    width: 99.9%;
    height: 99.7vh;
    /* border: 1px solid red; */
    padding: 0px;
    margin: 0px;
}
section>.row{
    height: 100%;
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;

}
section>.row>.col-1{
    /* border: 2px solid rgb(18, 34, 255); */
    height: 75%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 30px;


}
section>.row>.col-1>.img-wrapper{
    /* border: 1px solid green; */

}

section>.row>.col-1>form{
    /* border: 1px solid green; */
    min-height: 25rem;
    min-width: 30rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
}

/* View timer section */
section>.row>.col-1>form>.view-timer{
    /* border: 1px solid orange; */
    height: 20rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    display: none;
}

section>.row>.col-1>form>.view-timer>.timer-action-view{
    /* border: 1px solid blue; */
    width: 25rem;
    height: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:#D9D9D9;
    
}
section>.row>.col-1>form>.view-timer>.timer-action-view>h1{
    font-size: 66px;
    font-weight: 400;
    
}

section>.row>.col-1>form>.view-timer>.btn-wrapper-1{
    /* border: 1px solid blue; */
    width: 25rem;
    height: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    
}
section>.row>.col-1>form>.view-timer>.btn-wrapper-1>button{
    font-size: 32px;
    font-weight: 400;
    height: 4rem;
    width: 7rem;
}


/* Set timer section */
section>.row>.col-1>form>.set-timer{
    /* border: 1px solid indianred; */
    height: 20rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    align-items: center;
    background: #383838;

    /* display: none; */
}

section>.row>.col-1>form>.set-timer>h1{
    /* border: 1px solid blue; */
    font-size: 36px;
    font-weight: 400;
    color: white;
    
}
section>.row>.col-1>form>.set-timer>p{
    color: white;
    padding: 0px;
    margin: 0px;
    font-size: 12px;
    font-weight: 400;
    display: none;
}
section>.row>.col-1>form>.set-timer>.form-group{
    /* border: 1px solid magenta; */
    width: 25rem;
    display: flex;
    justify-content: space-between;
    
}
section>.row>.col-1>form>.set-timer>.form-group>input{
    height: 49px;
    width: 120px;
    text-align: center;
    font-size: 24px;


}

section>.row>.col-1>form>.set-timer>.btn-wrapper-2{
    /* border: 1px solid navy; */

}
section>.row>.col-1>form>.set-timer>.btn-wrapper-2>button{
    font-size: 32px;
    font-weight: 400;
    height: 4rem;
    width: 7rem;
}

@media screen and (max-width: 768px) {
    body{
        height: 100vh;
        width: 100%;
        padding: 0px;
        margin: 0px;
        font-family: Arial, Helvetica, sans-serif;
        background-image: url("img/baller_pic.jpg");
        background-repeat: no-repeat;
        background-size:cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    *{
        margin: 0px;
        padding: 0px;
    }
    
    section{
        width: 100% !important;
        height: 100% !important; 
        /* border: 1px solid red !important; */
        padding: 0px;
        margin: 0px;
    }
    section>.row{
        height: 100%;
        padding: 0px;
        margin: 0px;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;
        align-items: center;
    
    }
    section>.row>.col-1{
        /* border: 2px solid rgb(18, 34, 255); */
        height: 35rem;
        width: 19.5rem;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        gap: 30px;
    
    
    }
    section>.row>.col-1>.img-wrapper{
        /* border: 1px solid green; */
        display: none;
    }
    
    section>.row>.col-1>form{
        /* border: 1px solid green; */
        min-height: 25rem;
        min-width: 20rem;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-evenly;
        align-items: center;
    }
    
    /* View timer section */
    section>.row>.col-1>form>.view-timer{
        /* border: 1px solid orange; */
        height: 20rem;
        width: 19rem;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        align-items: center;
        display: none;
    }
    
    section>.row>.col-1>form>.view-timer>.timer-action-view{
        /* border: 1px solid blue; */
        width: 19rem;
        height: 8rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color:#D9D9D9;
        
    }
    section>.row>.col-1>form>.view-timer>.timer-action-view>h1{
        font-size: 36px;
        font-weight: 400;
        
    }
    
    section>.row>.col-1>form>.view-timer>.btn-wrapper-1{
        /* border: 1px solid blue; */
        width: 19rem;
        height: 5rem;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        
    }
    section>.row>.col-1>form>.view-timer>.btn-wrapper-1>button{
        font-size: 22px;
        font-weight: 400;
        height: 3rem;
        width: 6rem;
        text-align: center;
    }
    
    
    /* Set timer section */
    section>.row>.col-1>form>.set-timer{
        /* border: 1px solid indianred; */
        height: 20rem;
        width: 19rem;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-evenly;
        align-items: center;
        background: #383838;
    
        /* display: none; */
    }
    
    section>.row>.col-1>form>.set-timer>h1{
        /* border: 1px solid blue; */
        font-size: 26px;
        font-weight: 400;
        color: white;
        
    }
    section>.row>.col-1>form>.set-timer>.form-group{
        /* border: 1px solid magenta; */
        width: 18rem;
        display: flex;
        justify-content: space-between;
        
    }
    section>.row>.col-1>form>.set-timer>.form-group>input{
        height: 34.5px;
        width: 82.5px;
    
    }
    
    section>.row>.col-1>form>.set-timer>.btn-wrapper-2{
        /* border: 1px solid navy; */
    
    }
    section>.row>.col-1>form>.set-timer>.btn-wrapper-2>button{
        font-size: 28px;
        font-weight: 400;
        height: 3rem;
        width: 6rem;
    }
    
    section .col-2{
        display: none !important;
    }
    
}