:root{
    --lavender: rgb(244, 239, 250);
    --amethyst: rgb(47, 24, 75);
    --indigo: rgb(83, 43, 136);
    --lavenderpurple: rgb(155, 114, 207);
    --wisteria: rgb(200, 177, 228);
    --darkgray: rgb(59, 58, 58)
}

body{
    max-height:100vh;
    overflow: hidden;
    
}

 .music-player, #adrian, #ferenc, #gaelle, #joshua, #monica, #zahra{
    position: relative;
}

.main{
    width: 300px;
    height: 300px;
    margin-top: 175px;
    overflow-y: scroll;
    padding:0px;
    text-align: left;
}

.music-player{
    width:300px;
    left:250px;
    top:-475px
}
#adrian{
    width: 150px;
    top: -500px;
    left:70px;
}
#ferenc{
    width: 125px;
    top: -290px;
    left:-70px;
}
#gaelle{
    width:200px;
    top:-235px;
    left:-55px;
}
#joshua{
    width:130px;
    top:-285px;
    left:-40px;
}
#monica{
    width:180px;
    top:-673px;
    left:570px;
}
#zahra{
    width:200px;
    top:-800px;
    left:375px;
}

main {
    max-width:800px;
    margin:auto;

}
main img{
    border-top: 5px solid gray;
    border-left: 5px solid gray;
    border-bottom: 5px solid rgb(59, 58, 58);
    border-right: 5px solid rgb(59, 58, 58);
    box-shadow: 0px 0px 0px 2px black ;
}

.main p{
    padding:0px;
}
.post-preview {
    height:auto;
    overflow: hidden;
    margin:0px;
    padding:5px;
    display: block;
}
.blog-meta{
    display:flex;
    align-items: baseline;
    height: 18px;
    margin:0px;
    padding:0px;
}
.blog-meta h3{
    width:55%;
    margin-top:0px;
}

.blog-subheading{
    max-height: 25px;
    overflow-y: hidden;
}
h3{
    font-size: 14px;

    
}
p{
    font-size: 12px;
    

    
}
@media screen and (max-width:800px) {
    body{
        max-width: 100vw;
    }
    main{
        width: 100%;
    }
    main img, .music-player{
        display:none;
    }

    .main{
        width:90%;
    }
}