@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
body{
  background-color: #FFFFFF;
      background-position: center center;
  color: #000000;
  
}
h1{
      margin-top: 30px;
}
#header-img{
        background-size: 100%;
        background-repeat: no-repeat;
        min-height: 135px;
      }

.question{
  font-size: 24px;
  margin-bottom: 10px;
}
.answers {
  margin-bottom: 20px;
  text-align: left;
  display: inline-block;
  width:  80%;
  text-align: center;
}
.answers label{
 
  margin-bottom: 10px;
}
button{
  font-family: 'Work Sans', sans-serif;
  font-size: 22px;
  color: #000;
  border: 0px;
  border-radius: 3px;
  padding: 10px;
  cursor: pointer;
  margin-bottom: 20px;
    width: 194px;
}
button:hover{
  background-color: #38a;
 color: #fff;
}
.slide{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s;
}
.active-slide{
  opacity: 1;
  z-index: 2;
}
.question{

  padding: 20px;
  border-radius: 25px;
  font-family: 'Helvetica';
}
.quiz-container{
  position: relative;
  height: 325px;
  overflow-y:auto;
  text-align: center;
  border-radius: 25px;
}
#quiz{
height:450px
}
label{
      border: 2px solid #000;
    padding: 15px;
    border-radius: 15px;
    background: #E6E6E6;
    text-align: center;
    margin: 15px;
    width: 28%;
    font-size:13px;
}
@media only screen and (max-width: 1100px) {
        #header-img{
          background-size: 200%;
          min-height: 100px;
        }
        label{
          width: 90% !important;

        }       
        .answers{
          width: 100%;
        }
        .quiz-container{
          height: 600px;
        }
        #quiz{
          height:430px;
        }
 }
.card {
    padding: 30px 40px;
    margin-top: 60px;
    margin-bottom: 60px;
    border: none !important;
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.2)
}

.blue-text {
    color: #00BCD4
}

.form-control-label {
    margin-bottom: 0
}

input,
textarea,
button {
    padding: 8px 15px;
    border-radius: 5px !important;
    margin: 5px 0px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    font-size: 18px !important;
    font-weight: 300
}

input:focus,
textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #00BCD4;
    outline-width: 0;
    font-weight: 400
}

.btn-block {
    text-transform: uppercase;
    font-size: 15px !important;
    font-weight: 400;
    height: 43px;
    cursor: pointer
}

.btn-block:hover {
    color: #fff !important
}

button:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    outline-width: 0
}
#logo {
     width: 300px;
  }
@media only screen and (max-width: 600px) {
  #logo {
     width: 100%;
  }
}
.btn-primary{
  color:  #fff;
  background-color: #851463;
  border: 1px solid #851463;
}
.btn-primary:hover{
  color:  #851463!important;
  background-color: #FFFFFF;
  border: 1px solid #851463;
}