* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
*,*::before, *::after {
  box-sizing: border-box;
}

:root {
  --font-family-primary:"Nunito", sans-serif;
  --font-family-secondary:"Inter", sans-serif;
  
  --background-color-header:#2f3323;
}

@font-face {
  font-family: "Nunito";
  src:
    local("Nunito"),
    url("assets/Nunito-VariableFont_wght.ttf") format("truetype"),
    url("assets/Nunito-Italic-VariableFont_wght.ttf") format("truetype")
}

@font-face {
  font-family: "Inter";
  src:
    local("Inter"),
    url("assets/Inter-VariableFont_opsz,wght.ttf") format("truetype"),
    url("assets/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype"),
}


body {
  padding:0;
  margin:0;
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
  font-size:1.2rem;
  
  transition:0.4s ease;
}
/*  */
h1, h2, h3, div.logo {
  font-family: "Merriweather", serif;
  font-weight:bolder;
}
h1.heading {
  padding:2rem 0;
  font-size:3.2rem;
  text-align:center;
}
header {
  background-color:var(--background-color-header);
  padding:1rem 2rem;
  
  display:flex;
  align-items:stretch;
  justify-content:space-between;
}
header div.logo {
  font-size:2.2rem;
  letter-spacing:0.1rem;
}
header div.logo a {
  text-decoration:none;
  color:#fff;
  transition:0.4s ease;
}
header div.logo a:hover {
  opacity:0.7;
}
header nav {
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
}
header nav > span.controls {
  color:White;
  cursor:pointer;
}
header nav > ul {
  list-style:none;
  padding:0;
  margin:0;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  position:absolute;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background-color:Black;
}
header nav > ul > li {
  padding:1.5rem 0;
  font-size:2rem;
}

header nav a {
  color:#fbfceb;
  text-decoration:none;
}

main {
  margin:0 1rem;
}

#index-posts {
  display: grid; 
  grid-column-gap: 1rem; 
  grid-row-gap: 1rem; 
  grid-template-columns:repeat(3, 1fr); 
  grid-template-rows:repeat(3, 1fr); 
  margin-bottom:2rem;
}
#index-posts a {
  display:block;
  position:relative;
  text-decoration:none;
  color:White;
  font-family: "Merriweather", serif;
  letter-spacing:0.1rem;
}
#index-posts a:hover {
}
#index-posts a span {
  display:block;
  position:absolute;
  width:100%;
  height:35%;
  bottom:0;
  left:0;
  background:rgb(0 0 0 / 0.5);
  padding:2rem 1rem;
  font-size:1.5rem;
  transition:0.3s ease;
}
#index-posts a:hover span {
  height:50%;
}

#index-posts img {
  display:block;
  width:100%;
}

#intro {
  padding:2rem;
  background-color:#f1f1f1;
  margin-bottom:3rem;
}

#posts {
  margin:0 auto;
}
#posts .post {
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  flex-direction:row;
  flex-wrap:nowrap;
  row-gap:1rem;
  column-gap:1rem;
  margin-bottom:2rem;
}
#posts .post figure {
  display:block;
  padding:0;
  margin:0;
}
#posts .post div:first-child {
  background:#a5a58d;
  flex:2;
  overflow:hidden;
}
#posts .post div:first-child img {
  display:block;
  width:100%;
  transition:0.4s ease;
}
#posts .post div:first-child img:hover {
  transform:scale(1.3);
}
#posts .post div:last-child {
  flex:4;
  
  display:flex;
  flex-direction:column;
}

#posts .post div:last-child h2 a {
  font-size:2.5rem;
  text-decoration:none;
  color:Black;
  transition:0.9s ease;
  border-bottom:0.2rem solid transparent;
}
#posts .post div:last-child h2 a:hover {
  border-bottom:0.2rem solid #503b31;
}
#posts .post div:last-child p {
  flex:1;
}
#posts .post div:last-child > a {
  color:Black;
  text-decoration:none;
  padding:1rem 0;
  font-size:1.4rem;
  font-family: "Merriweather", serif;
  transition:0.9s ease;
  border-bottom:0.2rem solid transparent;
}
#posts .post div:last-child > a:hover {
  border-bottom:0.2rem solid #503b31;
}

#post {
  margin-bottom:4rem;
}
#post h1 {
  font-size:3rem;
  padding:2.2rem 0;
}
#post img {
  display:block;
  width:100%;
  margin:0 0 2rem 0;
}
#post h2, #post h3 {
  font-size:2.2rem;
}
#post p:first-child {
  font-size:120%;
  font-weight:bolder;
}

section#text {
  margin-bottom:3rem;
}

footer {
  padding:3rem 0;
  background-color:#fbfceb;
}
footer ul {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
}
footer ul li {
  padding:0 1rem;
}
footer ul li a {
  color:Black;
  text-decoration:none;
}
footer #copy {
  text-align:center;
  padding:2rem 0;
}

@media screen and (min-width: 1024px) {
  
  header nav > span.controls {
    display:none;
  }
  header nav > ul {
    position:relative;
    display:flex;
    flex-direction:row;
    background-color:transparent;
    width:auto;
    height:auto;
  }
  header nav > ul > li {
    padding:0 0.5rem;
    font-size:1.2rem;
  }
  main {
    margin:0 auto;
  width:1024px;
  }
}