*{
  font-family: 'IBM Plex Sans', sans-serif;

}


body{
  margin: 0;
  /* pointer-events: none; */
  background-color: black;
}
.message{
  height: 10%;
  width: 100%;
  padding: 2px;
  display: flex;
  align-content: center;
}

.messageOtherName{
  height: fit-content;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: rgb(150, 0, 255);
}

.messageMyName{
  height: fit-content;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: rgb(255,0,50);
}
.messageText{
  height: fit-content;
}

.worldContainer{
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  /* background-color: black; */
  position: relative;
  /* z-index: -1; */
}

#messageGrandContainer {
  height: 42vh;
  display: flex;
  align-items: center;
  flex-direction: row;
  /* margin: -80px; */
  max-width: 606px;
  min-width: 354px;
  width: 50vw;
  position: relative;
  /* max-height: 598px; */
  min-height: 400px;
}

#messageBoxContainer{
  height: 100%;
  width: 75%;
  scroll-behavior: smooth;
  /* max-height: 42vh; */
  background-color: white;
  display: flex;
  align-items: center;
  flex-direction: column;
  /* margin: 33px; */
  /* padding-right: 09px; */
  box-sizing: border-box;
  position: relative;
  background-color: whitesmoke;
  /* z-index: 1; */
}



#messageBoxContainer::after {
  content: "";
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  background-color: rgb(150,0,255); /* Set your desired color */
  position: absolute;
  transform: translate(10px,10px);
  z-index: -1;
}

#messageBoxContainer::before {
  content: "";
  width: calc(100% + 6px); /* Adjust for border-width */
  height: calc(100% + 6px); /* Adjust for border-width */
  box-sizing: border-box;
  position: absolute;
  border-style: solid;
  border-width: 3px;
  margin: -3px; /* Counteract the border width */
  pointer-events: none;
}

#messageBox {
  height: 95%;
  overflow-y:scroll;
  width: 100%;
  scroll-behavior: smooth;
  margin-bottom: 0.5%;
  background: white;
}

#messageInputContainer {
  height: 7%;
  width: 100%;
  background-color: white;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  flex-direction: row;
  margin: 1%;
}

#messageInput {
  height: 100%;
  box-sizing: border-box;
  width: 90%;
  /* border-radius: 5px; */
  border-style:solid;
  margin-left: 1%;
  transition: border-color 0.2s ease;
  background-color: white;
}
#messageInput:focus {

 border-color: dimgray;
}

#messageSend {
  height: 100%;
  box-sizing: border-box;
  min-width: 15%;
  margin-left:1%;
  margin-right: 1%;
}

#sideBarContainer{
  width: 20%;
  height: 100%;
  margin-right: 5%;
  /* border-radius: 5px; */
  /* border-style:solid; */
  position: relative;
  box-sizing: border-box;
  /* margin: 0; */
}
#sideBarContainer::before{
    content: "";
  width: calc(100% + 6px); /* Adjust for border-width */
  height: calc(100% + 6px); /* Adjust for border-width */
  box-sizing: border-box;
  position: absolute;
  border-style: solid;
  border-width: 3px;
  margin: -3px; /* Counteract the border width */
  pointer-events: none;
}


#sideBarContainer::after {
  content: "";
  width: 100%;
  height: 100%;
  top:0;
  background-color: rgb(255,0,50);
  /* Set your desired color */
  position: absolute;
  transform: translate(10px,10px);
  /* border-radius: 5px;
  *//* border-style:solid; */
  z-index: -1;
}


#sideBar{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: white;
  padding: 9px;
  box-sizing: border-box;
}


.center{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

h1{
  font-size: medium;
}
.big{
  font-size: large;
}
.biger{
  font-size:30px;
}
.noMargin{
  margin: 0;
}

.darkButton {
  background-color:black;
   transition: background-color 0.15s ease;
  color:white;
}

.darkButton:hover {
  background-color:dimgray;
}