@media screen and (max-width: 1000px), 
    screen and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {
    .viewport {
        background-size: 100%;
        height: 100vh;
        width: 100vw;
        color: black;
    }
    .main-container .left-sidebar {
        flex-grow: 2;
        max-width: 320px;
        border-right: 1px solid #1a233d;
        position: relative;
        transition: all 0.5s;
        box-shadow: 2px 0px 5px #03050a;
        display: none;
    }
    .top-bar {
        z-index: 100;
        background-color: RGBA(0, 0, 0, 0.1);
        position: absolute;
    }
    
    .top-bar h3 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .log-message {
        display: none;
    }
    .full_avatar_spot {
        width: 320px;
        height: 320px;
        background-size: 320px;
    }
    #user1 {
        position: absolute; 
        left: -20px;
    
    }
    #user3 {
        position: absolute; 
        left:  277px; 
    
    }
    
    #user4 {
        position: absolute; 
        right: 277px; 
    
    }
    
    #user2 {
        position: absolute; 
        right: -20px; 
    
    }
    .full-avatar-row {
        top: 96px; 
    }
    #main-message {
        margin-bottom: 0px;
        bottom: 0px; 
        width: 100%; 
        
        
        height: 131px;
        z-index: 5;
    }
    #main-message.card-body {
        overflow-y: scroll;
    }

}

@media screen and (orientation: portrait) {
    .viewport {
        background-size: 100%;
        height: calc(100vw / 16 * 9);
        width: 100vw;
        color: black;
    }
    .top-bar {
        display: none;
    }
    #main-message {
        position: relative;
        height: 131px;
        z-index: 5;
        width: 100%;
    }
    .message-avatar, .message-avatar.main {
        
        height: 20px;
        width: 20px;
    }
    .message-avatar img, .message-avatar.main img {
        height: 100%;
    }
    
    .log-message {
        position: relative;
        height: 72px;
        display: block;
        width: 100%;
    }
    .full_avatar_spot {
        width: 180px;
        height: 180px;
        background-size: 180px;
    }

    #user1 {
        position: absolute; 
        left: -20px;
    
    }
    #user3 {
        position: absolute; 
        left:  80px; 
    
    }
    
    #user4 {
        position: absolute; 
        right: 80px; 
    
    }
    
    #user2 {
        position: absolute; 
        right: -20px; 
    
    }
    .full-avatar-row {
        top: 54px; 
    }
    .message-avatar.main, .message-avatar.main img {
        height: 20px;
        width: 20px;
    }
    .image-attached.main {
        display: none;
        width: 131px;
        height: 131px;
    }
    .image-attached{
        display: none;
        width: 70px;
        height: 70px;
    }
}