.testkonteyner {
	background-color: #222222;
	min-height: 100vh;
	height: auto;
	position: relative;
	box-sizing: border-box;
    padding-bottom: 250px;
}

h1 {
    color: #ffffff;
    text-align: center;
    margin-bottom: 10px;
    font-size: 22px;
}

.questionWrapper {
    background-color: #ffffff;
    width: 94%;
    height: auto;
    margin-left: 3%;
    margin-right: 3%;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 6px;
    font-size: 18px;
}

.questionWrapper p {
    color: chocolate;
    font-weight: 500;
    font-size: 1em;
}

.questionWrapper h3 {
    margin-bottom: 10px;
    font-weight: 500;
}

.questionWrapper img {
    width: 80%;
    margin-left: 10%;
    border: solid 1px black;
    border-radius: 10px;
}

.questionWrapper .option {
    background-color: rgb(0, 68, 255);
    padding: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    color: white;
    cursor: pointer;
}

.disabled {
    pointer-events: none;  /* Prevent clicks */
    /* opacity: 0.7;          Reduce opacity */
  }
  

.questionWrapper .izah {
    width: 100%;
    height: auto;
    color: rgb(0, 0, 0);
    padding: 5px;
    box-sizing: border-box;
}

@keyframes fromBlueToRed {
    0% {background-color: rgb(0, 68, 255);}
    20% {background-color: rgb(255, 136, 0);}
    100% {background-color: green;}
  }

  .animate {
    animation-name: fromBlueToRed;
    animation-duration: 2s;
  }








  @media screen and (min-width: 768px) {
    body {
        background-color: #222222;
    }
    .testkonteyner {
        width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .questionWrapper {
        width: 100%;
        height: auto;
    }

    .questionWrapper img {
        width: 350px;
        margin: 0;
        margin-left: 225px;
    }



  }