/* styles.css 
*  Global Color Theme
*  ex: `  color: var(--red);`
*/
:root {
  --bg-one: #111111; /* black */
  --bg-two: #303030; /* gray  */

  --fg-one: #ffffff; /* white */
  --fg-two: #f3f3f3; /* light gray */

  --blue: #1e90ff;
  --red: #e63946;
  --green: #2a9d8f;
}

/* General Site */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;

  background-color: var(--bg-one);
  color: var(--fg-one);
}

/* container centered at 85% width */
.container {
  width: 70vw;
  margin: 0 auto;
}

h2 {
  font-size: 3rem;
}

/* scroll.js */
/* base state: slightly shrunken + faded out */
.scroll-section {
  transform: scale(0.85);
  opacity: 0.5;
  transition: 
    transform 0.6s cubic-bezier(.22,.61,.36,1),
    opacity   0.6s cubic-bezier(.22,.61,.36,1);
  transform-origin: center center;
}

/* when in view: full size + fully opaque */
.scroll-section.in-view {
  transform: scale(1);
  opacity: 1;
}