:root{
    --evryin: #b3054d;
    --ody: #e8bd4d;
    --anetzi: #656d0a;
    --nessex: #6b228b;
    --sylvia: #066b65;
    /* ---------------- */
    background: #070707;
    color: white;
}
hr{
    border: 4px white double;
}
.container{
    border-radius: 17px;
    display: grid;
    grid-template-columns: 30% 70%;
    background-color: #070707;
    box-shadow: 0px 0px 30px #24242450; 
    width: 90%;
    margin: 2.5% auto 0%;
    padding: 2rem 1rem;
}
.container .info{
    padding: 1rem;
    text-align: center;
    border-right: 5px dashed white;
}

.blog{
    padding: 1rem;
}
.blog h1{
    font-size: 3rem;
}
.friends{
    width: 95%;
    margin: 2em auto 0;
    padding: 0.5em;
}
.accounts{
    display: flex;
    overflow-x: auto;
}
.accounts img{
    padding: 5px;
    width: 9%;
}
#ksdjfhksjdfkj{
    margin: 0 1%;
    padding: 0.5rem;
}
.posts #post{
    width: 95%;
    margin: 2em auto 0;
    padding: 1em;
    display: grid;
    grid-template-columns: 10% 90%;
    border-top: white 1px solid;
    border-bottom: white 1px solid;   
}
#post #avatar{
    width: 100%;
    padding: 1%;
}
#post #post-text{
    padding: 1rem 1.5rem;
    border-left: 2px dashed white;
    
}
#post details{
    margin: 0 2%;
    font-style: italic;
}
@media only screen and (max-width: 390px){
    .container{
        display: block;
    }
    .container .info{
        border-right: none;
        border-bottom: 5px white dashed;
    }
    .accounts img{
        padding: 5px;
        width: 20%;
    }
    .posts #post{
        width: 95%;
        margin: 2em auto 0;
        padding: 0em;
        display: block;
    }
    #post #avatar{
        display: none;
    }
}