@media screen and (max-width: 1380px) and (min-width:1001px) {
    .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;
    }

    .viewport {
        background-size: 100%;
        height: 580px;
        width: 1060px;
        color: black;
    }
    .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 {
        position: absolute; 
        bottom:72px; 
        width: 1050px; 
        margin-left: -520px; 
        left:50%; 
        
        height: 131px;
        z-index: 5;
    }
    .log-message {
        position: absolute;
        bottom:0px; 
        width: 435px; 
        height: 72px;
        
    }
    #log-message-1 {
        left: 182px;
        
    }
    
    #log-message-2 {
        right: 100px;
        opacity: 0.7;
    }
    .message-avatar.main, .message-avatar.main img {
        height: 131px;
        width: 131px;
    }
    .message-avatar, .message-avatar img {
        width: 70px;
        height: 70px;
    }
    .image-attached.main {
        
        width: 131px;
        height: 131px;
    }
    .image-attached{
        
        width: 70px;
        height: 70px;
    }
    
}