body {
    background-color: rgb(42, 42, 42);
    color: white;
}


.nav-link{
    color: orange;
    font-size: 20px;
}
.nav-link:hover{
    color: rgb(209, 137, 3);
}
.nav-link::after{
    color: rgb(209, 137, 3);
}
.active-page{
    color: beige;
}
.active-page:hover{
    color: rgb(192, 192, 178);
}


.wrapper-grid{
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(auto-fit, 20rem);
    grid-gap: 2px;
    justify-content: center;
}
.dm-card{
    color: rgb(233, 233, 233);
    margin-left: 15px;
}
.dm-card:hover{
    color: rgb(233, 233, 233);
    background-color: rgb(97, 97, 97);
    margin-left: 15px;
}

.pp-nick{
    display: flex;
    align-items: center;
}
.cap-1 {
    padding: 10px;
    background-color: rgb(73, 73, 73);
    overflow: hidden;
    border-radius: 20px;
}
.cap-2 {
    padding: 10px;
    background-color: rgb(73, 73, 73);
    overflow: hidden;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
    width: 320px;
    height: fit-content;

    display: grid;
    grid-template-rows: 2;
}

.content-field{
    height: max-content;
    overflow-y: auto;
    min-height: 300px;
}
.input-container{
    height: fit-content;
    display: inline-block;
}
.input-container input{
    width: 90%;
    background-color: rgb(34, 34, 34);
    color: whitesmoke;
}


.message-container{
    background-color: rgb(102, 102, 102);
    padding: 7px;
    border-radius: 10px;
    width: fit-content;
    box-shadow: 0px 2px 8px 0px rgb(56, 56, 56);
}
.message-container.sender{
    margin-left: auto;
    background-color: rgb(48, 74, 104);
}