html,
body {
  margin: 0px;
  padding: 0px;
  height:100%;
}

html {
  height: 100%;
}

body {
  margin: 0px;

  background-color: #ffd500;
  color: white;/*  background-color: "red";*/
  height: 100%;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings: "slnt" 0;
}

.container {
  height: 100%;
}

.main-row {
  height: 75%;
}

.left-col {
  color: #03071e;
  background-color: #ffee32;
}

.right-col {
  color: #ffee32;
  background-color: #03071e;
}

/*<uniquifier>: Use a unique and descriptive class name*/

/*<weight>: Use a value from 100 to 900*/

.inter-title {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings: "slnt" 0;
}

.create-room-submit {
  border: 2px solid #f3fae1;
  background-color: #03071e;
  color: #ffee32;
  box-sizing: border-box;
  border-radius: 4px; /* Rounded corners */
  font-size: 20px; /* Font size */
}

.room-id {
  background-color: #ffffcc; /* Light yellow background */
  padding: 20px;
  border-radius: 4px;
  display: inline-block; /* Make it fit the content */
  position: relative; /* Position relative to parent for absolute positioning of the button */
  font-size: 19px; /* Font size */
}

.message * {
  padding: 0;
  margin: 0;
}


.message {
  display: flex;
  flex-direction: column;
  color: #ffee32;
  background-color: #03071e;

}

/* Style for the scrollable div */
.scrollable-div {
  overflow-y: scroll; /* Scrollable vertically */
  max-height: 85vh;
  
  /* Blurred background */
  background-color: rgba(255, 0, 0, 0.3); /* Semi-transparent red */
  backdrop-filter: blur(10px); /* Adjust blur intensity */
  
  /* Optional: More styling */
  padding: 1rem;
  border-radius: 8px;
}


html,
body {
  margin: 0px;
  padding: 0px;
  height:100%;
}






 /* Reset */
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: "Inter", sans-serif;
    }

    /* Main Container */
    .container {
      background-color: #ffd500;
      color: #03071e;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    /* Scrollable Message Area */
    .scrollable-div {
      width: 80%;
      max-height: 60vh;
      overflow-y: scroll;
      background-color: #03071e;
      color: #ffee32;
      padding: 1.5rem;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      margin-bottom: 20px;
    }

    /* Message Item */
    .message {
      background-color: #222;
      color: #ffee32;
      padding: 10px;
      margin: 10px 0;
      border-radius: 5px;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    }

    /* Message Text */
    .message p {
      margin: 0;
    }

    /* Input Form */
    .message-input-form {
      display: flex;
      width: 80%;
      align-items: center;
      gap: 10px;
    }

    .message-input-form input[type="text"] {
      flex: 1;
      padding: 8px;
      border: 1px solid #03071e;
      border-radius: 4px;
    }

    .message-input-form button {
      background-color: #03071e;
      color: #ffee32;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
    }

    /* Messages Header */
    .messages-header {
      font-size: 1.2rem;
      font-weight: bold;
      margin-bottom: 15px;
    }