@font-face {
    font-family: "Inter";
    src: url('../assets/fonts/Inter/Inter-VariableFont_opsz\,wght.ttf');
}

:root{
    --background-alt: #262626;
    --background: #000;
    --text: #efefef;
    --text-alt: #A3A3A3;
    --border: #444;
    --color: rgb(239, 239, 239)
}
/*
Algemene CSS voor pagina
*/
html,
body{
    margin: 0;
    font-size: 14px;
    font-family: Inter, sans-serif;
    background-color: var(--background);
    color: var(--color);
}

#container{
    margin: 0 auto;
    width: 85vw;
    display: flex;
    flex-direction: column;
    gap: 5em;
}

a,
a:link,
a:visited{
    text-decoration: none;
    color: var(--color)
}

/*
CSS voor de header
*/
header{
    position: sticky;
    top: 0px;
    text-align: center;
    background-color: var(--background-alt);
}

header > nav > ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 0.8em;
}

header > nav > ul > a,
header > nav > ul > a > li {
    display: inline-block;
    width: 100%;
}

/*
CSS voor content block
*/
main{
    display: flex;
    justify-content: space-between;
}

.border{
    border: 1px solid var(--border);
    padding: .75rem 1rem;
    border-radius: .5rem;
}

.border-hover:hover{
    border: 1px solid var(--text);
}

main > section{
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    width: 100%;
    gap: 1.4em;
}

main > section > a{
    display: grid;
    grid-template-rows: 50px 150px 25px;
    grid-template-columns: repeat(2, 200px);
    grid-template-areas: 
    'title author'
    'content image'
    'date date';
    gap: 2.4em;
}

main > section > a > h2{
    margin: 0;
    grid-area: title;
    font-style: italic;
}

main > section > a > img{
    grid-area: image;
    place-self: start center;
    box-shadow: 10px 10px 5px var(--background-alt);
}

main > section > a > p{
    grid-area: content;
}

main > section > a > .date{
   grid-area: date;
   place-self: start center;
}

main > section > a > .author{
   grid-area: author;
   place-self: start center;
}

/*
Css voor footer
*/
#container > footer{
    position: sticky;
    bottom: 0px;
    text-align: center;
    background-color: var(--background-alt);
}

#container > footer > nav{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}