*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    background-image: url('./img/timer-bg.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.container{
    background-color: #fff;
    height: 60vh;
    width: 400px !important;
    margin: auto;
    border-radius: 10px;
    overflow: hidden;
}

.container #display{
    color: #8c52ff;
    height: 12vh;
    padding-top: 10px;
    width: 100%;
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    line-height: 10vh;
    cursor: pointer;
}

.container form{
    height: 30vh;
    width: 90%;
    margin: auto;
    background-color: #fff !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 40px;
    border: 1px solid #00000038;

}

.container form input{
    color: #8c52ff;
    border: none;
    outline: none;
    height: 45px;
    width: 70px;
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    border-bottom: 1px solid #8c52ff;
    cursor: pointer;
}

.container form input::placeholder{
    color: #8c52ff;
    font-weight: 500;
    font-size: 14px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


.buttons{
    position: relative;
    margin: auto;
    width: 70%;
    color: #fff;
}

.buttons button{
    font-size: 25px;
    background-color: #fff !important;
    margin-top: 30px;
}

.btn-1 {
    background: linear-gradient(0deg, rgb(0,255,0) 0%, rgb(0,255,0) 100%) !important;
    color: #fff !important;
      line-height: 42px;
      border: none;
      position: relative;
    }
    .btn-1 span {
      display: block;
      width: 100%;
      height: 100%;
    }
    .btn-1:before,
    .btn-1:after {
      position: absolute;
      content: "";
      right: 0;
      bottom: 0;
      background: rgb(0,255,0) !important;
      box-shadow:
       -7px -7px 20px 0px rgba(255,255,255,.9),
       -4px -4px 5px 0px rgba(255,255,255,.9),
       7px 7px 20px 0px rgba(0,0,0,.2),
       4px 4px 5px 0px rgba(0,0,0,.3);
      transition: all 0.3s ease;
    }
    .btn-1:before{
       height: 0%;
       width: 2px;
    }
    .btn-1:after {
      width: 0%;
      height: 2px;
    }
    .btn-1:hover{
      color:rgb(0,255,0) !important;
      background: transparent !important;
    }
    .btn-1:hover:before {
      height: 100%;
    }
    .btn-1:hover:after {
      width: 100%;
    }
    .btn-1 span:before,
    .btn-1 span:after {
      position: absolute;
      content: "";
      left: 0;
      top: 0;
      background:  rgb(0,255,0)!important;
      box-shadow:
       -7px -7px 20px 0px rgba(255,255,255,.9),
       -4px -4px 5px 0px rgba(255,255,255,.9),
       7px 7px 20px 0px rgba(0,0,0,.2),
       4px 4px 5px 0px rgba(0,0,0,.3);
      transition: all 0.3s ease;
    }
    .btn-1 span:before {
      width: 2px;
      height: 0%;
    }
    .btn-1 span:after {
      height: 2px;
      width: 0%;
    }
    .btn-1 span:hover:before {
      height: 100%;
    }
    .btn-1 span:hover:after {
      width: 100%;
    }

    .btn-2 {
        background: linear-gradient(0deg, rgb(255,0,0) 0%, rgb(255,0,0) 100%) !important;
        color: #fff !important;
          line-height: 42px;
          border: none;
          position: relative;
        }
        .btn-2 span {
          display: block;
          width: 100%;
          height: 100%;
        }
        .btn-2:before,
        .btn-2:after {
          position: absolute;
          content: "";
          right: 0;
          bottom: 0;
          background: rgb(255,0,0) !important;
          box-shadow:
           -7px -7px 20px 0px rgba(255,255,255,.9),
           -4px -4px 5px 0px rgba(255,255,255,.9),
           7px 7px 20px 0px rgba(0,0,0,.2),
           4px 4px 5px 0px rgba(0,0,0,.3);
          transition: all 0.3s ease;
        }
        .btn-2:before{
           height: 0%;
           width: 2px;
        }
        .btn-2:after {
          width: 0%;
          height: 2px;
        }
        .btn-2:hover{
          color:rgb(255,0,0) !important;
          background: transparent !important;
        }
        .btn-2:hover:before {
          height: 100%;
        }
        .btn-2:hover:after {
          width: 100%;
        }
        .btn-2 span:before,
        .btn-2 span:after {
          position: absolute;
          content: "";
          left: 0;
          top: 0;
          background:rgb(255,0,0)!important;
          box-shadow:
           -7px -7px 20px 0px rgba(255,255,255,.9),
           -4px -4px 5px 0px rgba(255,255,255,.9),
           7px 7px 20px 0px rgba(0,0,0,.2),
           4px 4px 5px 0px rgba(0,0,0,.3);
          transition: all 0.3s ease;
        }
        .btn-2 span:before {
          width: 2px;
          height: 0%;
        }
        .btn-2 span:after {
          height: 2px;
          width: 0%;
        }
        .btn-2 span:hover:before {
          height: 100%;
        }
        .btn-2 span:hover:after {
          width: 100%;
        }


        .btn-3 {
            background: linear-gradient(0deg, rgb(246,195,36) 0%, rgb(246,195,36) 100%) !important;
            color: #fff !important;
              line-height: 42px;
              border: none;
              position: relative;
            }
            .btn-3 span {
              display: block;
              width: 100%;
              height: 100%;
            }
            .btn-3:before,
            .btn-3:after {
              position: absolute;
              content: "";
              right: 0;
              bottom: 0;
              background: rgb(246,195,36) !important;
              box-shadow:
               -7px -7px 20px 0px rgba(255,255,255,.9),
               -4px -4px 5px 0px rgba(255,255,255,.9),
               7px 7px 20px 0px rgba(0,0,0,.2),
               4px 4px 5px 0px rgba(0,0,0,.3);
              transition: all 0.3s ease;
            }
            .btn-3:before{
               height: 0%;
               width: 2px;
            }
            .btn-3:after {
              width: 0%;
              height: 2px;
            }
            .btn-3:hover{
              color:rgb(246,195,36)!important;
              background: transparent !important;
            }
            .btn-3:hover:before {
              height: 100%;
            }
            .btn-3:hover:after {
              width: 100%;
            }
            .btn-3 span:before,
            .btn-3 span:after {
              position: absolute;
              content: "";
              left: 0;
              top: 0;
              background:rgb(246,195,36)!important;
              box-shadow:
               -7px -7px 20px 0px rgba(255,255,255,.9),
               -4px -4px 5px 0px rgba(255,255,255,.9),
               7px 7px 20px 0px rgba(0,0,0,.2),
               4px 4px 5px 0px rgba(0,0,0,.3);
              transition: all 0.3s ease;
            }
            .btn-3 span:before {
              width: 2px;
              height: 0%;
            }
            .btn-3 span:after {
              height: 2px;
              width: 0%;
            }
            .btn-3 span:hover:before {
              height: 100%;
            }
            .btn-3 span:hover:after {
              width: 100%;
            }

            @media only screen and (max-width: 767px){

                .contentainer{
                    background-color: #fff;
                    text-align: center;
                    width: 300px !important;
                    padding: 30px;
                }
                
                .container form{
                    background-color: #fff ;
                    width: 90%;
                    margin: auto;
                    height: 200px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 30px;
                    border-radius: 10px;

                }

                .buttons{
                    position: relative;
                    margin: auto;
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    
                }
                
            }