:root {
  --outer-bg: #0b0810;
  --inner-bg: #14101a;

  --gold: #d6b84c;
  --gold-bright: #e6c95c;
  --gold-dim: #9e8738;

  --line: #352d1b;
  --light: #eee6c9;
}


/* =========================
   BASIC PAGE
   ========================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background: var(--outer-bg);
  color: var(--gold);

  font-family: monospace;
  font-size: 16px;
  line-height: 1.4;
}


/* =========================
   CENTRAL DREAM SPACE
   ========================= */

.dream-space {
  width: 1000px;
  max-width: calc(100% - 100px);

  min-height: 100vh;

  margin: 0 auto;

  background: var(--inner-bg);
}


/* =========================
   HEADER
   ========================= */

header {
  padding: 45px 50px 30px;

  border-bottom: 1px solid var(--line);
}

header h1 {
  font-weight: normal;
  color: var(--gold-bright);
}

header p {
  color: var(--gold-dim);
}


/* =========================
   NAVIGATION
   ========================= */

nav {
  margin-top: 25px;
}

nav a {
  white-space: nowrap;
}


/* =========================
   LINKS
   ========================= */

a {
  color: var(--gold-bright);
  text-decoration: none;
}

a:hover {
  color: var(--light);
  text-decoration: underline;
}


/* =========================
   TEXT
   ========================= */

h1,
h2 {
  font-weight: normal;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.1rem;
  letter-spacing: 0.12em;
}

p {
  max-width: 750px;
}


/* =========================
   MAIN
   ========================= */

main {
  padding: 0 50px;
}


/* =========================
   SECTIONS
   ========================= */

section {
  margin: 80px 0;
}

section h2 {
  color: var(--gold-bright);

  border-bottom: 1px solid var(--line);

  padding-bottom: 8px;
  margin-bottom: 25px;
}


/* =========================
   DREAMS
   ========================= */

#dreams {
  border-left: 1px solid var(--gold-dim);
  padding-left: 30px;
}


/* =========================
   LISTS
   ========================= */

ul {
  padding-left: 25px;
}

li {
  margin-bottom: 5px;
}


/* =========================
   FOOTER
   ========================= */

footer {
  border-top: 1px solid var(--line);

  margin-top: 110px;
  padding: 25px 50px;

  color: var(--gold-dim);
  font-size: 0.8em;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 700px) {

  .dream-space {
    width: 100%;
    max-width: none;
  }

  header {
    padding: 30px 20px 20px;
    font-weight: bold;
  }

  main {
    padding: 0 20px;
  }

  footer {
    padding: 20px;
  }

  section {
    margin: 60px 0;
  }

}