@import url('base/colors.css');
@import url('components/components.css');
@import url('components/header.css');
@import url('pages/home.css');
@import url('pages/about.css');
@import url('pages/projects.css');
@import url('pages/contact.css');
@import url('pages/draw.css');
@import url('pages/logs.css');

body {
  background-color: var(--background);
}

html, body.site {
  font-family: var(--body-font);
  color: var(--body-text);
  height: 100%;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--accent-font);
  color: var(--title-text);
}

h1 {
  margin-top: 0.2em;
}

h2 {
  margin-bottom: 0.3em;
}

body.site {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  align-items: center;
}

.site-content {
  flex: 2;
  padding: 1.2rem 0rem;
  width: 45rem;
}


/* for phones */
@media (max-width: 740px) {
  .site-content {
    width: 90vw;
    border-radius: 0;
  }
}

@media (max-width: 400px) {
  .site-content {
    width: 90vw;
  }
}