body {
        height:100vh;
        width: 100vw;
        margin:0;
        padding:0;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        overflow-x: hidden;
        overflow-y: hidden;
      }
      .overall {
        display: flex;
        justify-content: space-around;
      }

      .profile-bar {
        height: 100vh;
        width:25vw;
        background-color: #f0f0f5;
        border-right: 1px solid black;
        display: flex;
        flex-direction: column;
        padding-top:5px;
      }

      .main {
        height: 100vh;
        display: flex;
        flex-grow: 1;
        background-color: #7F47AF;
        background-image: url("back.jpg");
      }

      .left-bar {
        height: 100vh;
        width:27vw;
        border-left: 1px black solid;
        background-color: #f0f0f5;

        display:flex;
        flex-direction: column;  
        margin-bottom: 10px;
           

      }

      .profile-button {
        position: absolute;
        top:3vh;
        left:1.25vw;
        cursor: pointer;
      }

      .profile-button .hover-text {
        visibility: hidden;
        width: 70px;
        top: -10%;
        left: 130%;
        font-size: 13px;
        background-color:#535457;
        color:white;
        border: 0.5px solid white;
        text-align: center;
        border-radius: 2px;
        padding: 2px 0;

        position: absolute;
        z-index: 1;
      }

      .profile-button:hover .hover-text {
        visibility: visible;
      }

      .chat-button{
        cursor:pointer;
      }

      .chat-button .chatbox-text{
        visibility: hidden;
        width: 70px;
        top: -10%;
        left: 130%;
        font-size: 13px;
        background-color:#535457;
        color:white;
        border: 0.5px solid white;
        text-align: center;
        border-radius: 2px;
        padding: 2px 0;

        position: absolute;
        z-index: 1;
      }

      .chat-button:hover .chatbox-text{
        visibility: visible;
      }

      .user-avatar { 
        width:240px;
        border-radius: 200px; 
        margin: 30px; 
        margin-top:-13px;  
        margin-bottom: -35px;
        align-self:center;
      }
      
      .username {
        margin-bottom: 25px;
      }

      .user-emojis {
        margin:8px;
      }

      .post-text-box {
        height:20vh;width:22vw; border-radius: 10px;
        border: 1.25px solid black;
      }

      .buttons-right {
        margin:10px;
        margin:5px;
        width:23vw;
        height: 7vh;
        font-size: 17px;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        background-color:cornsilk;
      }

      .content {
        width: 22vw;
        height: 290px;
        display: flex;
        flex-direction: column;
        margin:2vw;
        margin-bottom: 30vh;  
        overflow: auto;
        white-space: nowrap;
        position: relative;
        top:2.5vh;
        left:-17.6vw;
        overflow-x: hidden;
      }

      .meme-img {
        width: 100px;
        border: 1px solid black;
        margin:5px;
      }
      
      .fa-lg {
        margin-right:0.7vw;
      }

      .new-message1 {
        background-color: #DDD3DF;
        border:1px solid black;
        width: 30vw;
        height:10vh;
        margin:3vh;
        padding: 10px;
        border-radius: 10px;
        overflow-wrap: break-word;
      }

      .test {
        border:0;
        background-color: #f0f0f5;
      }

      .text-display{
        width: 100%;
        height: 92vh;
        display: flex;
        flex-direction: column;
        margin:2vw;
        margin-bottom: 30vh;  
        overflow-y: auto;
        white-space: nowrap;
      }

      .lobby-button {
        margin-bottom:5vh;
        height:8vh;
        background-color: cornsilk;
      }

      .text-prompts{
        background-color: cornsilk;
        height:10vh;
        border-radius: 10px;
      }