*{
    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;
}

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.timer-content{
    background-color: #fff;
    text-align: center;
    width: 600px;
    padding: 30px;
    box-shadow: 7px 7px 20px 0px rgba(0,0,0,.3);
    border-radius: 12px;
}

.timer-content h3{
  margin-bottom: 20px;
  color: #8c52ff;
  font-size: 22px;
    font-weight: 500;
    cursor: pointer;
}

.timer-display{
    background-color: #fff;
    width: 90%;
    color: #8c52ff;
    margin: auto;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    border-radius: 10px;
    cursor: pointer;
}

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

    .timer-content{
        background-color: #fff;
        text-align: center;
        width: 400px;
        padding: 30px;
        box-shadow: 7px 7px 20px 0px rgba(0,0,0,.3);
    }
    
    .timer-display{
        background-color: #fff ;
        width: 90%;
        color: #8c52ff;
        margin: auto;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        border-radius: 10px;
    }
}


.buttons{
    position: relative;
}

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

.btn-1 {
    background: linear-gradient(0deg, rgb(0,255,0) 0%, rgb(0,255,0) 100%) !important;
    color: #fff;
      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;
          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;
              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%;
            }