:root {
  /* Color Palette */
  --black: #333231;
  --red: #e55;
  --white: #fafefd;
  --gray-80: #bbb;
  --light-blue: #2196f3;
}

[data-theme="light"] {
  /* Background */
  --background:
    linear-gradient(135deg, transparent 4px, var(--white) 5px, transparent 5px),
    linear-gradient(45deg, transparent 4px, var(--white) 5px, transparent 5px),
    linear-gradient(to bottom right, var(--white) 0%, #ddd 100%);

  /* DOM Elements */
  --heading-color: var(--black);
  --font-color: var(--black);
  --primary-color: var(--light-blue);
  --inactive-color: var(--gray-80);
}

[data-theme="dark"] {
  /* Background */
  --background:
    linear-gradient(135deg, transparent 4px, black 5px, transparent 5px),
    linear-gradient(45deg, transparent 4px, black 5px, transparent 5px),
    linear-gradient(to bottom right, #090909 0%, black 100%);

  /* DOM Elements */
  --heading-color: var(--white);
  --font-color: var(--white);
  --primary-color: var(--light-blue);
  --inactive-color: var(--gray-80);
}

html {
  font-family: Quicksand;
}

body {
  margin: 0;
  height: 100vh;
}

#container {
  display: grid;
  grid-gap: 20px;
  min-height: 100vh;
  grid-template-rows: 100px 5fr 1fr;
  grid-template-areas:
    'header'
    'content'
    'footer';
}

#header {
  grid-area: header;
  clip-path: polygon(0 0, 100% 0, 100% 40px, 0 100%);
  position: sticky;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: max-content max-content;
}

#instructions p {
  margin-top: 5px;
  font-variant: small-caps;
  justify-content: start;
}

#theme-selector {
  display: grid;
  grid-gap: 0;
  grid-template-columns: 1fr 1fr;
}

.theme-selector-button {
  margin: 0;
  height: 25px;
  display: inline-block;
  padding: 5px 20px;
  border: none;
  box-shadow: inset -1px -1px rgba(0,0,0,0.5);
  font-weight: bold;
}

#light-theme-button {
  border-radius: 5px 0 0 5px;
  background: var(--gray-80);
  color: var(--black);
}

#light-theme-button:hover {
  filter: brightness(150%);
}

#light-theme-button:active, #light-theme-button.selected {
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
  filter: brightness(90%);
}

#dark-theme-button {
  border-radius: 0 5px 5px 0;
  background: var(--black);
  color: var(--white);
  filter: brightness(50%);
}

#dark-theme-button:hover {
  filter: brightness(90%);
}

#dark-theme-button:active, #dark-theme-button.selected {
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
  filter: brightness(30%);
}

#content {
  grid-area: content;
  background-image: var(--background);
  background-size: 7px 7px, 7px 7px, cover;
  background-attachment: fixed;
  display: grid;
  justify-items: center;
  align-items: center;
  color: var(--font-color);
  margin-top: -80px;
  margin-bottom: -60px;
}

#content h1 {
  font-size: 60px;
  font-weight: 300;
}

#footer {
  grid-area: footer;
  justify-content: end;
  clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
}

#footer p {
  text-align: right;
}

#header, #footer {
  padding: 20px;
  background: var(--black);
  display: grid;
  color: var(--white);
  z-index: 1;
}