:root {
  --palette-grey: #F5F5F0;
  --palette-tan: #E6D8C3;
  --palette-brown: #C2A68C;
  --palette-green: #5D866C;
}

* {
  margin: 0;
}

body {
  background-color: var(--palette-brown);

  font-family: "DM Sans", sans-serif;
}

nav {
  display: flex;
  flex-flow: row nowrap;

  background-color: var(--palette-brown);

  font-size: 1.25em;
}

nav a {
  padding: .75em 1.5em;

  text-decoration: none;
  color: black;
}

nav a:hover {
  background-color: var(--palette-tan);
}

main {
  min-height: 89vh;
  background-color: var(--palette-grey);
}

section {
  background-color: var(--palette-grey);

  font-family: Helvetica, sans-serif;
  font-size: 1.5em;
  padding: 2em;

  display: flex;
  flex-flow: column nowrap;
  gap: 1em;
}

section h2{
  padding-bottom: .75em;
}

section#previewsSection{
  padding-top: 10em;
  padding-bottom: 10em;
  
  background-image:
    url('./svg/indexPreviewsTop.svg'),
    url('./svg/indexPreviewsBottom.svg'),
    linear-gradient(10deg, var(--palette-green), var(--palette-green));

  background-repeat: no-repeat;
  background-position: top, bottom, center;

  position: relative;

  color: white;
}

section#previewsSection li{
  list-style: none;
}

section#previewsSection li a{
  color: white;
}

footer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;

  background-color: var(--palette-brown);

  padding: .25em 1em;
}