@import url('./themes.css');
@import url('./utils.css');

html {
  background-color: var(--prj-bg);
  color: var(--prj-text);

  /* Update font size based on screen width, source: https://matthewjamestaylor.com/responsive-font-size */
  font-size: calc(15px + 0.390625vw);
}

body {
  max-width: 95vw; /* leave some space in the end by default */
  margin: auto;
  padding: 15px 0;
}

section:not(:first-child) {
  margin-top: var(--prj-spacing-4);
}

/* Main content fix width, taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */

@media screen and (min-width: 640px) {
  body {
    min-width: 640px;
  }
}
@media screen and (min-width: 768px) {
  body {
    min-width: 768px;
  }
}
@media screen and (min-width: 1024px) {
  body {
    min-width: 1024px;
  }
}
@media screen and (min-width: 1280px) {
  body {
    min-width: 1280px;
  }
}
@media screen and (min-width: 1536px) {
  body {
    max-width: 1536px;
  }
}

a {
  color: var(--prj-link-text);
}

ul {
  /* Make the marker position is inside the container */
  list-style-position: inside;
  margin: 0;
}

li:not(:last-child) {
  margin-bottom: var(--prj-spacing-1);
}

.btn {
  padding: var(--prj-spacing-1);
}

.btn-primary {
  background-color: var(--prj--primary-bg);
  color: var(--prj--primary-text);
}