@font-face {
  font-family: 'Fira Code';
  src: url('/res/fonts/fira-code/FiraCode-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

:root {
  --page-width: 72rem;
}

.light-theme {
  --primary-color: #222;
  --primary-bg-color: #fffef9;

  --secondary-color: #008533;
  --secondary-color-hover: #003D17;

  --fill-bg-color: #FBF8EB;

  --footer-bg-color: #333;
  --footer-text-color: #fff;
  --footer-link-color: #00E056;
  --footer-link-color-hover: #00B344;
}


.dark-theme {
  --primary-color: #ddd;
  --primary-bg-color: #20232e;

  --secondary-color: #00E056;
  --secondary-color-hover: #00B344;

  --fill-bg-color: #191C24;

  --footer-bg-color: #222;
  --footer-text-color: #fff;
  --footer-link-color: #00E056;
  --footer-link-color-hover: #00B344;
}


body {
  font-family: 'Fira Code', monospace;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Takes full height of the browser window */
  margin: 0;
  padding: 0;
  font-size: 16px;
}

main.main {
  --fill-color: var(--fill-bg-color);
  flex: 1;

  & .main-container {
    padding:  2rem 4rem;
    width: 100%;
    max-width: var(--page-width);

    background-color: var(--primary-bg-color);
    color: var(--primary-color);

    padding: 1rem 4rem;
  }
}

.content-wrapper {
  width: 100%;
  background-color: var(--fill-color);
  color: var(--footer-text-color);

  display: flex;
  justify-content: center;

  & .content-container {
    width: 100%;
    max-width: 72rem;
  }
}

footer.footer {
  --fill-color: var(--footer-bg-color);

  & .footer-container {
    display: flex;
    align-items: center;

    padding: 1rem 2rem;

    & :where(.footer-spacer, .footer-right) {
      flex: 1;
    }

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

    & .footer-right {
      text-align: right;
    }
  }

  & a {
    color: var(--footer-link-color);

    &:hover {
      color: var(--footer-link-color-hover);
    }
  }
}

.btn, .btn-s {
  --btn-color: black;
  --btn-color-hover: #333;

  font-family: 'Fira Code', monospace;
  font-size: 0.85rem;
  background: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: .0625rem solid var(--btn-color);
  border-radius: .25rem;
  padding: .25rem .5rem;

  color: var(--btn-color);

  &:hover {
    color: var(--btn-color-hover);
    border-color: var(--btn-color-hover);
  }

  &:active {
    transform: translateY(1px); /* Slight click effect */
  }
}
.btn.btn-s {
  border-radius: .25rem;
  padding: .125rem .25rem;
}

.main .btn {
  --btn-color: var(--secondary-color);
  --btn-color-hover: var(--secondary-color-hover);
}
.footer .btn {
  --btn-color: var(--footer-link-color);
  --btn-color-hover: var(--footer-link-color-hover);
}

.none-theme .btn {
  border: black 
}

code {
  font-family: 'Fira Code', monospace;
  font-variant-ligatures: discretionary-ligatures;
  -webkit-font-feature-settings: "tnum", "liga", "calt";
  font-feature-settings: "tnum", "liga", "calt";
}

a {
  color: var(--secondary-color);

  &:hover {
    color: var(--secondary-color-hover);
  }
}

ul {
  & li {
    padding: 0.125rem;
  }
}

hr.hr {
  margin-bottom: 2rem;
}