@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap');

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ======================
        Layout
======================= */
body {
    font-family: 'Source Sans Pro', sans-serif;
    color:whitesmoke;
    background-color: #000;
    display:grid;
    grid-template-columns: 1em 1fr 1em;

}

/* Header */
header {
    background-color: #171a21;
    display:flex;
    justify-content: space-between;
    align-items: center;
    text-shadow: 0px 0px 5px black;;
    padding: 1em 0 1em 1em;
    grid-column: 1 / -1;
    grid-row: 1;
}

nav ul{
    display:flex;
}

li {
    list-style: none;
    margin-right:1em;
}

a {
    text-decoration:none;
    color:#b8b6b4;
}

a:hover {
    color:#8c53ff;
}

/* Hero Post */
.hero-post{
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('https://pbs.twimg.com/media/ChrBXNmUoAQRQop?format=jpg&name=4096x4096');
    background-size: cover;
    background-repeat: no-repeat;
    min-height:auto;
    padding: 0 1.5rem 1.5rem 1.5rem;
    color: whitesmoke;
    display:flex;
    flex-direction: column;
    justify-content: end;
    align-items:start;
    grid-column: 1 / -1;
    grid-row: 2;
}

.hero-post h3{
    margin-top:15vh;
    margin-left:0.5em;
    font-size:1.5vw;
}

/* Blog Posts */

.blog-posts{
    grid-column:1 / -1;
    grid-row:3;
    display:grid;
    grid-template-columns: 1fr;
    width:100%;
    padding:1em;
}

.blog-posts img {
    min-width:17vw;
    min-height: 17vh;
    object-fit:cover;
}

/* Buttons */
.view-more, .view-less{
    display:flex;
    justify-content: center;
    align-items: center;
    padding:2em 0;
    grid-column: 1/ -1;
    grid-row:4;
}

.view-less {
    display: none;
}

button{
    color:#fff;
    background-color: #8c53ff;
    padding: 0.5em 1em;
    border-radius: 9px;
    border:none;
}

#view-more:hover,
#view-less:hover {
    transform:scale(1.1);
    background-color: #b48eff;
    cursor: pointer;
}

/* Footer */
footer {
    background-color: #171a21;
    height:105px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    grid-column:1/ -1;
    grid-row:5;
}

footer p{
    margin:0;
}

/* ======================
        Images
======================= */

.logo {
    width:150px;
}

img {
    width:100%;
    border-radius: 3px;
}

/* ======================
        Typography
======================= */

h3 {
    font-weight:400;
    font-size:14px;
    margin:1em 0;
}

h1 {
    font-size:6vw;
}

p{
    margin: 1em 0;
}

@media (min-width:480px){

    header{
       padding-left:2em;
    }

    .blog-posts{
        grid-template-columns: repeat(3, 1fr);
        grid-gap:1em;
    }
    

    .hero-post p{
        width:75%;
        font-size:18px;
    }

    li {
        margin-right:2em;
    }
}