/* || general styles */

html {
    font-family: 'Oswald',  sans-serif;
    font-weight: 200;
}

article  {
    font-family: 'Oswald',  sans-serif;
    color: #fff;
    background:#313543;
    display: grid;
    grid-template-areas:
	"profile header "
	"profile content"
	"footer footer";
    grid-template-columns: 1fr 3fr;
    gap: 0.5em;
    width: 30em;
    padding: 1em 0.25em 0em 0.25em;

}

article a {
    color: #4d9fdb;
}


article header {
    width:100%;
    grid-area: header;
}

article header summary {
    font-weight: 300;
    width:100%;

}

article aside {
    grid-area: profile;
    text-align:center;
}

article aside h1 {
    font-size: 1.2em;
    font-weight: 300;
    padding:0; margin-bottom:0;
}

article aside h2  {
    font-size: 1.0em;
    font-weight: 200;
    padding:0; margin:0;
}

article aside img {
    max-width: 100px;
}

article section {
    grid-area: content;
}

article > footer {
    grid-area: footer;
    background: #282c37;
}

article > footer > ul {
    width: 100%;
    display: grid;
    grid-template-areas:
	"replies favs boosts";
    grid-template-columns:  1fr 1fr 1fr;
    gap:0em;    
}

article > footer > ul > li {    
    width: 25%;
}

article > footer > ul > li.replies {
    grid-area: replies;

}

article > footer > ul > li.favs {
    grid-area: favs;
}

article > footer > ul > li.boosts {
    grid-area: boosts;
}




strong, b {
    font-weight: 300;
}

.hashtag {
    text-decoration:none;
}