p {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
}

#mainContainer {
    min-width: 600px;
    max-width: 600px;
    width: 100%;
    height: 800px;
    position: relative;
    display: inline-block;
}

.fullPageBlur {
    background-color: gray;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    opacity: 0;
}

.chatWebsiteLoginCont {
    background-color: #F4EDE4;
    height: 100%;
    width: 100%;
}

.topBarCont {
    height: 110px;
    width: 100%;
    background-color: #4a154b;
    display: flex;
    justify-content: center;
    align-items: center;
}

.webpageText {
    margin: 0;
}

.textHighlight {
    color: #ecb22e ;
}

.headerMainText {
    font-size: 35px;
    color: white;
    text-align: center;
    font-weight: bold;
}

.headerSubText {
    font-size: 16px;
    color: white;
    font-weight: 100;
    max-width: 500px;
    text-align: center;
}

.loginSectionCont {

    background-color: white;
    width: 95%;
    height: 430px;
    margin-top: 30px;
    border-top-right-radius: 60px;
    border-bottom-right-radius: 60px;
    display: flex;
    justify-content: center;

}

.loginFormCont {
    width: 80%;
    height: 90%;
    margin: 20px 0 20px 20px;
    
}

.loginFormSubCont {
    margin-top: -10px;
}

.newMessage {
    font-size: 16px;
    margin-top: -15px;
}

.loginText {
    margin-top: -30px;
}

.loginText>p {
    font-size: 34px;
}

.formFieldCont {
    display: flex;
    align-items: center;
}

.textInputField {
    margin-left: 10px;
}

.textError>p {
    color: red;
    font-size: 16px;
    margin-left: 10px;
}

.actualTextInput {
    width: 200px;
    height: 35px;
    border-radius: 5px;
    border: 1px solid #bdbdbd;
    padding-left: 10px;

    font-size: 16px;
}

.passwordInfo>p {
    font-size: 16px;
    margin-left: 95px;
    margin-top: -10px;
    width: 250px;
}

.loginButtonCont {
    display: flex;
    
    margin-top: 20px;
}

.loginButton {
    width: 80px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #bdbdbd;
    background-color: #4a154b;
    color: white;
    font-size: 16px;
    margin-left: 95px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loginButton:hover {
    background-color: #5e1e5a;
    cursor: pointer;
}

.notARobotCont {
    display: flex;
    align-items: center;
    margin-top: 20px;
    border: 1px solid #bdbdbd;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #bdbdbd;
    width: 250px;
    margin-left: 95px;
}

.tickboxCont {
    width: 40px;
    height: 40px;
    margin-left: 10px;
    border-radius: 5px;
}

.notARobotTickBox {
    background-color: #e4e4e4; 
    width: 40px;
    height: 40px;
}

.notARobot {
    margin-left: 15px;
}

.checkmark {
    display: inline-block;
    transform: rotate(45deg);
    height: 25px;
    width: 12px;
    margin-left: 40%; 
    border-bottom: 7px solid #78b13f;
    border-right: 7px solid #78b13f;
  }


.areYouHumanGlobalCont {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;

    opacity: 0;
}

.chatWebsiteChatsScreenCont {
    background-color: #F4EDE4;
    height: 100%;
    width: 100%; 
    overflow: hidden;
}

.chatScreenTopBarCont {
    height: 110px;
    width: 100%;
    background-color: #4a154b;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.chatScreenTopAppName {
    font-size: 22px;
    color: white;
    text-align: left;
    margin: 0px 0 0 10px;
    flex-grow: 1;
}

.chatScreenTopBarRow1 {
    display: flex;
    width: 100%;
    padding-left: 20px;
    margin-left: 20px;
    margin-top: 20px;
    height: 100%;
}

.chatScreenTopBarRow2 {
    display: flex;
    flex-direction: row;
    justify-content: end;
    width: 100%;
    padding-left: 20px;
    margin-left: 20px;
    height: 100%;
    position: relative;
}

.chatScreenTopCategory {
    flex-grow: 1;
    font-size: 20px;
    color: white;
    text-align: center;
    margin-right: 0 10px 0 20px;
    bottom: 0;
    position: relative;
}

.chatScreenTopIcon {
    height: 30px;
}

.chatScreenTopIconCont {
    flex-grow: .1;
}

#chatScreenChatsCategory {
    border-bottom: 2px solid #ecb22e;
}

.greyedOutText {
    color: #bdbdbd;
}

.chatScreenChatsCont {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.ianChat {
    width: 80%;
    margin-top: 20px;
    height: 100px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.ianChat:hover {
    background-color: #e4e4e4;
    cursor: pointer;
    border-radius: 50px;
}

.chatImageCont {
    height: 100px;
    width: 100px;
    border-radius: 50px;
    overflow: hidden;
}

.chatImage {
    width: 100%;
    height: 100%;
}

.chatSummaryTextCont {
    height: 100px;
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 20px;
    position: relative;
}

.chatSummaryTextCont {
    margin: 0;
}

.chatSummaryTextCont>p {
    margin: 0;
    font-size: 16px;
    height: 20px;
    margin-left: 20px;
}

.chatSummaryName {
    position: absolute;
    bottom: 3px;
    font-weight: bold;
}

.chatSummaryText {
    position: absolute;
    top:3px;
    width: 100%;
    color: rgb(116, 116, 116);
}

.chatSummaryTimeCont>p {
    font-size: 16px;
    color: rgb(116, 116, 116);
    margin-right: 10px;
}

.chatScreenWarningCont {
    width: 90%;
    position: absolute;
    
    margin: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    border: 3px solid #ecb22e;
    background-color: white;
    border-radius: 10px;
    box-shadow: 1px 1px 5px #bdbdbd;
    transition: top 500ms ease-in-out;
}

.relativeWrapper {
    position: relative;
}

.chatScreenWarningText {
    margin-left: 10px;
}

.chatScreenWarningHeaderText {
    font-size: 20px;
    font-weight: bold;
    margin-left: 10px;
    margin: 10px;
}

.chatScreenWarningTextText {
    margin: 10px;
}

#areYouHumanCont {
    position: relative;
    margin: 20px auto auto auto;
    width: 90%;
    height: auto;
    border: 2px solid #bdbdbd;
    background-color: #f0f0f0;
    border-radius: 15px;
    box-shadow: 1px 1px 5px #bdbdbd;
    outline: 6px solid white;
}

.conversationScreenGlobalCont {
    background-color: #F4EDE4;
    height: 100%;
    width: 100%; 
}

.conversationScreenTopCont {
    width: 100%;
    display: flex;
    align-items: center;
}

.conversationsTopBarImageCont {
    height: 80px;
    border-radius: 50px;
    overflow: hidden;
    margin-left: 20px;
}

.conversationsTopBarImage {
    width: 100%;
    height: 100%;
}

.conversationsTopBatSenderInfoCont {
    margin-left: 20px;
}

.conversationsTopBatSenderInfoCont>p {
    margin: 5px;
    color: white;
}

.conversationsTopBarSenderName {
    font-size: 20px;
    font-weight: bold;
}

.conversationsTopBarSenderStatus {
    font-size: 16px;
    color: gray;
}


.message-box {
  position:relative;
  display: flex;
  width:120%;
  margin: 5px 0;
  margin-left: 20px;
  margin-bottom: -25px;
}

.message-box p {
  position:relative;
  right: 0;
  text-align: right;
  max-width: 65%;
  padding: 12px;
  background: #dcf8c6;
  border-radius: 10px;
  font-size: 16px;
}

.message-box p span {
  display: block;
  margin-top: 5px;
  font-size: 0.8em;
  opacity: 0.5;
}

.message-box-image {
    position:relative;
    height: 200px;
    max-width: 65%;
    margin: 12px;
    border-radius: 10px;
}

.friend-message p {
  background: #fff;
}

.image-and-caption p {
    background: #fff;
    position: absolute;
    top: 0;
    left: 32%;
    width: 40%;
}

#imageCaptionEndingText {
    font-size: 16px;
}

.friend-message {
  justify-content: flex-start;
}

#theend {
    font-size: 20px;
    font-weight: bold;
    display: block;
}

#endingMessage2 {
    opacity: 0;
}

#endingmessage3 {
    opacity: 0;
}

#endingmessage4 {
    opacity: 0;
}

#endingmessage5 {
    opacity: 0;
}

#endingmessage6 {
    opacity: 0;
}

.chatbox-input {
  position:relative;
  width: 100%;
  height: 60px;
  background: #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chatbox-input i {
  cursor: pointer;
  font-size: 1.8em;
  color: #515855;
}

.chatbox-input i:nth-child(1) {
   margin: 15px;
}

.chatbox-input i:last-child {
  margin-right: 25px;
}

 .chatbox-input input {
    position: relative;
    width: 90%;
    margin: 0 20px;
    padding: 10px 20px;
    border-radius:10px;
    font-size: 1em;
    border:none;
    outline:none;
 }

.message-box.friend-message::before {
  content : '';
  position: absolute;
  top: 16px;
  left: -12px;
  width: 20px;
  height: 20px;
  background: linear-gradient(225deg, #fff 0%, #fff 50%, transparent 50%, transparent);
}

.chatboxCont {
    position: absolute;
    bottom: 10px;
    width: 100%;
}


#areYouHumanLine {
    position: relative;
    display: flex;
    margin: 20px auto;
    background-color: re;
    height: 50px;
    width: 100%;
    justify-content: space-around;
    align-items: center;
}

.areYouHumanLineitem {
    height: 40px;
    width: 40px;
    position: relative;
    background-color: aqu;
    display: flex;
}

#robotImg {
    align-items: center;
}

#robotTxtCont {
    width: 200px;
    align-items: center;
}

#robotTxt {
    width: 200px;
}

.displayNone {
    display: none !important;
}

.displayBlock {
    display: block;
}

.wrongCont {
    height: 100%;
    width: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    z-index: 100;
}

#wrong {
    font-size: 250px;
    color: red;
}

/* CHECKBOX STUFF */

#checkbox {
    width: 90px;
    background-color: lightblue;
    border: 2px solid #7fbcd2;
    align-items: center;
    border-radius: 5px;
}

#checkbox:hover {
    background-color: #86a8b3;
    cursor: pointer;
}

/* END CHECKBOX STUFF */


/* IMAGE CHOICE STUFF */

.imageChoiceCont {
    height: auto;
    width: 100%;
    opacity: 0;
}

.imageChoiceTopRow {
    height: auto;
    width: 100%;
    display: flex;
    margin: 20px 0;
}

.imageChoiceTopIcon {
    flex-grow: 1;
    background-color: blu;
    display: flex;
    justify-content: center;
}

.imageChoiceRobotImgCont {
    height: 50px;
    width: 50px;
}


.imageChoiceTopText {
    flex-grow: 5;
    background-color: orang;
    display: flex;
    flex-direction: column;
}

.imageChoiceTopTextRow {
    margin: 1;
    display: flex;
    flex-grow: 1;
}

.imageChoiceTopTextRow > p {
    font-size: 16px;
    margin: 0;
    align-self: flex-end
}

.imageChoiceTopTextRow2 > p {
    align-self: flex-start;
}


.imageChoiceImages {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    gap: 10px;
}

.imageChoiceImageOption {
    width: 29%;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid gray;
    box-shadow: 1px 1px 5px gray;
}

.imageChoiceImageOption:hover {
    cursor: pointer;
}

.imageChoiceImageOption > img {
    height: 100%;
    width: 100%;;
}


.imageChoiceImageOptionFour {
    width: 29%;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid gray;
    box-shadow: 1px 1px 5px gray;
}

.imageChoiceImageOptionFour:hover {
    cursor: pointer;
}

.imageChoiceImageOptionFour > img {
    height: 100%;
    width: 100%;;
}


.verifyButtonCont {
    display: flex;
    justify-content: center;
}

.verifyButton {
    background-color: #007bff;
    height: 50px;
    margin: 20px;    
    padding: 0px 20px;
    display: flex;
    align-items: center;
    border-radius: 10px;
}

.verifyButton > p {
    color: white;
}

.verifyButton:hover {
    cursor: pointer;
}

.imageSelected {
    outline: 3px solid #006aff;
    opacity: .8;
    filter: brightness(50%);
    box-shadow: 1px 1px 5px white;
}

/* END IMAGE CHOICE STUFF */

/* LOADING SPINNER */

.lds-spinner {
    color: black;
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    opacity: 0;
  }
  .lds-spinner div {
    transform-origin: 22px 22px;
    animation: lds-spinner 1.2s linear infinite;
  }
  .lds-spinner div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3px;
    left: 20px;
    width: 4px;
    height: 12px;
    border-radius: 20%;
    background: black;
  }
  .lds-spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
  }
  .lds-spinner div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
  }
  .lds-spinner div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
  }
  .lds-spinner div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
  }
  .lds-spinner div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
  }
  .lds-spinner div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
  }
  .lds-spinner div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
  }
  .lds-spinner div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
  }
  .lds-spinner div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
  }
  .lds-spinner div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
  }
  .lds-spinner div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
  }
  .lds-spinner div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
  }
  @keyframes lds-spinner {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  

  .lds-spinner-2 {
    color: black;
    display: inline-block;
    position: relative;
    width: 88px;
    height: 88px;
    opacity: 0;
    left: 50%;
    margin: 25px 25px 25px -45px;
  }
  .lds-spinner-2 div {
    transform-origin: 44px 44px;
    animation: lds-spinner 1.2s linear infinite;
  }
  .lds-spinner-2 div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 6px;
    left: 40px;
    width: 6px;
    height: 24px;
    border-radius: 20%;
    background: black;
  }
  .lds-spinner-2 div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
  }
  .lds-spinner-2 div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
  }
  .lds-spinner-2 div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
  }
  .lds-spinner-2 div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
  }
  .lds-spinner-2 div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
  }
  .lds-spinner-2 div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
  }
  .lds-spinner-2 div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
  }
  .lds-spinner-2 div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
  }
  .lds-spinner-2 div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
  }
  .lds-spinner-2 div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
  }
  .lds-spinner-2 div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
  }
  .lds-spinner-2 div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
  }
  @keyframes lds-spinner-2 {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }


  .lds-spinner-3 {
    color: black;
    display: inline-block;
    position: relative;
    width: 88px;
    height: 88px;
    opacity: 1;
    left: 50%;
    margin: 25px 25px 25px -45px;
  }
  .lds-spinner-3 div {
    transform-origin: 44px 44px;
    animation: lds-spinner 1.2s linear infinite;
  }
  .lds-spinner-3 div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 6px;
    left: 40px;
    width: 6px;
    height: 24px;
    border-radius: 20%;
    background: black;
  }
  .lds-spinner-3 div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
  }
  .lds-spinner-3 div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
  }
  .lds-spinner-3 div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
  }
  .lds-spinner-3 div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
  }
  .lds-spinner-3 div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
  }
  .lds-spinner-3 div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
  }
  .lds-spinner-3 div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
  }
  .lds-spinner-3 div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
  }
  .lds-spinner-3 div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
  }
  .lds-spinner-3 div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
  }
  .lds-spinner-3 div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
  }
  .lds-spinner-3 div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
  }
  @keyframes lds-spinner-3 {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  .lds-spinner-4 {
    color: black;
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    opacity: 1;
    z-index: 2;
  }
  .lds-spinner-4 div {
    transform-origin: 22px 22px;
    animation: lds-spinner 1.2s linear infinite;
  }
  .lds-spinner-4 div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3px;
    left: 20px;
    width: 4px;
    height: 12px;
    border-radius: 20%;
    background: black;
  }
  .lds-spinner-4 div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
  }
  .lds-spinner-4 div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
  }
  .lds-spinner-4 div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
  }
  .lds-spinner-4 div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
  }
  .lds-spinner-4 div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
  }
  .lds-spinner-4 div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
  }
  .lds-spinner-4 div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
  }
  .lds-spinner-4 div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
  }
  .lds-spinner-4 div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
  }
  .lds-spinner-4 div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
  }
  .lds-spinner-4 div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
  }
  .lds-spinner-4 div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
  }
  @keyframes lds-spinner-4 {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }





/* END LOADING SPINNER */


/* ITEMS CHOICE STUFF */

.selectItemsCont {
    opacity: 0;
}

.itemsAreaCont {
    display: flex;
    justify-content: center;
}

.itemsArea {
    width: 90%;
    height: 400px;
    background-color: white;
    border-radius: 15px;
    border: 2px solid gray;
}

.individualItem {
    width: 75px;
    height: 75px;
    position: relative;
}

.individualItem1 {
    right: -5%;
    top: 20%;
}

.individualItem2 {
    left: 59%;
    top: -11%;
}

.individualItem3 {
    right: -75%;
    top: 13%;
}

.individualItem4 {
    right: -38%;
    top: -19%;
}

.individualItem5 {
    left: 18%;
    top: -1%;
}

.individualItem6 {
    left: 10%;
    top: -20%;
}

.individualItemImage {
    height: 100%;
    width: 100%;
}

.individualItemImageSelected {
    outline: 2px solid blue;
}

.individualItemLabel {
    font-family: 'Roboto', sans-serif;
    position: absolute;
    float: right;
    font-weight: bold;
}

/* END ITEMS CHOICE STUFF */

.nimbetIconImg {
    align-items: center;
    width: 100%;
    height: 100%;
}

/* TEXT INPUT STUFF */

.textInputCont {
    width: 100%;
}

.inputField {
    width: 90%;
    height: 50px;
    padding-left: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    margin-left: 15px;
    border-radius: 5px;
    background-color: #d9d9d9;
    border: 2px solid #a9a9a9;
}

/* END OF TEXT INPUT STUFF */

.levelThreeCont {
    opacity: 0;
}

.imageChoiceContLevelFour {
    opacity: 0;
}

/* LEVEL FIVE */

.fullImageCont {
    width: 80%;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid #a9a9a9;
    position: relative;
}

.fullImageImg {
    max-width: 100%;
}

.fingertipCont {
    width: 30px;
    height: 30px;
    position: absolute;
    border-radius: 5px;
    top: 60%;
    right: 45%;
}

.fingertipSelected {
    outline: 3px solid #006aff;
}

.levelFiveCont {
    opacity: 0;
}

/* END LEVEL FIVE */


/* LEVEL SIX */

.multiChoiceCont {
    width: 80%;
    margin: 0 auto 20px auto;
    display: flex;
    flex-direction: column;
    border: 2px solid #a9a9a9;
    border-radius: 5px;
    padding-bottom: 10px;
}

.multiChoiceQuestionCont {
    text-align: center;
    margin: 0 5px;
}

.multiChoiceAnswerCont {
    width: 90%;
    background-color: #d9d9d9;
    border-radius: 5px;
    margin: 5px auto;
    border: 2px solid #a9a9a9;
}

.multiChoiceAnswerCont:hover {
    cursor: pointer;
}

.multiChoiceAnswer {
    margin-left: 30px;
}

.questionSelected {
    background-color: #007bff;
}

.levelSixCont {
    opacity: 0;
}

.levelSixPointFiveCont {
    opacity: 0;
}

/* END LEVEL SIX */


/* LEVEL SEVEN */

.individualItemLevelSeven1 {
    right: -20%;
    top: 4%;
}

.individualItemLevelSeven2 {
    right: -23%;
    top: 40%;
}

.individualItemLevelSeven3 {
    right: -70%;
    top: 15%;
}

.individualItemLevelSeven4 {
    right: -65%;
    top: -40%;
}

.individualItemImageSeven {
    height: 100%;
    width: 100%;
}

.levelSevenCont {
    opacity: 0;
}

/* END OF LEVEL SEVEN */


/* LEVEL EIGHT */

.multiChoiceLevelEight {
    width: 90%;
    background-color: #d9d9d9;
    border-radius: 5px;
    margin: 5px auto;
    border: 2px solid #a9a9a9;
}

.multiChoiceLevelEight:hover {
    cursor: pointer;
}

.questionSelectedEight {
    background-color: #007bff;
}

.levelEightCont {
    opacity: 0;
}

/* END OF LEVEL EIGHT */

/* LEVEL NINE */

.mathsCont {
    width: 80%;
    margin: 0 auto 20px auto;
    display: flex;
    flex-direction: column;
    border: 2px solid #a9a9a9;
    border-radius: 5px;
    padding-bottom: 10px;
}

.mathsQuestionCont {
    text-align: center;
}

.levelNineCont {
    opacity: 0;
}

/* END OF LEVEL NINE */


/* LEVEL TEN */

#cakeImg {
    width: 100%;
    height: 100%;
    position: absolute;
}

.itemsArea {
    overflow: hidden;
    position: relative;
}

.timerCont {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: red;
}

#timerTen {
    width: 100%;
    height: 50%;
}


.progress-bar {
    width: 100%;
    background-color: #e0e0e0;
    padding: 0px;
    border-radius: 0px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}

.progress-bar-fill {
    display: block;
    height: 22px;
    background-color: #659cef;
    border-radius: 0px;
    width: 100%;
    
    transition: width 50ms ease-in-out;
}

.candleCont {
    width: 30px;
    position: absolute;
}

#candle1 {
    left: 22%;
    top: 2%;    
}

#candle2 {
    left: 32%;
    top: 11%;
}

#candle3 {
    left: 45%;
    top: 16%;
}

#candle4 {
    left: 58%;
    top: 11%;
}

#candle5 {
    left: 68%;
    top: 2%;
}

.candleImage {
    width: 100%;
    position: absolute;
}

.candleUpper {
    z-index: 2;
}

.candleUpper:hover {
    cursor: pointer;
}

.levelTenCont {
    opacity: 0;
}

/* END OF LEVEL TEN */

/* LEVEL ELEVEN BAD */

.imageChoiceImageOptionElevenBad {
    width: 29%;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid gray;
    box-shadow: 1px 1px 5px gray;
}

.imageChoiceImageOptionElevenBad:hover {
    cursor: pointer;
}

.imageChoiceImageOptionElevenBad > img {
    height: 100%;
    width: 100%;;
}

.levelElevenBadCont {
    opacity: 0;
}

/* END OF LEVEL ELEVEN BAD */

/* LEVEL ELEVEN GOOD */

.imageChoiceImageOptionGoodOne {
    width: 29%;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid gray;
    box-shadow: 1px 1px 5px gray;
}

.imageChoiceImageOptionGoodOne:hover {
    cursor: pointer;
}

.imageChoiceImageOptionGoodOne > img {
    height: 100%;
    width: 100%;;
}

.levelElevenGoodOneCont {
    opacity: 0;
}

/* END OF LEVEL ELEVEN GOOD */

/* LEVEL ELEVEN GOOD TWO */

.multiChoiceLevelElevenGoodTwo {
    width: 90%;
    background-color: #d9d9d9;
    border-radius: 5px;
    margin: 5px auto;
    border: 2px solid #a9a9a9;
}

.multiChoiceLevelElevenGoodTwo:hover {
    cursor: pointer;
}

.questionSelectedElevenGoodTwo {
    background-color: #007bff;
}

.levelElevenGoodTwoCont {
    opacity: 0;
}

/* END OF LEVEL ELEVEN GOOD TWO */


/* LEVEL TWELVE */

.imageChoiceTopTextTwelve {
    width: 80%;
    margin: 15px auto 0 auto;
}

.levelTwelveCont {
    opacity: 0;
}

/* END OF LEVEL TWELVE */

/* LEVEL THIRTEEN */

.levelThirteenWord {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}

.levelThirteenWord:hover {
    cursor: pointer;
}

.levelThirteenCont {
    opacity: 0;
}

.individualItemThirteen {
    width: 100px;
    height: 50px;
    position: relative;
}

/* END OF LEVEL THIRTEEN */

/* LEVEL FOURTEEN */

.multiChoiceLevelFourteen {
    width: 90%;
    background-color: #d9d9d9;
    border-radius: 5px;
    margin: 5px auto;
    border: 2px solid #a9a9a9;
}

.multiChoiceLevelFourteen:hover {
    cursor: pointer;
}

.questionSelectedFourteen {
    background-color: #007bff;
}

.levelFourteenCont {
    opacity: 0;
}

/* END OF LEVEL FOURTEEN */


/* LEVEL FIFTEEN */

.fullImageBackgroundImg {
    
    max-width: 100%;
    
}

.emojiCursorKnife{
    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🔪</text></svg>") 16 0,auto;
}


.fullImageKnot {
    max-width: 100%;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
}

.emojiKnifePickup {
    position: absolute;
    bottom: -10px;
    left: 20px;
    z-index: 50;
    font-size: 25px;
    cursor: pointer;
}

.levelFifteenCont {
    opacity: 0;}

/* END OF LEVEL FIFTEEN */


/* LEVEL SIXTEEN */

.individualItemImageSixteen {
    width: 60px;
    height: 60px;
    position: absolute;
    left: 0;
}

#lvlSixteenImage1 {
    top: 42%;
    left: 18%;
}

#lvlSixteenImage2 {
    top: 72%;
    left: 52%;
    width: 75px;
    height: 75px;
}

#lvlSixteenImage3 {
    top: 24%;
    left: 38%;
}

#lvlSixteenImage4{
    top: 50%;
    left: 45%;
}

#lvlSixteenImage5 {
    top: 35%;
    left: 65%;
}

.levelSixteenCont {
    opacity: 0;
}

/* END OF LEVEL SIXTEEN */

/* LEVEL SEVENTEEN */

.multiChoiceAnswerContSeventeen {
    width: 90%;
    background-color: #d9d9d9;
    border-radius: 5px;
    margin: 5px auto;
    border: 2px solid #a9a9a9;
}

.multiChoiceAnswerContSeventeen:hover {
    cursor: pointer;
}

.questionSelectedSeventeen {
    background-color: #007bff;
}

.levelSevenTeenCont {
    opacity: 0;
}


/* END OF LEVEL SEVENTEEN */

/* LEVEL EIGHTEEN */

.levelEighteenBookshelfCont {
    width: 100%;
    height: 400px;
    position: relative;
}

.levelEighteenBookshelf {
    width: 100%;
    border: 2px solid black;
    height: 100px;
    position: absolute;
    bottom: 0;

    border-bottom: 70px solid #555;
	border-left: 45px solid transparent;
	border-right: 45px solid transparent;
	height: 0;
	width: 80%;

    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.book {
    transform: rotate(270deg);
    position: absolute;
    background: #aaa;
    text-align: center;
    width: 200px;
    height: 66px;
    line-height: 66px;
    margin-bottom: 5px;
    bottom: 35%;
    margin-left: 50px;
    border-radius: 20px 0 0 20px;
  }
  .book:after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 92%;
    display: block;
    
    width: 30%;
    height: 100%;
    border-top: 5px solid #aaa;
    border-bottom: 5px solid #aaa;
    border-radius: 10px 2px 2px 10px / 20px 2px 2px 20px;
    
    background: linear-gradient(transparent 45%, #666 55%, transparent),#333;
    background-size: 95% 4px;
    background-repeat: repeat-y;
    background-position: center left;
  }

  .book:hover {
    cursor: pointer;
  }

  #book1 {
    margin-left: -3px;
    width: 205px;
    height: 60px;
    line-height: 50px;
    background: #96783c;
    font-family: 'Ysabeau SC', sans-serif;
    font-size: 14px;
  }

  #book2 {
    margin-left: 63px;
    margin-top: 100px;
    width: 165px;
    height: 30px;
    line-height: 30px;
    background: #4861b3;
    font-family: 'Caveat', cursive;
  }

  #book3 {
    margin-left: 94px;
    margin-top: 200px;
    width: 185px;
    height: 50px;
    line-height: 50px;
    background: #7cb348;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 14px;
  }

  #book4 {
    margin-left: 135px;
    margin-top: 300px;
    width: 185px;
    height: 30px;
    line-height: 29px;
    background: #b38f48;
    font-family: 'Megrim', cursive;
  }
  #book5 {
    margin-left: 171px;
    margin-top: 300px;
    width: 205px;
    height: 60px;
    line-height: 59px;
    background: #a748b3;
    font-family: 'Noto Serif Hebrew', serif;
  }
  #book6 {
    margin-left: 227px;
    margin-top: 300px;
    width: 195px;
    height: 40px;
    line-height: 39px;
    background: #48b3a1;
    font-family: 'Merriweather', serif;
  }
  #book7 {
    margin-left: 258px;
    margin-top: 300px;
    width: 205px;
    height: 30px;
    line-height: 29px;
    background: #b34848;
    bottom: 38%;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 15px;
  }


  .selectionArrow {
    font-size: 30px;
    position: absolute;
    top: 0%;
    left: 130%;
    transform: translate(-50%, -50%);
    transform: rotate(90deg);
  }

  .levelEighteenCont {
    opacity: 0;
  }

/* END OF LEVEL EIGHTEEN */

/* LEVEL NINETEEN */

.nineteenWritingCont {
    width: 120%;
    height: 120%;
    margin-top: -35px;
    position: absolute;
    top: 0px;
    flex-shrink: 0;
}

.diaryWriting {
    position: absolute;
    top: 0;
    height: 100%;
    line-height: 28px;
    font-family: 'Satisfy', cursive;
    font-size: 22px;
}

.nineteenCont {
    display: flex;
    justify-content: center;
}

.spcialWord {
    font-family: 'Caveat', cursive;
    font-size: 22px;
    cursor: pointer;
}

.levelNineteenCont {
    opacity: 0;
}

/* END OF LEVEL NINETEEN */

/* LEVEL TWENTY */

.nineteenCont {
    position: relative;
}

.planeTicketBuyCont {
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: column;
}

.planeTicketSiteHeader {
    height: 70px;
    background-color: #005fc5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.planeEmoji {
    font-size: 30px;
}

.planeLogoTitle {
    color: white;
    font-weight: 600;
    font-size: 30px;
    text-decoration: underline;
    margin-left: 10px;
}

.ticketPurchaseRow {
    height: 50px;
    border: 1px dotted red;
    display: flex;
}

.ticketPurchaseRowTitle {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 12px;
    flex-grow: 1;
}

.ticketPurchaseRowTitle > p {
    font-size: 16px;
}

.ticketPurchaseRowInputCont {
    flex-grow: 2;
    width: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ticketPurchaseRowInput {
    width: 70%;
    height: 25px;
    padding-left: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    margin-left: 15px;
    margin-right: 15px;
    border-radius: 5px;
    background-color: #d9d9d9;
    border: 2px solid #a9a9a9;
}

#ticketPurchaseRowInputDate {
    margin-left: -5px;
    padding-left: 5px;
}

.creditCardsCont {
    width: 100%;
    height: 150px;
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.creditCard {
    aspect-ratio: 1.6/1;
    border-radius: 5px;
    width: 160px;
    margin: 10px;
    transition: transform .5s ease;
    transition: margin .5s ease;
    overflow: hidden;
    outline: 1px solid black;
}

.creditCard:hover {
    position: absolute;
    margin: -100px 0 0 0;
    transform: scale(2.3);
    z-index: 2;
}

.playerCreditCard {
    background-color: #385168;
}

.nimbetCreditCard {
    background-color: #f08c1e;
}

.creditCardContentCont {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.creditCardContentRow {
    width: 100%;
    flex-grow: 1;
    display: flex;
}

.spacerRow {
    flex-grow: 0.5
}

.ccNumberRow {
    flex-grow: .75;
}

.creditCardLogos {
    flex-grow: 1;
}

.ccBottomDetailsRow {
    flex-direction: row;
}

.ccBottomDetailsRowLeft {
    flex-grow: 2;
    display: flex;
    flex-direction: column;
}

.ccBottomDetailsRowRight {
    flex-grow: 0;
    display: flex;
    justify-content: bottom;
    flex-direction: column;
}

.ccBottomDetailsLeftRow1 {
    flex-grow: .5;
    display: flex;
}

.ccBottomDetailsLeftRow2 {
    flex-grow: 1;
}

.creditCardTypeText {
    font-size: 6px;
    font-weight: 600;
    color: #fff;
    margin-left: 5px;
    height: 5px;
}

.ccBank {
    font-size: 6px;
    font-weight: 600;
    color: #fff;
    margin-left: 5px;
    height: 5px;
    float: right;
    margin-right: 5px;
    opacity: .75;
}

.ccBankLogo {
    font-size: 12px;
    color: #FFF;
    margin-right: 8px;
    position: absolute;
    right: 3px;
    z-index: -1;
    opacity: .25;
    top: -8px
}

.ccChip {
    height: 15px;
    margin: 0 0 0 15px
}

.ccChipRow {
    flex-grow: 0;
}

.ccNumber {
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    height: 100%;
    font-family: 'Share Tech Mono', monospace;
    margin: 0;
}

.ccNumberCont {
    height: 15px;
    margin: 0 0 0 15px;
}

.visa {
    color: #fff;
    margin: 0 10px 0 0;
}

.visaName {
    font-size: 12px;
    display: block;
    right: 0;
    height: 14px;
    width: 90%;
    text-align: right;
    opacity: .75;
}

.visaType {
    font-size: 4px;
    width: 90%;
    text-align: right;
    position: relative;
    height: 4px;
    opacity: .75;
}

.ccDetailsExpires {
    font-size: 7px;
    color: #fff;
    margin-left: 5px;
    height: 5px;
    font-family: 'Share Tech Mono', monospace;
    margin-left: 25px;
}

.ccDetailsSecCode {
    font-size: 7px;
    color: #fff;
    margin-left: 5px;
    height: 5px;
    font-family: 'Share Tech Mono', monospace;
    margin-left: 15px;
}

.ccDetailsName {
    font-size: 8px;
    color: #fff;
    margin-left: 5px;
    height: 5px;
    font-family: 'Share Tech Mono', monospace;
    margin-left: 15px;
}

.levelTwentyCont {
    opacity: 0;
}

/* END OF LEVEL TWENTY */

/* LEVEL TWENTY ONE */


.multiChoiceLevelTwentyOne {
    width: 90%;
    background-color: #d9d9d9;
    border-radius: 5px;
    margin: 5px auto;
    border: 2px solid #a9a9a9;
}

.multiChoiceLevelTwentyOne:hover {
    cursor: pointer;
}

.questionSelectedTwentyOne {
    background-color: #007bff;
}

.levelTwentyOneCont {
    opacity: 0;
}

/* END OF LEVEL TWENTY ONE */


/* LEVEL TWENTY TWO */

.imageChoiceImageOptionTwentyTwo {
    width: 29%;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid gray;
    box-shadow: 1px 1px 5px gray;
}

.imageChoiceImageOptionTwentyTwo:hover {
    cursor: pointer;
}

.imageChoiceImageOptionTwentyTwo > img {
    height: 100%;
    width: 100%;;
}

.levelTwentyTwoCont {
    opacity: 0;
}

/* END OF LEVEL TWENTY TWO */

/* LEVEL TWENTY THREE */

.runningNimbetCont {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 160px;
    left: 120px;
    z-index: 3;
}

#runningNimbet {
    width: 100%;
    height: 100%;
    position: absolute;
}

.twentyThreeCont {
    position: relative;
}

.wall {
    width: 20px;
    height: 50px;
    background-color: darkred;
    position: absolute;
    top: 0;

    background-image: repeating-linear-gradient(223deg, rgba(255,255,255, 0.25), rgba(255,255,255, 0.25) 1px, transparent 0px, transparent 2px);
    background-size: 15px;

    opacity: 0;
    z-index: 1;
}

.wall:hover {
    cursor: pointer;
}

#wall1 {
    top: 130px;
    width: 50px;
    height: 180px;
}

#wall2 {
    top: 0px;
    left: 240px;
    width: 70px;
    height: 100px;
}

#wall3 {
    top: 140px;
    left: 385px;
    width: 50px;
    height: 190px;
}

#wall4 {
    top: 340px;
    left: 55px;
    width: 95px;
    height: 100px;
}

#wall5 {
    top: 350px;
    left: 255px;
    width: 105px;
    height: 90px;
}

.desertTop {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    left: 0;
}

.levelTwentyThreeCont {
    opacity: 0;
}

/* END OF LEVEL TWENTY THREE */


/* LEVEL TWENTY FOUR */

.twentyFourCont {
    height: 400px;
}

.draggingNimbetCont {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 3;
}

.houseCont {
    width: 200px;
    height: 200px;
    position: absolute;
    bottom: 20px;
    right: 20px;    
}

.houseImg {
    width: 100%;
    height: 100%;
}

.levelTwentyFourCont {
    opacity: 0;
}

/* END OF LEVEL TWENTY FOUR */

/* LEVEL TWENTY FIVE */

.levelTwentyFiveCont {
    opacity: 0;
}

/* END OF LEVEL TWENTY FIVE */

/* LEVEL TWENTY SIX */

.imageChoiceImageOptionTwentySix {
    width: 29%;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid gray;
    box-shadow: 1px 1px 5px gray;
}

.imageChoiceImageOptionTwentySix:hover {
    cursor: pointer;
}

.imageChoiceImageOptionTwentySix > img {
    height: 100%;
    width: 100%;;
}

.imageChoiceContLevelTwentySix {
    opacity: 0;
}

/* END OF LEVEL TWENTY SIX */

/* LEVEL TWENTY SEVEN */

.individualItemLevelTwentySeven1 {
    right: -10%;
    top: 80%;
}

.individualItemLevelTwentySeven2 {
    right: -33%;
    top: 60%;
}

.individualItemLevelTwentySeven3 {
    right: -55%;
    top: 42%;
}

.individualItemLevelTwentySeven4 {
    right: -75%;
    top: 22%;
}

.individualItemImageTwentySeven {
    height: 100%;
    width: 100%;
}

.levelTwentySevenCont {
    opacity: 0;
}

.levelTwentySevenCont {
    opacity: 0;
}

/* END OF LEVEL TWENTY SEVEN */

/* LEVEL TWENTY EIGHT */

.multiChoiceLevelTwentyEight {
    width: 90%;
    background-color: #d9d9d9;
    border-radius: 5px;
    margin: 5px auto;
    border: 2px solid #a9a9a9;
}

.multiChoiceLevelTwentyEight:hover {
    cursor: pointer;
}

.questionSelectedTwentyEight {
    background-color: #007bff;
}

.levelTwentyEightCont {
    opacity: 0;
}

/* END OF LEVEL TWENTY EIGHT */

/* LEVEL TWENTY NINE */

.imageChoiceImageOptionTwentyNine {
    width: 29%;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid gray;
    box-shadow: 1px 1px 5px gray;
}

.imageChoiceImageOptionTwentyNine:hover {
    cursor: pointer;
}

.imageChoiceImageOptionTwentyNine > img {
    height: 100%;
    width: 100%;;
}

.levelTwentyNineCont {
    opacity: 0;
}


/* END OF LEVEL TWENTY NINE */

/* LEVEL THIRTY */

.multiChoiceLevelThirty {
    width: 90%;
    background-color: #d9d9d9;
    border-radius: 5px;
    margin: 5px auto;
    border: 2px solid #a9a9a9;
}

.multiChoiceLevelThirty:hover {
    cursor: pointer;
}

.questionSelectedThirty {
    background-color: #007bff;
}

.levelThirtyCont {
    opacity: 0;
}


/* END OF LEVEL THIRTY */

/* LEVEL THIRTY ONE */

.multiChoiceLevelThirtyOne {
    width: 20%;
    background-color: #d9d9d9;
    border-radius: 5px;
    margin: 5px auto;
    border: 2px solid #a9a9a9;
    display: flex;
    
}

.thirtyOneAnswer {
    display: flex;
    align-items: center;
    margin: 20px auto;
}

#thirtyOneAnswersCont {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.multiChoiceLevelThirtyOne:hover {
    cursor: pointer;
}

.thirtyOneQuestion {
    font-size: 16px;
}

.questionSelectedThirtyOne {
    background-color: #007bff;
}

.levelThirtyOneCont {
    opacity: 0;
}

/* END OF LEVEL THIRTY ONE */

/* LEVEL THIRTY TWO */

.imageChoiceImageOptionThirtyTwo {
    width: 29%;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid gray;
    box-shadow: 1px 1px 5px gray;
}

.imageChoiceImageOptionThirtyTwo:hover {
    cursor: pointer;
}

.imageChoiceImageOptionThirtyTwo > img {
    height: 100%;
    width: 100%;;
}

.levelThirtyTwoCont {
    opacity: 0;
}

.levelThirtyThreeCont {
    opacity: 0;
}

/* END OF LEVEL THIRTY TWO */

/* LEVEL THIRTY FOUR */


.candleContThirtyFour {
    width: 23px;
    position: absolute;
}

#candleThirtyFour1 {
    left: 139px;
    top: 15px;    
}

#candleThirtyFour2 {
    left: 79px;
    top: 169px;
}

#candleThirtyFour3 {
    left: 238px;
    top: 261px;
}

#candleThirtyFour4 {
    left: 395px;
    top: 170px;
}

#candleThirtyFour5 {
    left: 333px;
    top: 15px;
}

.candleImageThirtyFour {
    width: 100%;
    position: absolute;
}

.candleUpperThirtyFour {
    z-index: 2;
}

.candleImageThirtyFour:hover {
    cursor: pointer;
}

.individualItemLabelThirtyFour {
    font-family: 'Roboto', sans-serif;
    color: white;
    position: absolute;
    float: right;
    font-weight: bold;
    right: 20px;
}

.instructionsCont {
    margin: 0 auto;
    width: 80%;
    text-align: center;
}

.levelThirtyFourCont {
    opacity: 0;
}

/* END OF LEVEL THIRTY FOUR */

/* LEVEL THIRTY FIVE */

.fullImageImg35 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.fingertipCont35 {
    width: 50px;
    height: 70px;
    position: absolute;
    border-radius: 5px;
    top: 20%;
    right: 36%;
    z-index: 5;
}

.fullImageCont35:hover {
    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🔪</text></svg>") 16 0,auto;
}



.levelThirtyFiveCont {
    opacity: 0;
}
/* END OF LEVEL THIRTY FIVE */

/* LEVEL THIRTY SIX */

.wordleCont {
    width: 100%;
    
    position: relative;
    margin: 0 auto;
}

#game-board {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  
  .letter-box {
    border: 2px solid gray;
    border-radius: 3px;
    margin: 2px;
    font-size: 2.5rem;
    font-weight: 700;
    height: 3rem;
    width: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
  }
  
  .filled-box {
    border: 2px solid black;
  }
  
  .letter-row {
    display: flex;
  }

  #keyboard-cont {
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  #keyboard-cont div {
    display: flex;
  }
  
  .second-row {
    margin: 0.5rem 0;
  }
  
  .keyboard-button {
    font-size: 1rem;
    font-weight: 700;
    padding: 0.5rem;
    margin: 0 2px;
    cursor: pointer;
    text-transform: uppercase;
  }
  
  .levelThirtySixCont {
    opacity: 0;
  }
/* END OF LEVEL THIRTY SIX */

/* LEVEL THIRTY SEVEN */

.passwordGameCont {
    width: 80%;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid #a9a9a9;
    position: relative;
    height: 400px;
    display: flex;
    flex-direction: column;

    webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.passwordGame {
    width: 100%;
    flex-grow: 1;
}

.lettersZone {
    flex-grow: 4;
    position: relative;
}

.resultsZone {
    height: 25px;
    border-top: 2px solid #a9a9a9;
    display: flex;
    flex-direction: column;
}

.resultsZoneTitle {
    width: 100%;
    text-align: center;
}

.resultsZoneTitle > p {
    font-size: 16px;
    margin-top: 10px;
}

.passwordGameLetter {
    width: 20px;
    font-size: 22px;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;

    position: absolute;
}

.passwordGameLetter:hover {
    cursor: pointer;
}

.resultsZoneLetters {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.resultsZoneCharacter {
    width: 28px;
    height: 28px;
    font-size: 22px;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    margin: 0 5px;
    border-bottom: 2px solid black;
}

.levelThirtySevenCont {
    opacity: 0;
}

/* END OF LEVEL THIRTY SEVEN */

/* LEVEL THIRTY EIGHT */



.multiChoiceAnswerCont38 {
    width: 90%;
    background-color: #d9d9d9;
    border-radius: 5px;
    margin: 5px auto;
    border: 2px solid #a9a9a9;
}

.multiChoiceAnswerCont38:hover {
    cursor: pointer;
}

.questionSelected38 {
    background-color: #007bff;
}

.levelThirtyEightCont {
    opacity: 0;
}

/* END OF LEVEL THIRTY EIGHT */

/* LEVEL THIRTY NINE */

#levelThirtyNineVerifyButton {
    background-color: gray;
}

.battleCont {
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
    border: 2px solid #a9a9a9;
    position: relative;
    height: 400px;
    display: flex;
    flex-direction: column;

    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.battleArenaCont {
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
}

.battleArenaRow {
    flex-grow: 1;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;

}

.battleArenaCell {
    height: 100%;
    min-height: 100%;
    
    display: flex;
    position: relative;
}

#playerRow {
    margin-bottom: 15px;
    flex-grow: 1.5;
}




.fighterInfoCont {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    flex-direction: column;
}

#fighterInfoContPlayer {
    margin-top:10px;
}

#fighterInfoContNimbet {
    margin-right: 20px;
}

.fighterInfo {    
    margin: 0 auto;
}

.fighterInfo > p {
    margin: 0;
    font-family: 'VT323', monospace;
    font-size: 28px;
}

.fighterLevel {
    margin-top: -10px;
    margin-bottom: -10px;
}

.smallLevel {
    font-size: 20px;
    font-weight: bold;
}

.battleSprite {
    flex-grow: 1;
    overflow: hidden;
}


.fighterInfoCont {
    opacity: 0;
}

.battleSpriteImgCont {
    min-height: 100%;
    width: 100%;
    display: block;
    position: relative;
    display: flex;
    justify-content: center;
}

.battleSpriteImg {
    height: 100%;
    top: 0;
    position: absolute;
    margin: 0 auto;
}

#nimbetFree {
    opacity: 0;
}

.HealthContNimbet {
    border-bottom: 5px solid black;
    border-left: 5px solid black;
    border-radius: 5px;
}

.fighterHealthBar {
    display: flex;
    flex-direction: row;
    width: 80%;
    margin-right: 5px;
    
}

.figherHealthBarHP {
    font-family: 'VT323', monospace;
    font-size: 16px;
    font-weight: bold;
    margin: 5px;
    letter-spacing: 1.5px;
}

.HealthContPlayer {
    border-bottom: 5px solid black;
    border-right: 5px solid black;
    border-radius: 5px;
}

.figherHealthBarActualBar {
    display: flex;
    justify-content: center;
    align-items: center;
}

.progress-bar39 {
    width: 130px;
    height: 4px;
    overflow: hidden;
    border-radius: 10px;
    background-color: #e0e0e0;
    padding: 0px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
    border: 2px solid black;
}

.progress-bar-fill39 {
    display: block;
    height: 12px;
    background-color: green;
    border-radius: 0px;
    width: 100%;
    
    transition: width 500ms ease-in-out;
}


.battleActionsCont {
    width: 96%;
    height: 120px;
    display: flex;
    border: 8px double black;
}

.battleTextBox {
    width: 60%;
}

.battleActionButtonsCont {
    width: 39%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.battleText {
    margin: 10px;
}

.battleActionButton {
    border: 2px solid black;
    margin: 5px;
    width: 90%;
    text-align: center;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.battleActionButton:hover {
    cursor: pointer;
}

.buttonActiveClass:active {
    background-color: #d9d9d9;
    z-index: 1;
}

.battleActionButton > p {
    margin: 0;
    font-family: 'VT323', monospace;
    font-size: 26px;
}

.darkenedImage {
        filter: brightness(0.2);
}

#battleArenaCell2 {
    left: -372px;
}

#battleArenaCell3 {
    left: 372px;
}

.battleActionButtonsCont {
    opacity: 1;
}

#battleActionButton3 {
    position: absolute;
    width: 145px;
    background-color: #f0f0f0;
    height: 105px;
}

#battleActionButton3:active {
    background-color: #d9d9d9;
    z-index: 1;
}

.levelThirtyNineCont {
    opacity: 0;
}

/* END OF LEVEL THIRTY NINE */

/* LEVEL FORTY */

.multiChoiceAnswerCont40 {
    width: 90%;
    background-color: #d9d9d9;
    border-radius: 5px;
    margin: 5px auto;
    border: 2px solid #a9a9a9;
}

.multiChoiceAnswerCont40:hover {
    cursor: pointer;
}

.questionSelected40 {
    background-color: #007bff;
}

.levelFortyCont {
    opacity: 0;
}


/* END OF LEVEL FORTY */


/* LEVEL FORTY ONE */


    .timeCrankGameCont {
    width: 80%;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid #a9a9a9;
    position: relative;
    height: 400px;
    display: flex;
    flex-direction: column;

    webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.crankCont {
    width: 100%;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.crankDateInnerCont>p {
    font-size: 30px;
}

.crankActualCont {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.levelFortyOneCont {
    opacity: 0;
}

/* END OF LEVEL FORTY ONE */

/* LEVEL FORTY TWO */

.phoneGameCont {
    width: 80%;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid #a9a9a9;
    position: relative;
    height: 400px;
    display: flex;
    flex-direction: column;

    webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.fullImagePhone {
    max-width: 100%;
}

#ringingPhone {
    position: absolute;
    top: 0;
    left: 0;
}

#ringingPhone:hover {
    cursor: pointer;
}

#phoneAnswered {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.phoneLine {
    position: absolute;
    z-index: 2;
    left: 130px;
    top: 30px;
}

#phoneLine2 {
    top: 70px;
}

#phoneLine3 {
    top: 110px;
}

.levelFortyTwoCont {
    opacity: 0;
}

/* END OF LEVEL FORTY TWO */

/* LEVEL FORTY THREE */


.multiChoiceAnswerCont43 {
    width: 90%;
    background-color: #d9d9d9;
    border-radius: 5px;
    margin: 5px auto;
    border: 2px solid #a9a9a9;
}

.multiChoiceAnswerCont43:hover {
    cursor: pointer;
}

.questionSelected43 {
    background-color: #007bff;
}

.levelFortyThreeCont {
    opacity: 0;
}

/* END OF LEVEL FORTY THREE */

/* LEVEL FORTY FOUR */

.multiChoiceAnswerCont44 {
    width: 90%;
    background-color: #d9d9d9;
    border-radius: 5px;
    margin: 5px auto;
    border: 2px solid #a9a9a9;
}

.multiChoiceAnswerCont44:hover {
    cursor: pointer;
}

.questionSelected44 {
    background-color: #007bff;
}

.multiChoiceQuestionContEnd {
    text-align: center;
    margin: 0 5px;
}

.multiChoiceQuestionContEnd>p {
    font-size: 16px;
}

.levelFortyFourCont {
    opacity: 0;
}

/* END OF LEVEL FORTY FOUR */

.multiChoiceAnswerCont442 {
    width: 90%;
    background-color: #d9d9d9;
    border-radius: 5px;
    margin: 5px auto;
    border: 2px solid #a9a9a9;
}

.multiChoiceAnswerCont442:hover {
    cursor: pointer;
}

.questionSelected442 {
    background-color: #007bff;
}

#pawCont {
    display: inline-block;
    height: 50px;
    width: 40px;
    position: relative;
}

#paw {
    height: 50px;
    position: absolute;
    margin-top: 15px;
    margin-left: -10px;
    transform: rotate(-10deg);
}

.levelFortyFourTwoCont {
    opacity: 0;
}

/* END OF LEVEL FORTY FOUR */

/* LEVEL FORTY FIVE */

.progress-bar45 {
    width: 100%;
    background-color: #e0e0e0;
    padding: 0px;
    border-radius: 0px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}

.progress-bar-fill45 {
    display: block;
    height: 22px;
    background-color: #659cef;
    border-radius: 0px;
    width: 100%;
    
    transition: width 500ms ease-in-out;
}

#sunsetImg {
    width: 110%;
    left: -5%;
    height: 105%;
    position: absolute;
}

.levelFortyFiveCont {
    opacity: 0;
}

/* END OF LEVEL FORTY FIVE */

/* LEVEL FORTY SIX */

#robotTxtCont46 {
    width: 300px;
    align-items: center;
}

.areYouHumanLine {
    position: relative;
    display: flex;
    margin: 20px auto;
    background-color: re;
    height: 50px;
    width: 100%;
    justify-content: space-around;
    align-items: center;
}

#endingLine1Cont {
    opacity: 0;
}

#endingLine2Cont {
    opacity: 0;
}

#endingLine3Cont {
    opacity: 0;
}

#endingLine4Cont {
    opacity: 0;
}

#endingLine5Cont {
    opacity: 0;
}

#endingLine6Cont {
    opacity: 0;
}

#levelFortySixVerifyButton {
    background-color: green;
}

#levelFortySixCont {
    opacity: 0;
}

/* END OF LEVEL FORTY SIX */