/* Google Fonts */
@font-face {
  font-family: "DM Sans";
  src:
    local("DM Sans"),
    url("assets/DMSans-VariableFont_opsz,wght.ttf") format("truetype"),
    url("assets/DMSans-Italic-VariableFont_opsz,wght.ttf") format("truetype")
}

:root {
  --font-family-primary:"DM Sans", sans-serif;
}

a, img {
  transition:0.3s ease;
}

body {
  font-family:var(--font-family-primary);
  font-optical-sizing:auto;
  font-weight:400;
  font-style:normal;
  font-size:1.2rem;
  text-decoration:none;
  color:#333;
}

header {
  background-color:#576535;
  color:White;
  padding:0;
  max-width:100%;
}
header div.main {
  height:100%;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
}
header div.logo a {
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  padding:0 1rem;
  font-size:1.4rem;
  font-weight:600;
}
header div.main nav {
  background-color:#EF7722;
  padding:1rem 2rem 1rem 3rem;
  clip-path:polygon(20.00% 0.00%, 100.00% 0.00%, 100.00% 100.00%, 0.00% 100.00%);
}
header div.main nav a {
  color:#000;
  letter-spacing:1px;
  font-weight:600;
}
header div.main nav a:hover {
  color:#333;
}

main {
  margin:0 1rem 5rem 1rem;
  min-height:50vh;
}

h1 {
line-height:3.5rem;
}
h2 {
line-height:2.5rem;
}

h1.heading {
  text-align:center;
  margin:2rem 0 2rem 0;
}

section.hero {
  position:relative;
  height:70vh;
  z-index:0;
}
section.hero:before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:1;
  background-color:rgba(0 0 0 / 0.4)
}
section.hero div.main {
  position:relative;
  margin:0 0.5rem;
  max-width:100%;
  height:100%;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}
section.hero div.main h1 {
  color:White;
  margin-bottom:1rem;
  font-size:2rem;
  line-height:2.5rem;
}
section.hero div.main p {
  color:White;
  font-size:1.2rem;
  background-color:rgba(0 0 0 / 0.5);
  padding:0.5rem 0.8rem;
  border-radius:0.5rem;
}

section.states {
  padding:2rem 0;
}
section.states div.main {
  padding:1rem;
}
section.states div.main h2 {
  text-align:center;
  margin-bottom:4rem;
}
section.states ol {
  display: grid; 
  grid-column-gap: 1rem; 
  grid-row-gap: 1rem; 
  grid-template-columns:repeat(2, 1fr);
  margin-bottom:4rem;
}
section.states ol li a:hover {
  color:#576535;
}
section.states div.text {
  
}
section.states div.text > p {
  margin-bottom:1rem;
}

section#posts {
  
}
section#posts div.post {
  display:flex;
  flex-direction:column;
  margin-bottom:2rem;
  gap:1rem;
}
section#posts div.post h2 {
  margin-bottom:1rem;
}
section#posts div.post h2 a:hover, section#posts div.post a:hover img {
  opacity:0.6;
}
section#posts div.post div:first-child {
  flex:1;
}
section#posts div.post div:first-child figure {
  max-width:100%;
  margin:0;
  padding:0;
}
section#posts div.post div:first-child img {
  display:block;
  width:100%;
  border-radius:0.5rem;
}
section#posts div.post div:last-child {
}
section#posts div.post a.continue {
  color:#EF7722;
}
section#posts div.post a.continue:hover {
  opacity:0.5;
}

section#post {
  padding:3rem 1rem;
}
section#post h1 {
  margin-bottom:3rem;
}
section#post h2 {
  margin-bottom:1rem;
}
section#post img {
  display:block;
  width:100%;
  border-radius:1rem;
}
section#post p:first-child:has(> img:first-child) {
  font-size:0.8rem;
  text-align:center;
}
section#post p + h2 {
  margin-top:2rem;
}

section#post ul {
  list-style: disc;
  list-style-type: disc;
  list-style-position: inside;
}
section#post ul li::marker {
  color:#EF7722;
}

section#post ol li {
  list-style-type:number;
}
section#post ol li::marker {
  color:#EF7722;
}

div.item {
  margin-bottom:2rem;
}
div.item p.website a {
  color:#EF7722;
}
div.item p.description {
  display:none;
}

footer {
  padding:4rem 0;
  text-align:center;
  background-color:#333;
  color:White;
}
footer ul {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin-bottom:2rem;
}
footer ul li a:hover {
  opacity:0.7;
}

/* Desktop */
@media (min-width: 768px) {
  header div.logo a {
    font-size:1.8rem;
  }
  main {
    margin:0 auto 5rem auto;
    width:1024px;
  }
  section.hero div.main {
    margin:0 auto;
    max-width:70%;
  }
  section.hero div.main h1 {
    font-size:3rem;
    line-height:3.5rem;
  }
  section.hero div.main p {
    font-size:1.6rem;
    padding:1rem 2rem;
  }
  section.states ol {
    grid-template-columns:repeat(5, 1fr); 
  }
  section.states div.text {
    margin:0 auto;
    width:1024px;
  }
  section#posts {
    margin:0 auto;
  }
  section#posts div.post {
    flex-direction:row;
  }
  section#posts div.post div:first-child {
    flex:2;
  }

  section#posts div.post div:last-child {
    flex:3;
  }
  section#post {
    margin:0 auto;
  }
}