/* ABOUTME: Global legacy CSS extracted from Jekyll SCSS for Dead Alive 2019 pieces */
/* ABOUTME: Contains base variables, typography, layout styles shared across all pieces */

/* CSS Variables (converted from SCSS) */
:root {
  --header-font: 'SportingGrotesqueGras';
  --white: #f6f6f6;
  --black: #000000;
  --red: #b33f4c;
  --backgroundColor: var(--white);
  --bodyColor: var(--black);
  --bodyFont: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.5rem;
  --spacing-6: 2rem;
}

/* Base Styles */
body {
  background: var(--backgroundColor);
  color: var(--bodyColor);
  font-family: var(--bodyFont);
  margin: 0;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

a:hover {
  font-style: italic;
}

a, p {
  color: black;
  letter-spacing: 1px;
  font-family: sans-serif;
  line-height: 1.33rem;
}

/* Responsive Typography */
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}

@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
}

/* Video Styles */
#myVideo {
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

iframe#myVideo {
  height: 100%;
  width: 100%;
  border: none;
  display: block;
}

/* Typography Classes */
.header-font {
  font-family: var(--header-font);
}

.description {
  padding: 0 3rem;
  line-height: 1.5;
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* Footer Styles */
footer .logo {
  color: white;
  background-color: white;
  height: 5rem;
  display: block;
  margin: 3rem auto 1rem;
  border-radius: 50%;
  padding: 0.25rem;
}

footer {
  background-color: black;
  margin-top: 15rem;
  font-size: 1.33rem;
  padding: 5rem;
  color: white;
}

.author {
  font-weight: bold;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 2rem;
  padding-right: 1rem;
}