@font-face {
    font-family: 'UniversLTStd';
    src: url('../Font/UniversLTStd-Bold.otf') format('opentype'); 
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'BianZhiDai';
    src: url('../Font/BianZhiDai-ring.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Harber';
    src: url('../Font/HARBER-trial-Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NeueBit';
    src: url('../Font/KomunaTrial-6Round100.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


body, .container{ 
    display: grid;
    justify-content: center;
    overflow: hidden;
    min-height: 100vh;
    font-family: 'UniversLTStd', sans-serif;
    background-image: url('../Images/Blaze.png'); background-size: auto 75vw; background-position: top; background-repeat: no-repeat; background-color: black
}

button [type="submit"]{
    cursor: pointer;
    font-family: 'UniversLTStd', sans-serif;
    text-transform: uppercase;
    font-weight: bold;
}

.voluptas-logo {
    position: fixed;
    color: aliceblue;
    margin: 0;
    left: 1.6vw;
    z-index: 100;
}

.voluptas-logo-japanese {
    display: none;
    position: fixed;
    color: black;
    margin: 0;
    left: 2.5vw;
    z-index: 100;
    font-family: 'UniversLTStd', sans-serif;
}

.info-overlay {
    display: block;
    position: fixed;
    font-size: 1.5rem;
    left: 18vw;
    top: 40vh;
    text-align: center;
    text-transform: uppercase;
    width: 65vw;
    color: aliceblue;
    z-index: 3;
}

.info-overlay-canvas {
    display: none;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: black;
    z-index: 2;
}

.submittingMessage {
    display: none;
    position: fixed;
    color: aliceblue;
    margin: 0;
    left: 40vw;
    z-index: 100;
    font-family: inherit
}

.loading-circle {
    display: none;
    border: 4px solid aliceblue;
    border-top: 4px solid black;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    animation: spin 1s linear infinite;
    position: fixed;
    padding: 0px 0px 20px 20px;
    margin-top: 20px ;
    margin-left: 10px ;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.loading-circle-colors {
    display: none;
    border: 4px solid aliceblue;
    border-top: 4px solid black;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    animation: spin 1s linear infinite;
    position: fixed;
    padding: 0px 0px 20px 20px;
    margin-top: 20px ;
    margin-left: 10px ;
    transform: translate(-50%, -50%);
    z-index: 5;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.video-player-cedric {
    display: none;
    width: 110vw;
    position: center;
    margin-top: -3vh;
    max-height: 105vh ;
}

.video-player-toDesign {
    display: none;
    width: 120vw;
    position: center;
    margin-top: -3vh;
    max-height: 100vh ;
}

.info_on_marina {
    display: none;
    z-index: 10;
    position: fixed;
    top: 40vh;
    left: 24vw;
}

.glitch-item {
    display: none;
    width: 117vw;
    position: fixed;
    top: 0;
    left: 0;
}

h3 {
    color: aliceblue;
    font-size: 2rem;
    text-transform: uppercase;
    margin-top: 0vh;
    alignment: center;
}

h2 {
    font-size: 2rem;
}

h1 {
    color: aliceblue;
    font-size: 7.5rem;
    text-transform: uppercase;
    margin-top: 7vh;
    margin-bottom: 0;
}

h4 {
    display: inline-block;
    font-size: 2rem;
    margin-top: 0vh;
}

h5 {
    display: inline-block;
    font-size: 1.5rem;
    margin-top: 0vh;
    left: 0;
}

.homepage_container{
    display: grid;
    justify-content: center;
    align-items: center;
    min-height: 5vh; 
    font-size: 2rem; 
    text-align: center; 
    text-transform: uppercase; 
    color: aliceblue
}



.video-container{
    display:none;
    align-items: center; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    
}

.student_name_page {
    display: none;
    position: center;
    margin-top: 2vh;
    max-width: 50vw;
}

.drawing-form-container {
    display: none;
    position: center;
    max-width: 50vw;
    margin-top: 2vh;
}

.group-form-container {
    display: none;
    position: center;
    margin-top: 2vh;
    max-width: 50vw;
}

.enjoymentFormContainer {
    display: none;
    position: center;
    margin-top: 2vh;
    max-width: 50vw;
}

.ChooseARoomForm {
    display: none;
    max-width: 50vw;
}

.form_page1 {
    
}

.form_page2 {
    display: none;
   
}

.form_page3 {
    display: none;
   
}

.enjoymentFormPage1 {
    display: block;
}
.enjoymentFormPage2 {
    display: none;
}
.enjoymentFormPage3 {
    display: none;
}
.enjoymentFormPage4 {
    display: none;
}
.enjoymentFormPage5 {
    display: none;
}
.enjoymentFormPage6 {
    display: none;
}

.form_surname {
    color: aliceblue;
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-top: 3vh;
    margin-bottom: 4vh;
}

.form_email {
    color: aliceblue;
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-top: 3vh;
    margin-bottom: 4vh;
}

.form_surname_input {
    color: black;
    font-size: 1.5rem;
    margin-top: 3vh;
    margin-left: 0.5vw;
    margin-bottom: 4vh;
    border-radius: 4px;
    padding-left: 10px;
    
}

.form_email_input {
    color: black;
    font-size: 1.5rem;
    margin-top: 3vh;
    margin-left: 0.5vw;
    margin-bottom: 4vh;
    border-radius: 4px;
    padding-left: 10px;
   
}

.form_gender_input {
    color: black;
    font-size: 1.5rem;
    margin-top: 3vh;
    margin-left: 0.5vw;
    margin-bottom: 4vh;
    border-radius: 4px;
    padding-left: 10px;
   
}

.multiplechoice_question {
    color: aliceblue;
    font-size: 1.5rem;
    text-transform: uppercase;
}

.multiplechoice_question_glitch {
    color: black;
    font-size: 1.5rem;
    text-transform: uppercase;
}

.numbersMeaning {
    color: black;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.multiplechoice_answers {
    color: aliceblue;
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-top: 2vh;
    margin-bottom: 4vh;
}

.multiplechoice_answers_glitch {
    color: black;
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-top: 2vh;
    margin-bottom: 4vh;
}

.multiplechoice_answers input[type="radio"] {
    background-color: blue;
}


.multiplechoice_answers label {
    margin-left: 2vw; /* Add spacing for better readability */
}

.room_number {
    color: aliceblue;
    font-size: 1.5rem;
    text-transform: uppercase;
    
}

.room_number_input {
    color: black;
    font-size: 1.5rem;
    margin-top: 2vh;
    margin-bottom: 4vh;
    border-radius: 4px;
    padding-left: 10px;
   
}

.room_number_input_teamGreen {
    width: 100%; 
    height: 38px; 
    margin-top: 2vh; 
    padding-left: 10px; 
    font-size: 1.5rem; 
    border-radius: 5px; 
    box-sizing: border-box; 
    resize: vertical;
    font-family: inherit;
}

.form_reasoning {
    color: aliceblue;
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-top: 10vh;
    
}
.reasoning_input {
    width: 100%; 
    height: 120px; 
    margin-top: 2vh; 
    padding: 10px;
    font-size: 1rem; 
    border-radius: 5px; 
    box-sizing: border-box;
    resize: vertical;
}

.reasoning_input_glitch {
    width: 100%; 
    height: 120px; 
    margin-top: 2vh; 
    padding: 10px; 
    font-size: 1rem; 
    border-radius: 5px; 
    box-sizing: border-box; 
    resize: vertical;
    font-family: inherit;
}

.bottom-fire {
    display: none;
    position: absolute;
    left: 25vw;
    bottom: 0vh;
    scale: 100%;
    z-index: 1;
    pointer-events: none;
}

.form_page2_red {
    display: none;
}

.form_page2_green {
    display: none;
}

.form_wetransferUpload {
    color: black;
    font-size: 2.5rem;
    margin-top: 2vh;
    margin-bottom: 2vh;
}

.form_wetransferLink {
    color: black;
    font-size: 1rem;
    width: 35vw;
    margin-top: 3vh;
    margin-bottom: 4vh;
    border-radius: 4px;
    padding: 10px;
}

.form_link_input {
    color: aliceblue;
    font-size: 2rem;
    margin-top: 3vh;
    padding-left: 10px;
    margin-left: 0.5vw;
    margin-bottom: 4vh;
    border-radius: 4px;
    background-color: black;
}

.thank-you-message{
    display: none;
    position: center;
    width: 60vw;
    text-align: center;
}

.team-randomizer{
    display: none;
    position: center;
    width: 60vw;
    text-align: center;
}

.reasoning_enjoyment {
    width: 100%;
    height: 65px;
    margin-top: 2vh;
    margin-bottom: 2vh;
    padding: 10px;
    font-size: 1rem;
    border-radius: 5px;
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
}

.glitchy-thank-you-message-text{
    color: black;
    text-align: center;
    font-size: 2rem;
}

.form_surname_black {
    color: black;
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-top: 3vh;
    margin-bottom: 3vh;
}

.get_together {
    color: black;
    font-size: 1.5rem;
    text-transform: uppercase;
}

.room_number_black {
    color: black;
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-top: 1vh;
    margin-bottom: 4vh;
}

.form_surname_input_glitch {
    color: black;
    font-size: 1.5rem;
    margin-top: 3vh;
    margin-left: 0.5vw;
    margin-bottom: 4vh;
    border-radius: 4px;
    padding-left: 10px;
    font-family: inherit;
}

.form_reasoning_black {
    color: black;
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-top: 10vh;
}



.learning-goal-container{
    display: none;
    position: center;
    width: 30vw;
    color: black;
}

.learning-goal-question {
    display: block;
    position: center;
    font-size: 2rem;
    top: 20vh;
    width: 30vw;
}

.goals_input {
    display: block;
    background-color: black;
    color: aliceblue;
    width: 100%; /* Makes it responsive to the parent container */
    height: 300px; /* Gives it enough vertical space */
    margin-top: 2vh; /* Give some space to breath after the question */
    padding: 10px; /* Adds some padding for readability */
    font-size: 1rem; /* Makes the text easy to read */
    border-radius: 5px; /* Gives rounded corners */
    box-sizing: border-box; /* Ensures padding doesn't affect total width */
    resize: vertical; /* Allows users to resize vertically only */
}

@keyframes arrowMove {
    from {left: 40vw;}
    to {left: 41vw;}
}

.arrow {
    display: inline-block;
    width: 150px;
    left: 40vw;
    top: 62vh;
    position: fixed;
    animation-name: arrowMove;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

button[class="startButton"] {
    display: block;
    width: 150px;
    left: 45vw;
    top: 65vh;
    position: fixed;
    background-color: transparent;
    color: aliceblue;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    border: transparent;
    font-family: inherit;
}

button[class="startButton"]:hover {
    text-decoration-line: underline;
}

button[class="nextPageButton"] {
    display: none;
    background-color: transparent;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 10px 5px;
    margin-top: 20px;
    border-radius: 4px;
    font-family: inherit;
}

button[class = 'nextPageButton']:hover {
    text-decoration-line: underline;
}

button[class="startMarinaButton"] {
    display: inline-block;
    background-color: transparent;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 10px 5px;
    margin-top: 20px;
    border-radius: 4px;
    font-family: inherit;
}

button[class = 'startMarinaButton']:hover {
    text-decoration-line: underline;
}

button[class="showZoomInVideoButton"] {
    display: inline-block;
    background-color: transparent;
    color: aliceblue;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 10px 5px;
    margin-top: 20px;
    border-radius: 4px;
    font-family: inherit;
}

button[class = 'showZoomInVideoButton']:hover {
    text-decoration-line: underline;
}

button[class="backButton"] {
    display: inline-block;
    background-color: transparent;
    color: aliceblue;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 10px 5px;
    margin-right: 10px;
    border-radius: 4px;
    font-family: inherit;
}

button[class = 'backButton']:hover {
    text-decoration-line: underline;
}
/*
button[class="submitButton"] {
    display: block;
    background-color: transparent;
    color: aliceblue;
    font-size: 2.5rem;
    font-family: inherit;
    text-transform: uppercase;
    margin-top: 20px;
    border-radius: 0px;
    border-color: transparent;
    font-family: inherit;
}

button[class="submitButton"]:hover {
    text-decoration-line: underline;
} */

button[class="glitch-submit-button"] {
    display: inline-block;
    background-color: black;
    border-color: transparent;
    border-radius: 4px;
    color: aliceblue;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px 5px;
    margin-top: 10px;
    font-family: inherit;
}

button[class = 'glitch-submit-button']:hover {
    background-color: aliceblue;
    color: black;
}

button[class="glitch-back-button"] {
    display: inline-block;
    background-color: black;
    border-color: transparent;
    border-radius: 4px;
    color: aliceblue;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px 5px;
    margin-top: 10px;
    font-family: inherit;
}

button[class = 'glitch-back-button']:hover {
    background-color: aliceblue;
    color: black;
}

button[class="waitforteams-button"]{
    display: inline-block;
    background-color: black;
    border-color: transparent;
    border-radius: 4px;
    color: aliceblue;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px 5px;
    margin-top: 20px;
    font-family: inherit;
}
button[class = 'waitforteams-button']:hover {
    background-color: aliceblue;
    color: black;
}

button[class="lasttaskdone-button"]{
    display: inline-block;
    background-color: black;
    border-color: transparent;
    border-radius: 4px;
    color: aliceblue;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px 5px;
    margin-top: 20px;
    font-family: inherit;
}
button[class = 'lasttaskdone-button']:hover {
    background-color: aliceblue;
    color: black;
}

button[class="infoButton"] {
    display: block;
    position: fixed;
    background-color: transparent;
    border-color: transparent;
    color: aliceblue;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 20px;
    right: 10px;
    z-index: 10;
    font-family: inherit;
}

button[class = 'infoButton']:hover {
    text-decoration-line: underline;
}