<template>
  <div>
      <div class="row">
        <div class="col-12 pt-3">
          <h6 class="text-muted text-center">We are analyzing your background noise...</h6>
        </div>
        <div class="col-12">
          <h4 class="text-center fw-bold pt-5">The microphone does not provide any level</h4>
          <h6 class="text-center text-muted">Please check the input level of the microphone in the audio  </h6>
          <h6 class="text-center text-muted">system settings of your device and start again. </h6>
        </div>
        <div class=" pt-5 text-center">
          <input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
            <label class="btn btn-outline-warning px-5 fw-bolder" for="success-outlined">
              Fix This Problem
            </label>

          <input type="radio" class="btn-check " name="options-outlined" id="danger-outlined" autocomplete="off">
            <label class="btn btn-outline-warning ms-3 px-5 fw-bolder" for="danger-outlined">
              Try Again
            </label>
        </div>
      </div>

    <div class="row pt-5 mt-2 ">
      <div class="col-12 text-center pt-5 mt-3  position-fixed bottom-0 pb-5 mb-2">
        <NuxtLink class="btn btn-warning px-2 " to="/onbording"></NuxtLink>
        <NuxtLink class="btn btn-warning px-4 mx-2 " to="/onbording/onbording2"></NuxtLink>
        <NuxtLink class="btn btn-warning px-2 " to="/onbording/onbording3"></NuxtLink>
        <NuxtLink class="btn btn-warning px-2 mx-2 " to="/onbording/onbording4"></NuxtLink>
        <h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
      </div>
    </div>
    </div>

</template>
<script>
export default {
  name:'OnBording',
}
</script>

<style >
.bar{
  background-color: #e9c046;

}
.btn-outline-warning:active{
  color: white !important;
}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
  color: white !important;
}
</style>