/* 
    Created on : Aug 12, 2021, 9:38:32 AM
*/
@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600;700;800&display=swap');

html {
    height: 100%;
}
body{
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
background: rgb(248,223,193);
background: linear-gradient(180deg, rgba(248,223,193,1) 25%, rgba(255,255,255,1) 53%, rgba(248,223,193,1) 100%);
}

.navbar .navbar-theme{
    justify-content: center!important;
    margin-bottom: 2rem;
}
.navbar .logo{
    margin: 1.5rem 0 0.3rem 0;
}

.question-list li span{
    margin-bottom: 0.5rem;
    font-weight: bold;
}
.question-list {
  counter-reset: my-awesome-counter;
  list-style: none;
}
.question-list li {
  margin: 0 0 0.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
  font-family: 'Abhaya Libre', serif;
  font-size: 1.1rem;
  margin-bottom: 3rem;
}
.question-list li::before {
  content: counter(my-awesome-counter);
  color: #000;
  position: absolute;
  --size: 28px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;
  background: #fff;
  border-radius: 50%;
  text-align: center;
}


.form-check-input:checked {
    background-color: #ff525e;
    border-color: #ff525e;
}
.form-check-input:checked[type=radio] {
    background-image: url(img/check.png);
}
.form-check-input:focus {
    border-color: #ff525e;
    box-shadow: 0 0 0 0rem rgb(13 110 253 / 25%);
}

.btn-theme1{
    color: #fff;
    background-color: #fc5d62;
    border-color: #fc5d62;
    border-radius: 2rem;
    margin-bottom: 0rem;
}
.btn-theme1:hover{
    color: #fff;
    background-color: #fd5459;
    border-color: #fc5d62;
}
.btn-theme2 {
    color: #fff;
    background-color: #41b53f;
    border-color: #338e31;
    border-radius: 2rem;
    margin-bottom: 2rem;
}
.btn-theme2:hover{
    color: #fff;
    background-color: #fd5459;
    border-color: #fc5d62;
}


.btn-theme2{
    color: #fff;
    background-color: #faa419;
    border-color: #faa419;
    border-radius: 2rem;
    margin-bottom: 2rem;
}
.btn-theme2:hover{
    color: #fff;
    background-color: #fa9e09;
    border-color: #faa419;
}

.result div {
    position:relative;
    width:100%; 
    height:100%;
}
.result canvas {
    display: block;
    position:absolute;
    top:0;
    left:0;
}
.result span {
    color:#fd2650;
    display:block;
    line-height:220px;
    text-align:center;
    width:220px;
    font-family:sans-serif;
    font-size:40px;
    font-weight:100;
    margin-left:5px;
}

.result input {
    width: 200px;
}

.answer-list{
    margin: 4rem 0 0 0;
    list-style: none;
    padding-left: 2.5rem;
}
.answer-list {
  counter-reset: my-awesome-counter;
  list-style: none;
}
.answer-list li {
  margin: 0 0 0.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
  font-family: 'Abhaya Libre', serif;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}
.answer-list li::before {
  content: counter(my-awesome-counter);
  color: #000;
  position: absolute;
  --size: 32px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;
  background: #fff;
  border-radius: 50%;
  text-align: center;
}