* {
    margin: 0;
    padding: 0;
  }

html, body, canvas {
    width: 100%;
    height: 100%;
}

div {
    width: 100%;
    height: 100%;
   background-repeat: no-repeat;
    background-position: center;
}


.situation {
    display: none;
    opacity: 0;
    background-color: #e0f7fa;
}

.situationText {
   position: absolute;
   bottom: 7em;
   left: 50%;
   transform: translateX(-50%);
   width: 90%;
   background-color: black;
   color: white;
   font-size: 3em;
}

.choiceSelect {
   position: absolute;
   list-style-type: none;
   border: 1px solid #ccc;
   bottom: 0em;
   left: 50%;
   transform: translateX(-50%);
   width: 75%;
   border-radius: 20px;
   color: white;
   font-size: 2em;
}

.choiceSelect li {
 padding: 10px 15px;
 border-bottom: 1px solid #ccc;
 cursor: pointer;
 background-color: rgba(0, 0, 0, 0.75);;
 transition: background-color 0.3s ease;
}

.choiceSelect li:first-child {
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
}

.choiceSelect li:last-child {
  border-bottom: none;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
}

.choiceSelect li:hover {
    background-color: rgba(173, 216, 230, 0.9);;
}

.choice {
    background-color: #80cbc4;
    display: none;
    opacity: 0;
}

.situation.active {
    display: block;
    opacity: 1;
}
.situationImage.inactive {
    display: none;
    opacity: 0;
}
.situationText.inactive {
    display: none;
    opacity: 0;
}
.choiceSelect.inactive {
    display: none;
    opacity: 0;
}
.choice.active {
    display: block;
    opacity: 1;
}

.acceptresponse {
   position: absolute;
   bottom: 0em;
   left: 50%;
   transform: translateX(-50%);
   width: 400px;
   height: 2em;
   font-size: 3em;
}

.choiceResponseText {
   position: absolute;
   bottom: 7em;
   left: 50%;
   transform: translateX(-50%);
   width: 90%;
   background-color: rgba(0, 0, 0, 0.75);;
   color: white;
   font-size: 3em;
}