:root {
  --bg_h: #1d2021;
  --bg: #282828;
  --bg_s: #32302f;
  --bg1: #3c3836;
  --bg2: #504945;
  --bg3: #665c54;
  --bg4: #7c6f64;

  --fg: #fbf1c7;
  --fg1: #ebdbb2;
  --fg2: #d5c4a1;
  --fg3: #bdae93;
  --fg4: #a89984;

  --red: #fb4934;
  --green: #b8bb26;
  --yellow: #fabd2f;
  --blue: #83a598;
  --purple: #d3869b;
  --aqua: #8ec07c;
  --gray: #928374;
  --orange: #fe8019;

  --red-dim: #cc2412;
  --green-dim: #98971a;
  --yellow-dim: #d79921;
  --blue-dim: #458588;
  --purple-dim: #b16286;
  --aqua-dim: #689d6a;
  --gray-dim: #a89984;
  --orange-dim: #d65d0e;
}

@font-face {
  font-family: "Iosevka";
  src: url("/fonts/Iosevka-01.ttf") format("truetype");
}

html,
body {
  height: 100%;
}

html {
  font-family: Iosevka;
  background: var(--bg);
  color: var(--fg1);
  height: 100%;
  padding: 0;
}

body {
  font-size: 2rem;
  margin: 0 auto;
  max-width: 85rem;
}

pre,
code {
  font-family: Iosevka;
  font-size: 0.95em;
  background: var(--bg1);
}

.page-wrapper {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 640px) {
  .page-wrapper {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.page-header,
.page-footer {
  flex-grow: 0;
  flex-shrink: 0;
}

.page-header {
  margin: 4% 0;
}

.page-main {
  line-height: 1.5;
  width: 100%;
  margin: 0 auto;
  flex-grow: 10;
}

.page-main a:visited {
  color: var(--orange-dim);
}

.page-footer {
  text-align: center;
}

.content {
  margin-bottom: 2rem;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 25px;
}
.navbar__right {
  display: flex;
}

a {
  font-size: 1em;
  text-decoration: none;
  color: var(--blue);
}

.navbar__right a {
  display: block;
  position: relative;
  margin-right: 30px;
}

.navbar__right a::after {
  content: "";
  position: abosolute;
  display: block;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 1.5px;
  background-color: var(--green-dim);
  transform-origin: bottom right;
  transition: transform 0.5s ease;
  transform: scaleX(0);
}

.navbar__right a:hover::after {
  transform-origin: bottom left;
  transform: scaleX(1);
}

.me-photo {
  width: 15rem;
  height: auto;
}