@import "modern-normalize.css";
@import "_layout.css";
@import "_text.css";
@import "_forms.css";
@import "_colours.css";

/* page-specific styles */
@import "_page.css"; /* all articles */
@import "_section.css"; /* section indices */
@import "_page_tangara_index.css";

/*
Breakpoints: 599px, 900px, 1200px.
(We can't use CSS vars for this, so we're just hardcoding
it everywhere for now. Sorry.)
 */

html {
  height: 100%;
  margin: 0;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > nav {
  flex-shrink: 0;
}
body > main {
  flex: 1 0 auto;
}
body > footer {
  flex-shrink: 0;
}

main img {
  max-width: 100%;
}

nav, footer[role='contentinfo'] {
  display: block;
  padding: 1rem 3rem;
  background-color: var(--purple-pastel-grey);
  color: var(--grey);
}

nav .nav-arrow {
  display: inline-block;
  margin-right: 0.7rem;
}
nav .nav-divider {
  font-size: 130%;
  color: var(--purple-pastel-grey-light); 
  margin: 0 0.3rem;
  vertical-align: middle;
}

/* TODO: what kinds of headers is this for specifically; just the big Tangara intro one? */
header {
  text-align: center;
  margin: 5rem;
}

footer[role='contentinfo'] {
  margin-top: 5rem;
}
footer[role='contentinfo'] .credits {
  font-size: 1.3rem;
  text-align: center;
}

.button.cta {
  align-self: flex-end;
}
.button.cta:after {
  content: ' >';
  margin-left: 0.5rem;
}