body{overflow-x: hidden; font-family: 'open sans'; font-weight: 300;

animation-name: loadIn;
animation-duration: 0s;
animation-delay: 1s;
animation-fill-mode: forwards;
opacity: 0;

background-color: #EBEBEB;
}

h3{color:#333; font-weight: 300;}

input{
  text-indent: 5px;
}

.container{
  margin-top: 0px;
  display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 0px !important;
    position: relative;
}

.text-center{
  text-align: center!important;
    margin-left: auto;
    margin-right: auto;
    margin: auto;
    position: absolute;
    left:0;
    right: 0;
        z-index: 99;
}

#quizList{
    margin-top: 130px;
    width: 100vw;
    text-align: center;
    height: 100vh;
}


.quiz{
  padding: 20px;
  margin: 5px;
  transition: .25s;
}

.quiz:hover, .answer:hover {
  background-color: lightblue;
  cursor: pointer;
  transition: 1s;
}

.answer:hover{
  /*border:1px solid #fff;*/
  transition: 1s;
}

.answer:active{
  border:1px solid #fff;
  transition: 1s;
}

ul {
  text-align: center;
  list-style-type: none;
  padding: 0;
}

.answer {
  margin: 20px;
  padding: 20px;
  border: solid 1px black;
  font-weight: 500;

  margin-left: 15%;
  margin-right: 15%;
}

.selectedAnswer {
  background-color: lightblue;
}

.correctAnswer {
  background-color: #7FE973;
}

.incorrectAnswer {
  background-color: #EF4E4E;
}

#resultArea{
    text-align: center!important;
    margin-left: auto;
    margin-right: auto;
    margin: auto;
    position: absolute;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
    background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}



body::-webkit-scrollbar {
    width: 0px;
    transition: 3s;
    -webkit-transition: all 1s;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: #333;
  outline: 1px solid #333;
}


button{
  color: #fff;
    background: #7997A1;
    border: none;
    padding: 10px;
    width: 200px;
    cursor: pointer !important;

    margin: 10px;
}

button:hover{
  background: lightblue;
}


@media only screen and (max-height: 700px) {
    .container{margin-top: 0px;}
}

@media only screen and (max-width: 450px) {
  #quizList {
    margin-top: 40px;
  }

  .answer {
    margin: 10px;
    padding: 10px;
  }

  h2{
    font-size: 1.25em;
  }

  h3{
    font-size: 1.25em;
  }

  #quizList {
    padding-top: 45px;
  }

}


@keyframes loadIn{
  from {opacity: 0;}
  to {opacity: 1;}
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}