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

*:not(code) {
  font-family: "Lato", sans-serif;
}

.wrapper {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

ul,
ol {
  list-style-position: inside;
}

hr {
  border: 0;
  height: 1px;
  background-color: #d1d9e0b3;
  margin: 5px 0;
}

a {
  color: #006be6;
}

body > header {
  width: 100%;
  padding: 20px 10px;
  border-bottom: 1px solid #ececec;
  backdrop-filter: blur(30px);
  position: sticky;
  top: 0;
}

body > header > .wrapper {
  max-width: 1000px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  & a {
    text-decoration: none;
    font-size: 18px;
    font-weight: 900;
    color: #222222;
  }

  & nav {
    display: flex;
    gap: 10px;

    & a {
      color: #222222;
      font-size: 20px;
    }

    & a:hover {
      color: #424242;
    }
  }
}

main {
  padding: 50px 20px;

  & > h1:first-of-type {
    text-align: center;
    margin-bottom: 30px;
  }
}

main.post-container {
  & .banner-wrapper {
    width: 100%;
    height: 150px;
    border-radius: 10px;
    margin-bottom: 20px;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px;
    }
  }

  & .post-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;

    & .post-tags {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 5px;
    }
  }

  & .post-date {
    display: block;
    color: #757575;
    font-size: 14px;
    display: flex;
    gap: 5px;
    align-items: center;
  }

  > h1 {
    text-align: center;
    font-weight: 900;
    color: #222222;
    margin-bottom: 50px;
  }
}

.posts-container {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  row-gap: 40px;

  & hr {
    margin-bottom: 20px;
  }

  & li:not(:last-child) {
    margin-bottom: 10px;
  }
}

.markdown-body {
  margin-bottom: 30px;
}

:root {
  --badge-bg-color: 34, 34, 34;
  --badge-text-color: white;
}
.javascript {
  --badge-bg-color: 240, 219, 79;
  --badge-text-color: #323330;
}
.node-js {
  --badge-bg-color: 108, 194, 74;
}
.express {
  --badge-bg-color: 68, 136, 62;
}
.ejs {
  --badge-bg-color: 180, 202, 101;
  --badge-text-color: #a91f50;
}

.badge {
  text-decoration: none;
  color: var(--badge-text-color);
  background-color: rgba(var(--badge-bg-color), 1);
  padding: 3px 6px;
  border-radius: 7px;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;

  &:hover {
    background-color: rgba(var(--badge-bg-color), 0.8);
  }
}