/* --- FONTS --- */
@import url("https://fonts.googleapis.com/css2?family=Georgia:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Arial:wght@400;700&display=swap");

/* --- VARIABLES (color, font, transitions) --- */
:root {
  --black: #000000;
  --dark-bg: linear-gradient(to bottom, hsl(0, 0%, 10%), #000000);
  --filter-shadow: drop-shadow(0px 3px 20px rgba(0, 0, 0, 0.5));
  --font-family: "Arial", sans-serif;
  --font-size: 16px;
  --primary-color: #344f37;
  --secondary-color-glow: hsla(38, 47%, 39%, 0.5);
  --secondary-color: #926f34;
  --trans-fast: 0.15s ease-in-out;
  --white: #ffffff;
}

/* --- CSS RESET --- */

* {
  box-sizing: border-box;
  font-family: Georgia, "Times New Roman", Times, serif;
  margin: 0;
  padding: 0;
}

/* Utility: visually-hidden but available to screen readers and crawlers */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --- UNIVERSAL STYLES --- */

body {
  background-image: var(--dark-bg);
  color: var(--white);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 320px;
  position: relative;
}
h1 {
  color: var(--secondary-color);
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}
h2 {
  font-size: 1.5rem;
  font-style: italic;
  font-weight: bold;
  letter-spacing: 0.1rem;
  margin-bottom: 0.5rem;
}
h3 {
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
h4 {
  font-size: 1rem;
  font-weight: bold;
  color: var(--secondary-color);
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.1rem;
  margin-bottom: 0.5rem;
}
p,
ul,
li,
ol {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: left;
}
a {
  color: inherit;
  font-style: inherit;
  font-weight: inherit;
  text-decoration: inherit;
  font-family: inherit;
}
ul {
  margin-left: 2rem;
}
strong {
  color: var(--secondary-color);
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  text-decoration: inherit;
  text-transform: inherit;
}
.float-right {
  float: right;
}
.float-left {
  float: left;
}
u {
  text-decoration-color: var(--secondary-color);
  text-decoration: underline;
}

/* --- SHARED ANIMATIONS --- */
@keyframes shine-across {
  100% {
    left: 125%;
  }
}