.room .roomHeader { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-content: stretch } .room .roomHeader .returnButton { flex-basis: 10%; display: flex; justify-content: center; } .room .roomHeader .centerTitle { flex-basis: auto; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; } .room .roomHeader .dumb { flex-basis: 10%; } .room .room { width: 100%; height: 70vh; display: flex; overflow: auto; justify-content: center; /* align-items: center; */ } .questionNavigationButtons { display: flex; justify-content: center; margin-top: 2rem; } /* .create-room-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } .manage-room-container { display: flex; flex-direction: column; align-items: center; height: 100%; width: 100%; } .quiz-setup-container { display: flex; flex-direction: column; width: 100%; margin-top: 2rem; } .quiz-mode-selection { display: flex; flex-grow: 0; flex-direction: column; justify-content: center; align-items: center; margin-top: 10px; height: 15vh; } .users-container { display: flex; flex-direction: column; align-items: center; flex-grow: 1; gap: 2vh; } .launch-quiz-btn { width: 20vw; height: 11vh; margin-top: 2vh; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); } .mode-choice { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 20vw; margin-top: 2vh; } .user { background-color: #e7dad1; padding: 10px 20px; border: 1px solid black; border-radius: 10px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); } .bottom-btn { display: flex; width: 100%; justify-content: flex-end; margin-top: 2vh; } .room-container { position: relative; width: 100%; max-width: 60vw; } @media only screen and (max-device-width: 768px) { .room-container { max-width: 100%; } } .room-wrapper { display: flex; width: 100%; height: 100%; justify-content: center; } .room-name-wrapper { display: flex; flex-direction: column; align-items: end; } .user-item { width: 100%; } .flex-column-wrapper { display: flex; flex-direction: column; height: 85vh; overflow: auto; } .preview-and-result-container { display: flex; flex-direction: column; gap: 2rem; } .nextQuestionButton { align-self: flex-end; margin-bottom: 5rem !important; } .top-container { display: flex; justify-content: space-between; align-items: center; } @media only screen and (max-device-height: 4000px) { .flex-column-wrapper { height: 60vh; } } @media only screen and (max-device-height: 1079px) { .flex-column-wrapper { height: 50vh; } } @media only screen and (max-device-height: 741px) { .flex-column-wrapper { height: 40vh; } } */