.title {
    color:green;
    font-size:300%;
    font-family: 'Righteous', cursive;
}

.container {
    color:white;
    margin-top:1%;
    opacity:0.9;
    background:black;
    border-radius: 50%;
    padding:7%;
}



body {
    text-align: center;
    background:teal;
    background-image: url("../images/bg2.jpg");
    font-family: 'Play', sans-serif;

  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

#question-text {
    color:white;
    
}

.option {
    /* padding-right:15px; */
    font-size:200%;
}
ul {
    list-style: none;
}
li {
    display: inline-block;
    margin-right: 10px;
}
input {
    visibility:hidden;
}
label {
    cursor: pointer;
}
input:checked + #opt1{
    color: yellow;;
}
input:checked + #opt2{
    color: yellow;
}
input:checked + #opt3{
    color: yellow;
}
input:checked + #opt4{
    color:yellow;
}

input:hover + #opt1 {
    color:gray;
}

input:hover + #opt2 {
    color:gray;
}


input:hover + #opt3 {
    color:gray;
}


input:hover + #opt4 {
    color:gray;
}


#question {
    font-size:250%;
    font-family: 'Righteous', cursive;
}

.reset-btn {
    width: 20vh;
    height: 5vh;
    background:black;
    color:white;
    margin-top:10vh;
}

.hide {
    display:none;
}

#result {
    font-size:60px;
    color:white;
    background: black;

    
    margin-top:2%;
    opacity:0.9;
    border-radius: 50%;
    padding:3%;
}

#result2 {
    font-size:60px;
    color:white;
    background: black;

    margin-top:2%;
    opacity:0.9;
    border-radius: 50%;
    padding:3%;
}

button {
    /* background-image: url("../images/btnbg.ico"); */
    background: green;
    
    font-size:150%;
}

.pulse {
    cursor: pointer;
    box-shadow: 0 0 0 rgba(204,169,44, 0.4);
    animation: pulse 2s infinite;
  }
  
  #font1 {
    font-family: 'Gloria Hallelujah', cursive !important;
  }
  
  @-webkit-keyframes pulse {
    0% {
      -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    }
    70% {
        -webkit-box-shadow: 0 0 0 20px rgba(204,169,44, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
    }
  }
  @keyframes pulse {
    0% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    }
    70% {
        -moz-box-shadow: 0 0 0 20px rgba(204,169,44, 0);
        box-shadow: 0 0 0 20px rgba(204,169,44, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
        box-shadow: 0 0 0 0 rgba(204,169,44, 0);
    }
  }