#mainContainer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 12fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "settingsContainer"
    "msgContainer"
    "inputContainer";

  width: 100%;
  height: 97vh;
  box-sizing: border-box; 
}

#msgContainer {
  grid-area: msgContainer;
  /* background-color: lightblue; */
}

#settingsContainer {
  grid-area: settingsContainer;
}

#inputContainer {
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "inputBox buttonBox";
  grid-area: inputContainer;
}

#inputBox {
  grid-area: inputBox;
  margin-top: 2%;
}


.msgBox {  
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: 1.5em 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "pfpBox usernameBox"
    "pfpBox textBox";
 
    background-color: rgba(136, 136, 137, 0.484);
    width: 90%;
    margin: 2% auto;
}

.textBox { 
    grid-area: textBox; 
    align-self: left;
    justify-self: left;
    width: 90%;
    height: 100%;
    margin: 0 0 5% 5%;
    text-wrap: wrap;
    overflow-wrap: anywhere;
    float: left;
}

.usernameBox { 
    grid-area: usernameBox; 
    position: relative;
    height: 100%;
    margin: 2% 0 ;
}

.pfpBox { 
    grid-area: pfpBox; 
    position: relative;
    height: 10%;
    margin: 5% auto 0 auto;
}