@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;0,600;0,700;1,500&display=swap");

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

:root {
  --clr1: var(--gray-8);
  --clr2: var(--gray-9);
  --clr3: var(--gray-0);
  --clr4: var(--blue-2);
  --clr5: var(--blue-5);
  --clr6: var(--gray-7);
  --clr7: #e1e1e1;
  --clr8: var(--gray-2);
}

@media (prefers-color-scheme: dark) {
  :root {
    --clr1: var(--gray-3);
    --clr2: var(--gray-0);
    --clr3: var(--gray-9);
    --clr4: var(--blue-5);
    --clr6: var(--gray-4);
    --clr7: #464646;
    --clr8: var(--gray-8);
  }
}

body {
  font-family: "Poppins", var(--font-sans);
  color: var(--clr1);
  display: flex;
  flex-direction: column;
}

h1 {
  font-size: var(--font-size-7);
  color: var(--clr2);
  font-family: "Tanker", sans-serif;
  letter-spacing: var(--font-letterspacing-2);
}
h2 {
  font-size: var(--font-size-6);
  color: var(--clr2);
  font-family: "Tanker", sans-serif;
  letter-spacing: var(--font-letterspacing-2);
}
h3 {
  font-size: var(--font-size-5);
  color: var(--clr2);
  font-family: "Tanker", sans-serif;
  letter-spacing: var(--font-letterspacing-2);
}
h4 {
  font-size: var(--font-size-4);
  color: var(--clr2);
  font-family: "Tanker", sans-serif;
  letter-spacing: var(--font-letterspacing-2);
}
h5 {
  font-size: var(--font-size-3);
  color: var(--clr2);
  font-family: "Tanker", sans-serif;
  letter-spacing: var(--font-letterspacing-2);
}
h6 {
  font-size: var(--font-size-2);
  color: var(--clr2);
  font-family: "Tanker", sans-serif;
  letter-spacing: var(--font-letterspacing-2);
}

@media (max-width: 425px) {
  h1 {
    font-size: var(--font-size-6);
  }
  h2 {
    font-size: var(--font-size-5);
  }
  h3 {
    font-size: var(--font-size-4);
  }
  h4 {
    font-size: var(--font-size-3);
  }
  h5 {
    font-size: var(--font-size-2);
  }
  h6 {
    font-size: var(--font-size-1);
  }
  p {
    font-size: var(--font-size-1);
  }
}

p {
  font-size: var(--font-size-2);
}

a {
  text-decoration: none;
  color: var(--clr5);
}

a:visited {
  color: var(--clr5);
}

b {
  font-family: "Tanker", sans-serif;
  letter-spacing: var(--font-letterspacing-2);
}

img {
  width: 100%;
  border-radius: 15px;
  object-fit: cover;
}

section {
  padding: var(--size-8) 0;
}

.container {
  max-width: 1920px;
  padding: var(--size-3);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1440px) {
  .container {
    max-width: 1440px;
  }
}

@media (max-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (max-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (max-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (max-width: 425px) {
  .container {
    max-width: 425px;
  }
}

@media (max-width: 375px) {
  .container {
    max-width: 375px;
  }
}

@media (max-width: 320px) {
  .container {
    max-width: 320px;
  }
}

.btn {
  background: var(--clr2);
  border: 2px solid var(--clr2);
  color: var(--clr3);
  border-radius: var(--radius-2);
  font-weight: var(--font-weight-6);
  padding: var(--size-2);
  max-width: max-content;
}

.btn:hover {
  background: var(--clr3);
  color: var(--clr2);
}

.btn:visited {
  color: var(--clr3);
}

.btn:visited:hover {
  background: var(--clr3);
  color: var(--clr2);
}

/* Navbar */
header {
  border-bottom: 1px solid var(--clr7);
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
}

nav ul {
  display: flex;
  justify-content: space-between;
}

nav li {
  list-style: none;
}

nav li a {
  color: var(--clr6);
  font-weight: var(--font-weight-6);
}

nav li a:hover {
  color: var(--clr2);
}

nav li a:visited {
  color: var(--clr6);
}

nav li a:visited:hover {
  color: var(--clr2);
}

.hamburger {
  background: transparent;
  fill: var(--clr2);
  cursor: pointer;
  display: none;
}

@media (max-width: 768px) {
  .nav-menu {
    display: none;
    width: 100%;
    padding-left: 0;
  }
  .hamburger {
    margin-left: auto;
    display: block;
  }
  .nav-menu.active {
    display: flex;
    flex-direction: column;
  }
  .nav-menu li {
    max-inline-size: 100%;
    text-align: center;
  }
}

.logo {
  font-family: "Bespoke Stencil", sans-serif;
  font-size: var(--font-size-5);
  color: var(--clr2);
}

.logo:visited {
  color: var(--clr2);
}

/* Hero */

.name {
  box-shadow: inset 0 -20px 0 0 var(--clr4);
}

.hero h1 {
  margin-bottom: var(--size-3);
  letter-spacing: var(--font-letterspacing-2);
  max-inline-size: none;
}

/* Snippet */

.article {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--size-3);
}

article:first-child {
  grid-column: span 2;
}

.snippet {
  display: flex;
  flex-direction: column;
  gap: var(--size-3);
}

article:first-child {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

article:first-child .image {
  grid-column: span 2;
}

@media (max-width: 768px) {
  article:first-child {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .article {
    display: flex;
    flex-direction: column;
    gap: var(--size-4);
  }
}

.info {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
}

article:first-child .info {
  gap: var(--size-fluid-1);
}

/* Footer */

footer {
  margin-top: auto;
  background: var(--clr8);
}

@media (max-width: 320px) {
  footer {
    width: 320px;
  }
}

footer .container {
  display: flex;
  justify-content: space-between;
}

.footer-section {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  padding-top: var(--size-3);
}

.footer-section ul {
  padding-left: 0;
}

.footer-section li {
  list-style: none;
  margin-bottom: var(--size-1);
}

.footer-section li a {
  color: var(--clr6);
  font-weight: var(--font-weight-6);
}

.footer-section li a:hover {
  color: var(--clr2);
}

/* Postlist */

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--size-3);
}

@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr;
    gap: var(--size-4);
  }
}

/* Post */

.post {
  max-width: 700px;
  margin: 0 auto;
}

.post img {
  margin: var(--size-6) auto;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}

.post p {
  line-height: var(--font-lineheight-3);
  margin: var(--size-3) 0;
}

.meta {
  margin-bottom: var(--size-3);
}

.meta p {
  margin: 0;
}

/* Tags */

.tag-list {
  display: flex;
  gap: 5px;
}

.tag-list a {
  border: 2px solid var(--clr2);
  padding: 2.5px 5px;
  border-radius: var(--radius-2);
}

.tag-list a:hover {
  background: var(--clr2);
  color: var(--clr3);
}

:where(pre) {
  max-width: 100%;
  border-radius: 5px;
}