body {
  background-color:#121212;
  color: #f5f5f5;
  font-size:20px;
  font-family: 'Lato', sans-serif;
  width:1000px;
  height:auto;
  margin-left:auto;
  margin-right:auto;
  
}

h1 {
  font-family: 'Shojumaru', cursive;
  color: #f5f5f5
}

ul{
  list-style:none;
  width:800px;
}


ul li{
  background-color:#2a2a2a;
  padding:20px;
  font-size:25px;
  letter-spacing:1px;

 
}

.pytanieKontener{
  display:none;
  width:inherit;/*dziedziczymy szerokość z elementu, w którym jest umieszczony nasz div czyli li*/
  height:300px;
  padding:12px;
  
}

/*selektor elementu potomnego odnosi się do diva, który jest umieszczony wewnątrz elmentu li, na który najechaliśmy kursorem czyli w naszym przypadku poszczególne pytanie*/
li:hover .pytanieKontener{
display: block;/*po najechaniu kursorem wyświetlamy pytanie*/

}


li:hover span{

  transition-duration:0.2s;
  background:#121212;
  padding:5px;
  border-radius:3px;
}


.bossImg{

  width:400px;
  height:300px;
  object-fit:cover;
  border-radius:3px;
  margin-right:20px;
  float:left;
}


input{

  margin-right:10px;
  margin-bottom:15px;
  transform: scale(1.5);
}
 

button{
  background-color:#0078f2;
  padding:20px;
  border: 1px solid #0078f2;
  color: #f5f5f5;
  margin-top:5px;
  margin-right:10px;
  font-size:20px;
  font-family: 'Lato', sans-serif;
}


button:hover {
opacity:0.9; 
cursor:pointer;

}

h3{
  display:inline;
}

.poprawna{
  background-color:#538771;
}
.bledna{
background-color:#f34a23;
}