:root {
  --black: #252525;
  --white: #e2dfd5;
  --charcoal: #363636;
  --cyan-light: #45bdc4;
  --cyan-dark: #2d7a7e;
  --black-olive: #3e4937;
  --green-light: #279749;
  --green-dark: #1b6e34;
  --paper: #f6f4f1;
  --stone: #e4ded2;
  --coral: #f95c4b;
  --coral-pale: #f95c4bce;
  --grey-light: #838379;
  --grey-dark: #424242;
  --canvas: #fbfbf8;
  --mist: #dbe3e9;
  --cornflower: #6aa6da;
  --pear: #e1e5ac;
  --dune: #f6f5ec;
  --sand: #c9bdad;
  --tan: #9f7d58;
  --leather: #5d4334;
  --red-light: #d7584b;
  --red-dark: #b93c2e;
  --red-pale: #b93c2e8c;
  --icon-white: brightness(0) invert(1);
  --icon-black: none;
}

:root, [data-theme=light] {
  --bg: var(--black);
  --bg-2: var(--paper);
  --text: var(--white);
  --text-2: var(--black);
  --card-bg: var(--charcoal);
  --card-text: var(--white);
  --text-hover: var(--cyan-light);
  --tag: var(--cyan-dark);
  --icon-filter: var(--icon-white);
  --icon-filter-2: var(--icon-black);
}

[data-theme=blue] {
  --bg: var(--mist);
  --bg-2: var(--canvas);
  --text: var(--black);
  --text-2: var(--black);
  --card-bg: var(--grey-dark);
  --card-text: var(--white);
  --text-hover: var(--cornflower);
  --tag: var(--pear);
  --icon-filter: var(--icon-black);
  --icon-filter-2: var(--icon-black);
}

[data-theme=coral] {
  --bg: var(--stone);
  --bg-2: var(--paper);
  --text: var(--black);
  --text-2: var(--black);
  --card-bg: var(--grey-dark);
  --card-text: var(--white);
  --text-hover: var(--coral-pale);
  --tag: var(--coral);
  --icon-filter: var(--icon-black);
  --icon-filter-2: var(--icon-black);
}

[data-theme=dark] {
  --bg: var(--charcoal);
  --bg-2: var(--black);
  --text: var(--white);
  --text-2: var(--white);
  --card-bg: var(--grey-dark);
  --card-text: var(--white);
  --text-hover: var(--green-light);
  --tag: var(--green-dark);
  --icon-filter: var(--icon-white);
  --icon-filter-2: var(--icon-white);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "IBM Plex Sans", Helvetica, monospace;
}

body {
  background-color: var(--bg-2);
  color: var(--text-2);
  transition: background-color 0.2s ease-in-out, color 0.2s;
}

a {
  color: var(--text-2);
  transition: background-color 0.2s ease-in-out;
}

a:hover {
  background-color: var(--text-hover);
}

button {
  background-color: var(--bg);
  color: var(--text-2);
  transition: background-color 0.2s ease-in-out;
}

code {
  background-color: var(--text-hover);
}

blockquote {
  color: var(--text-2);
  border-left: 0.3em solid var(--text-hover);
}

.header, .header-mobile, .footer {
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.2s ease-in-out, color 0.2s;
}

.header a, .header-mobile a, .footer a {
  color: var(--text);
}

.tag {
  background-color: var(--tag);
  color: var(--text);
}

.link-btn {
  background-color: var(--card-bg);
  color: var(--card-text);
  transition: background-color 0.2s ease-in-out;
}

#link-btn:hover {
  background-color: var(--text-hover);
}

.post-card {
  background-color: var(--bg-2);
  color: var(--text-2);
  transition: background-color 0.2s ease-in-out;
}

.post-card:hover {
  background-color: var(--text-hover);
}

.main-wrapper {
  background-color: var(--bg-2);
}

.description-section {
  color: var(--text);
  background-color: var(--bg);
}

#menu-icon, .icon-mono {
  filter: var(--icon-filter);
  transition: filter 0.3s ease;
}

.icon-small {
  filter: var(--icon-filter-2);
  transition: filter 0.3s ease;
}

#change-color-btn:hover {
  background-color: var(--text-hover);
}

a {
  transition: transform 0.2 ease-in-out;
}

button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em;
  cursor: pointer;
  font-family: inherit;
  border: none;
}

select {
  padding: 0.5em;
  cursor: pointer;
  font-family: inherit;
  border: none;
}

option {
  padding: 0.5em;
  cursor: pointer;
  font-family: inherit;
  border: none;
}

ul, ol {
  padding-left: 1em;
}

blockquote {
  padding: 0.2em 0.5em 0.2em 0.5em;
}

img {
  height: auto;
  max-width: 100%;
  display: block;
}

hr {
  height: 0.2em;
  background-color: var(--text-2);
  border: none;
}

code {
  padding: 0 0.2em;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
  font-weight: bold;
  font-size: 1.1em;
  padding: 0.5em 0;
  border-bottom: 0.2em solid var(--text-2);
}

td {
  padding: 0.5em 0;
  font-size: 1.05rem;
  border-bottom: 0.1em solid var(--text-2);
}

td:last-child,
th:last-child {
  padding-left: 2rem;
}

table tr:last-child td {
  border-bottom: none;
}

@media (max-width: 768px) {
  img {
    max-width: 100%;
  }
}
.icon-link {
  display: flex;
  flex-direction: row;
  gap: 0.3em;
  align-items: center;
  width: fit-content;
}

.icon-link:hover {
  background-color: inherit;
}

.page-title {
  display: flex;
  flex-direction: row;
  gap: 0.3em;
  align-items: center;
  width: fit-content;
}

.description-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 15em;
  width: 100%;
  padding: 1em;
  gap: 1em;
  text-align: center;
}

.icon, .icon-mono {
  width: 26px;
  height: 26px;
}

.icon-big {
  width: 36px;
  height: 36px;
}

.icon-small {
  width: 20px;
  height: 20px;
}

.post-banner {
  max-width: none;
  width: 100%;
  height: 15em;
  object-fit: cover;
}

.post-info {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 0 0 1em 0;
  border-bottom: 0.3em solid var(--text-2);
}

.post-info-item, .post-tags {
  display: flex;
  flex-flow: row wrap;
  flex-direction: row;
  align-items: center;
  gap: 0.5em;
  overflow: hidden;
}

.posts-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
  gap: 1em;
  padding: 0 0.5em;
  align-content: center;
  justify-items: center;
}

.tag {
  display: inline-block;
  padding: 0.3em;
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-btn {
  display: inline-block;
  padding: 0.7em 1.5em;
  text-decoration: none;
}

#change-color-btn {
  border-radius: 100%;
}

.post-card {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 0.5em;
  text-decoration: none;
  width: auto;
  backface-visibility: hidden;
  border: 0.2em solid var(--text-2);
  box-shadow: 0.3em 0.3em 0px;
}

.card-banner {
  max-width: none;
  width: 100%;
  height: 8em;
  object-fit: cover;
}

.card-description, .card-title {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hamburger-menu-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: inherit;
  width: fit-content;
}

.hamburger-menu-btn:hover {
  background-color: inherit;
}

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 1em;
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}

.header-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

.header-mobile {
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  padding: 1em;
  width: auto;
  height: auto;
  box-sizing: border-box;
  overflow-y: auto;
  display: none;
  z-index: 100;
}

.header-mobile-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

@media (max-width: 768px) {
  .header {
    position: fixed;
    gap: 2em;
    flex-direction: column;
    transform: translateY(200%);
    top: 10%;
    left: 0;
    right: 0;
    bottom: 0;
    transition: transform 0.3s ease-in-out;
  }
  .header.open {
    transform: translateX(0);
  }
  body.open {
    overflow: hidden;
    height: 100vh;
  }
  body.open main {
    pointer-events: none;
    user-select: none;
    opacity: 0.2;
    transition: opacity 0.3s ease;
  }
  .header-nav {
    flex-direction: column;
  }
  .header-mobile {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
}
/* ========================================== main page ========================================== */
.main-wrapper {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  position: relative;
}

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3em 0 10em 0;
  gap: 2em;
}

/* ========================================== home page ========================================== */
.home-page {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 3em 0 10em 0;
}

.home-latest-project-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}

.home-recent-posts-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

/* ========================================== post page ========================================== */
.post {
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
  padding: 2.5em 1em 10em 1em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

/* ========================================== info page ========================================== */
.info-card {
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
  gap: 2em;
  border: 0.2em solid var(--text-2);
  box-shadow: 0.4em 0.4em 0em;
  padding: 1em;
}

@media (max-width: 425px) {
  .page {
    padding: 3em 0 15em 0;
  }
  .home-page {
    padding: 3em 0 15em 0;
  }
  .post {
    padding: 2.5em 1em 15em 1em;
  }
}
.footer {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1em;
  padding: 2.5em 1em;
  position: absolute;
  bottom: 0;
}

@media (max-width: 768px) {
  .footer {
    flex-direction: column;
    align-items: center;
  }
}

/*# sourceMappingURL=style.css.map */