@font-face {
     font-family: 'PlayMeGames';
     src: url('https://static1.squarespace.com/static/6524bf2d6a2e9f59b608a588/t/6524f9a8d1f73947c980c561/1696922024089/PlayMeGamesReguler.eot');
     src: url('https://static1.squarespace.com/static/6524bf2d6a2e9f59b608a588/t/6524f9a8d1f73947c980c561/1696922024089/PlayMeGamesReguler.eot?#iefix') format('embedded-opentype'), url('https://static1.squarespace.com/static/6524bf2d6a2e9f59b608a588/t/6524f9a88b741f4da253fb4e/1696922024097/PlayMeGamesReguler.woff2') format('woff2'), url('https://static1.squarespace.com/static/6524bf2d6a2e9f59b608a588/t/6524f9a8fcf91656a786ae4c/1696922024096/PlayMeGamesReguler.woff') format('woff'), url('https://static1.squarespace.com/static/6524bf2d6a2e9f59b608a588/t/6524f9a8dda32d278d2854fc/1696922024100/PlayMeGamesReguler.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
 }

 .canvas-container {
     max-width: 1536px;
     margin: 0 auto;
     height: 100vh;
     font-family: 'PlayMeGames';
     zoom: 0.8;
 }

 .canvas-container img {
     max-width: 100%;
 }

 .screen {
     max-width: 1920px;
     margin: 0 auto;
     position: relative;
 }

 .screen-1-bg {
     width: 100%;
     height: 100%;
 }

 .start-button {
     position: absolute;
     background: url('https://images.squarespace-cdn.com/content/6524bf2d6a2e9f59b608a588/9fb84a93-d650-413c-b8a2-1d0415100626/Screen01-Button-Unclicked.png?content-type=image%2Fpng');
     width: 510px;
     height: 160px;
     display: block;
     top: 190px;
     right: 70px;
     cursor: pointer;
     outline: none !important;
     border: 0px;
 }

 .start-button.active-button,
 .start-button:hover {
     background: url('https://images.squarespace-cdn.com/content/6524bf2d6a2e9f59b608a588/503284c7-d25b-48e0-a3dd-5e0c0029635f/Screen01-Button-Clicked.png?content-type=image%2Fpng');
     outline: none !important;
     border: 0px;
 }

 .start-button:focus {
     outline: none !important;
     border: 0px;
 }

 div#composition {
     position: absolute;
     left: 167px;
     top: auto;
     display: flex;
     flex-wrap: wrap;
     text-align: center;
     align-items: center;
     justify-content: center;
     bottom: 80px;
     width: 436px;
     height: 250px;
 }

 div#userInputBox {
     position: absolute;
     right: 168px;
     display: flex;
     flex-wrap: wrap;
     text-align: center;
     align-items: center;
     justify-content: center;
     bottom: 80px;
     width: 436px;
     height: 250px;
 }

 .carbon {
     background: url('https://images.squarespace-cdn.com/content/6524bf2d6a2e9f59b608a588/0c3720ae-b00d-4f7b-be26-17826988d9bc/Screen02-Carbon.png?content-type=image%2Fpng') center center;
     width: 90px;
     height: 70px;
     text-align: center;
     touch-action: none;
     user-select: none;
     background-size: 70px;
     background-repeat: no-repeat;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0px;
 }

 .oxygen {
     background: url('https://images.squarespace-cdn.com/content/6524bf2d6a2e9f59b608a588/89c63123-8516-40d7-b593-0c9b053bd3b7/Screen02-Oxygen.png?content-type=image%2Fpng') center center;
     width: 90px;
     height: 70px;
     text-align: center;
     touch-action: none;
     user-select: none;
     background-size: 70px;
     background-repeat: no-repeat;
     margin: 0px;
 }

 #userInputBox div:not(.ui-draggable-dragging):nth-child(1 of .carbon) {
     position: absolute;
     left: 50% !important;
     top: 50% !important;
     translate: -50% -50%;
     z-index: 5;
 }

 #userInputBox div:not(.ui-draggable-dragging):nth-child(2 of .carbon) {
     position: absolute;
     left: 50% !important;
     top: 50% !important;
     translate: 50% -50%;
 }

 #userInputBox div:not(.ui-draggable-dragging):nth-child(3 of .carbon) {
     position: absolute;
     left: 50% !important;
     top: 50% !important;
     translate: -150% -50%;
 }

 #userInputBox div:not(.ui-draggable-dragging):nth-child(1 of .oxygen) {
     position: absolute;
     translate: 50px 37px;
     top: auto !important;
     left: auto !important;
 }

 #userInputBox div:not(.ui-draggable-dragging):nth-child(2 of .oxygen) {
     position: absolute;
     translate: -50px 37px;
     top: auto !important;
     left: auto !important;
 }

 #userInputBox div:not(.ui-draggable-dragging):nth-child(3 of .oxygen) {
     position: absolute;
     translate: -50px -37px;
     top: auto !important;
     left: auto !important;
 }

 #userInputBox div:not(.ui-draggable-dragging):nth-child(4 of .oxygen) {
     position: absolute;
     translate: 50px -37px;
     top: auto !important;
     left: auto !important;
 }

 #composition .carbon,  #composition .oxygen{
    translate: none!important;
    z-index: 10;
    position: relative;
 }

 .question1-submitButton #submitButton {
     position: absolute;
     background: url('https://images.squarespace-cdn.com/content/6524bf2d6a2e9f59b608a588/63970e14-213c-42b0-9c16-979c5215bc75/Screen02-Unclicked.png?content-type=image%2Fpng') center center;
     width: 301px;
     height: 133px;
     display: block;
     top: auto;
     right: 0px;
     cursor: pointer;
     border: 0px;
     left: 0px;
     margin: 0 auto;
     bottom: 58px;
     background-size: 215px;
     background-repeat: no-repeat;
 }

 .question1-submitButton #submitButton:hover {
     background: url('https://images.squarespace-cdn.com/content/6524bf2d6a2e9f59b608a588/dc6ee2e1-3670-4317-92bf-f51b9df44629/Screen02-Clicked.png?content-type=image%2Fpng') center center;
     background-size: 215px;
     background-repeat: no-repeat;
 }

 #tryAgainButton {
     position: absolute;
     background: url('https://images.squarespace-cdn.com/content/6524bf2d6a2e9f59b608a588/64ce489e-932f-486d-b7f8-7ff4e451b93a/Screen02-Try-Again-Unclicked.png?content-type=image%2Fpng') center center;
     width: 301px;
     height: 133px;
     display: block;
     top: auto;
     right: 0px;
     cursor: pointer;
     border: 0px;
     left: 0px;
     margin: 0 auto;
     bottom: 58px;
     background-size: 215px;
     background-repeat: no-repeat;
     z-index: 1001;
 }

 #tryAgainButton:hover {
     background: url('https://images.squarespace-cdn.com/content/6524bf2d6a2e9f59b608a588/ed73b286-33d1-4cb3-8fdc-bee3b30e61e2/Screen02-Try-Again-Clicked.png?content-type=image%2Fpng') center center;
     background-size: 215px;
     background-repeat: no-repeat;
 }

 .option-wrapper {
     position: absolute;
     top: 46%;
     left: 9%;
     right: 0px;
     max-width: 100%;
     margin: 0 auto;
     display: flex;
 }

 .options img {
     max-width: 430px;
     cursor: pointer;
 }

 .option {
     position: relative;
     max-width: 430px;
     cursor: pointer;
 }

 span.option-text {
     color: #fff;
     font-size: 28px;
     font-weight: 300;
     left: 0px;
     right: 0px;
     text-align: center;
     display: block;
     transform: translate(0%, -50%);
     top: 50%;
     position: absolute;
 }

 .small-fonts-text span.option-text {
     color: #fff;
     font-size: 22px;
     margin: 0 auto;
     line-height: 25px;
     max-width: 350px;
 }

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

 .row {
     display: flex;
     justify-content: space-between;
     width: 1000px;
     margin-bottom: 30px;
 }

 .row-left {
     display: flex;
     justify-content: space-between;
     width: 1100px;
     margin-bottom: 20px;
 }

 .submitButton-block #submitButton {
     position: absolute;
     background: url('https://images.squarespace-cdn.com/content/6524bf2d6a2e9f59b608a588/b074dbc7-bcbd-4036-9e5e-88092905f240/Screen03-Submit-Unclicked.png?content-type=image%2Fpng') center center;
     width: 301px;
     height: 133px;
     display: block;
     top: auto;
     right: 0px;
     cursor: pointer;
     border: 0px;
     left: 170px;
     margin: 0 auto;
     bottom: 0px;
     background-size: 235px;
     background-repeat: no-repeat;
     outline: none !important;
     border: 0px;
 }

 .submitButton-block #submitButton:hover {
     background: url('https://images.squarespace-cdn.com/content/6524bf2d6a2e9f59b608a588/0d4ceb21-7299-4e93-8d6f-01d972fb98cf/Screen03-Submit-Clicked.png?content-type=image%2Fpng') center center;
     background-size: 235px;
     background-repeat: no-repeat;
 }

 .failure-message {
     position: absolute;
     right: 13%;
     top: 15%;
     text-align: center;
 }

 .info-message .message {
     color: #fff;
     font-family: 'PlayMeGames';
     font-size: 45px;
     margin-bottom: 20px;
 }

 .info-message h2 {
     color: #fff;
     font-family: 'PlayMeGames';
     font-size: 45px;
     margin-bottom: 20px;
     font-weight: normal;
 }

 .info-message p {
     color: #fff;
     font-size: 45px;
 }

 .bottom-button {
     position: absolute;
     right: 13%;
     bottom: 0px;
 }

 .bottom-button .reatke-button {
     background: url('https://images.squarespace-cdn.com/content/6524bf2d6a2e9f59b608a588/e3b1f9f4-131c-42ec-b908-2859273970c1/Screen04-Retake-Unclicked.png?content-type=image%2Fpng') center center;
     background-size: 250px;
     background-repeat: no-repeat;
     display: block;
     width: 300px;
     height: 133px;
     outline: none !important;
     border: 0px;
 }

 .bottom-button .reatke-button:hover {
     background: url('https://images.squarespace-cdn.com/content/6524bf2d6a2e9f59b608a588/f4422f9a-5ad1-4f5c-be8f-12c10f98ffce/Screen04-Retake-Clicked.png?content-type=image%2Fpng') center center;
     background-size: 250px;
     background-repeat: no-repeat;
 }

 .success-message {
     position: absolute;
     right: 10%;
     top: 9%;
     text-align: center;
 }

 .bottom-button .finish-button {
     background: url('https://images.squarespace-cdn.com/content/6524bf2d6a2e9f59b608a588/f301add3-de2d-4278-bc06-fa0c331e32fe/Screen04-Finish-Unclicked.png?content-type=image%2Fpng') center center;
     background-size: 250px;
     background-repeat: no-repeat;
     display: block;
     width: 300px;
     height: 133px;
     outline: none !important;
     border: 0px;
 }

 .bottom-button .finish-button:hover {
     background: url('https://images.squarespace-cdn.com/content/6524bf2d6a2e9f59b608a588/83f0250b-7b7c-4eb9-9b2e-bf872e0bb535/Screen04-Finish-Clicked.png?content-type=image%2Fpng') center center;
     background-size: 250px;
     background-repeat: no-repeat;
 }

 #userInputBox .carbon {
    width: 110px;
    height: 80px;
    background-size: contain;
 }

 .reatke-button.hide-button {
     display: none;
 }

 .overlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(109, 124, 180, 0.92);
     z-index: 1000;
 }

 .popup {
     display: none;
     position: absolute;
     top: 150px;
     left: 50%;
     transform: translate(-50%, 100%);
     padding: 20px;
     border-radius: 5px;
     z-index: 1001;
 }

 .popup img {
     max-width: 400px;
 }

 .modal-open {
     overflow: hidden;
 }

 @media only screen and (max-width: 1600px) and (min-width: 1200px) {
     .canvas-container {
         zoom: 0.8;
     }
 }

 @media only screen and (max-width: 1200px) and (min-width: 1024px) {
     .canvas-container {
         zoom: 0.7;
     }
 }

 @media only screen and (max-width: 1023px) and (min-width: 768px) {
     .canvas-container {
         zoom: 0.5;
     }
 }

 @media only screen and (max-width: 767px) {
     .canvas-container {
         zoom: 0.26;
     }
 }