index.css

@font-face {
    font-family: 'Airbnb';
    src: URL('../fonts/AirbnbCerealBlack.ttf') format('truetype');
}

body {
  background-color: #111316;
  color: white;
  font-family: 'Lexend Deca', sans-serif
}

.back-btn{
  font-size: 2rem;
  color: white;
}

.back-btn:hover {
  cursor: pointer;
}

/* Landing Page Start */

.landing{
  display: none;
}

.main{
  background-color: #111316;
  height: 100vh;
}

.logo{
  margin-top: 10vh;
}

.head{
  font-size: 3.5rem;
  color: white;
  font-family: 'Airbnb';
}

.buttons{
  border-radius: 5px;
  background-color: white;
  border: none;
  color: #111316;
  font-size: 1.3rem;
  width: 13rem;
  height: 3rem;
}

.settings{
  width: 100%;
  position: absolute;
  bottom: 3rem;
}

.settings a:hover{
  color: white;
}

.icon{
  color: white;
  font-size: 2.5rem;
}

.icon:hover {
  cursor: pointer;
}

/* Landing Page End */

/* Create Page Start */

.create{
  display: none;
}

.create-head{
  font-family: 'Airbnb';
  font-size: 3.5rem;
}

.create-col{
  margin-top: 20vh;
}

input{
  background-color: #111316;
  color: white;
  border-radius: 5px;
  width: 20rem;
  font-size: 1.1rem;
  border: 1px solid white;
  padding: 10px 15px;
}

input:focus{
  outline: none;
}

.fileInput{
  width: 20rem;
  margin: auto;
}

.dragDrop{
  margin: auto;
  text-align: left;
  background-color: white;
  color: gray;
  border-radius: 50px;
  width: 20rem;
  height: 3rem;
  font-size: 1.1rem;
  border: none;
  padding: 10px 15px;
}

/* Create Page End */

/* Join Page Start */

.join{
  display: none;
}

.join-col{
  margin-top: 20vh;
}

/* Join Page End */

/* Room Page Start */

.room{
  display: none;
}

.left-side{
  background-color: black;
  height: 100vh;
  width: 78%;
}

#roomCodeText:hover{
  cursor: pointer;
}

.right-side{
  height: 100vh;
  width: 22%;
  background-color: #111316;
}

.video{
  width: 100%;
  height: 100%;
  border-radius: 30px;
}

#video-player{
  width: 100%;
  height: 100%;
}

.icon{
  font-size: 1.5rem;
}

.room-code, .members{
  font-size: 1.2rem;
}

::-webkit-scrollbar{
  width: 5px;
}

::-webkit-scrollbar-track{
  background-color: rgb(73, 73, 73);
  border-radius: 50px;
}

::-webkit-scrollbar-thumb{
  background: #888;
  border-radius: 50px;
}

#messages-box{
  display: block;
}

.messages{
  height: 80vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

@media(max-width: 2000px){
.messages{
  height: 79vh;
} 
}

@media(max-width: 1600px){
.messages{
  height: 75vh;
} 
}

@media(max-width: 1500px){
.messages{
  height: 74vh;
  font-size: 0.9rem;
} 
}

@media(max-width: 1400px){
.messages{
  font-size: 0.8rem;
} 
}

@media(max-width: 1300px){
.messages{
  font-size: 0.7rem;
} 
}

@media(max-width: 900px){
.messages{
  height: 65vh;
} 
}

@media(max-width: 700px){
.messages{
  height: 63vh;
} 
}

.chattimg{
  position: absolute;
  bottom: 20px;
  width: 22%;
}

#messageInp{
  border-radius: 5px;
  height: 2.5rem;
  width: inherit;
  box-shadow: none;
  border: none;
  color: white;
  background-color: gray;
}

#messageInp::placeholder{
  color: white;
  font-size: 0.8rem;
}

#message{
  height: fit-content;
}
/* Room Page End */