body {
    font-family: 'Montserrat', sans-serif;
  }
  
  .bg-green {
    background-color: #00BFBE;
  }
  
  .bg-button-forward {
    background-color: #642390;
    border-color: #642390;
  }
  
  .bg-button-forward:hover {
    background-color: #642390;
    border-color: #642390;
    cursor: pointer;
  }
  
  .bg-button-back {
    background-color: #F50060;
    border-color: #F50060;
  }
  
  .bg-button-back:hover {
    background-color: #F50060;
    border-color: #F50060;
    cursor: pointer;
  }
  
  
  .inp {
    background: none;
    border: none;
    border-radius: 0;
    -webkit-appearance: none;
    padding: 12px 0;
    height: 30px;
    border-bottom: 2px solid #F50060;
    transition: all 0.15s ease;
    color: #642390;
    margin-left: 3px;
    margin-right: 3px;
    text-align: center;
  }
  
  .inp:focus {
    outline: none;
    text-align: center;
  }

  .inp2 {
    background: none;
    border: none;
    border-radius: 0;
    -webkit-appearance: none;
    padding: 12px 0;
    height: 5px;
    width: 145px;
    border-bottom: 2px solid #F50060;
    transition: all 0.15s ease;
    color: #642390;
    margin-left: 3px;
    margin-right: 3px;
    text-align: center;
  }
  
  .inp2:focus {
    outline: none;
    text-align: center;
  }

  .inp3 {
    background: none;
    border: none;
    border-radius: 0;
    -webkit-appearance: none;
    padding: 12px 0;
    height: 5px;
    width: 90px;
    border-bottom: 2px solid #F50060;
    transition: all 0.15s ease;
    color: #642390;
    margin-left: 3px;
    margin-right: 3px;
    text-align: center;
  }
  
  .inp3:focus {
    outline: none;
    text-align: center;
  }

  .inp3 {
    background: none;
    border: none;
    border-radius: 0;
    -webkit-appearance: none;
    padding: 12px 0;
    height: 5px;
    width: 90px;
    border-bottom: 2px solid #F50060;
    transition: all 0.15s ease;
    color: #642390;
    margin-left: 3px;
    margin-right: 3px;
    text-align: center;
  }
  
  .inp3:focus {
    outline: none;
    text-align: center;
  }

  .inp4 {
    background: none;
    border: none;
    border-radius: 0;
    -webkit-appearance: none;
    padding: 12px 0;
    height: 5px;
    width: 30px;
    border-bottom: 1px solid #F50060;
    transition: all 0.15s ease;
    color: #F50060;
    margin-left: 3px;
    margin-right: 3px;
    text-align: center;
  }
  
  .inp4:focus {
    outline: none;
    text-align: center;
  }

  .inp5 {
    background: none;
    border: none;
    border-radius: 0;
    -webkit-appearance: none;
    padding: 12px 0;
    height: 5px;
    width: 290px;
    border-bottom: 2px solid #F50060;
    transition: all 0.15s ease;
    color: #642390;
    margin-left: 3px;
    margin-right: 3px;
    text-align: center;
  }
  
  .inp5:focus {
    outline: none;
    text-align: center;
  }




  @media (max-width: 600px) {
    .relogio {
        justify-content: center !important;
    }
  
    .card-body {
        text-align: center;
    }

    .inp {
      width: 100%;
    }
  
  }

  @media (max-width: 800px) {
    .relogio {
      justify-content: center !important;
     }
    .inp {
      width: 100%;
    }
  
  }