:root {
  --brand-white-color: #f0eee9;
  --brand-gray-1-color: #d5d7d1;
  --brand-gray-2-color: #bac0bd;
  --brand-gray-3-color: #a0aaaa;
  --brand-gray-4-color: #8a9297;
  --brand-gray-5-color: #787b83;
  --brand-gray-6-color: #68646c;
  --brand-gray-7-color: #584e53;
  --brand-gray-8-color: #463b3a;
  --brand-black-color: #322923;
  --brand-primary-color: #946037;
  --brand-secondary-color: #d9b48f;
  --brand-tertiary-color: #e7ceb5;
}

/* ==========================================================================
   PROMPT FONT FAMILY - @FONT-FACE DECLARATIONS
   ========================================================================== */
@font-face {
  font-family: "Prompt";
  src: url("./static/font/Prompt-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Prompt";
  src: url("./static/font/Prompt-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: "Prompt";
  src: url("./static/font/Prompt-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Prompt";
  src: url("./static/font/Prompt-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: "Prompt";
  src: url("./static/font/Prompt-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Prompt";
  src: url("./static/font/Prompt-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Prompt";
  src: url("./static/font/Prompt-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Prompt";
  src: url("./static/font/Prompt-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Prompt";
  src: url("./static/font/Prompt-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Prompt";
  src: url("./static/font/Prompt-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Prompt";
  src: url("./static/font/Prompt-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Prompt";
  src: url("./static/font/Prompt-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Prompt";
  src: url("./static/font/Prompt-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Prompt";
  src: url("./static/font/Prompt-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Prompt";
  src: url("./static/font/Prompt-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Prompt";
  src: url("./static/font/Prompt-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: "Prompt";
  src: url("./static/font/Prompt-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Prompt";
  src: url("./static/font/Prompt-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
}

* {
  box-sizing: border-box;
  font-family: "Prompt", sans-serif;
}

/* ==========================================================================
   1. FIXED LAYOUT STRUCTURE (Sticky Footer & Full Height)
   ========================================================================== */
body {
  margin: 0;
  min-height: 100vh;

  display: flex;
  flex-direction: column;

  color: var(--brand-black-color);
  background-color: var(--brand-white-color);

  --pattern-color: rgb(from var(--brand-gray-1-color) r g b / 0.5);
  --size: 100px;
  --width: calc(2 * var(--size));
  --height: calc(1.5 * var(--size));

  background-image:
    linear-gradient(45deg, var(--pattern-color) 2%, transparent 2%),
    linear-gradient(-45deg, var(--pattern-color) 2%, transparent 2%),
    linear-gradient(135deg, var(--pattern-color) 2%, transparent 2%),
    linear-gradient(-135deg, var(--pattern-color) 2%, transparent 2%),
    linear-gradient(45deg, var(--pattern-color) 2%, transparent 2%),
    linear-gradient(-45deg, var(--pattern-color) 2%, transparent 2%),
    linear-gradient(135deg, var(--pattern-color) 2%, transparent 2%),
    linear-gradient(-135deg, var(--pattern-color) 2%, transparent 2%);

  background-size: var(--width) var(--height);

  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    var(--size) calc(var(--height) / 2),
    var(--size) calc(var(--height) / 2),
    var(--size) calc(var(--height) / 2),
    var(--size) calc(var(--height) / 2);

  animation: moveStaggeredMesh 60s linear infinite;
}

/* ==========================================================================
   2. MAIN CONTAINER & RESPONSIVENESS
   ========================================================================== */
.main-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  padding: 2rem;

  margin: 0 auto;

  flex-grow: 1;

  width: 100%;
  max-width: 800px;
  text-align: center;
}

/* ==========================================================================
   3. TYPOGRAPHY & ELEMENTS
   ========================================================================== */
.primary {
  color: var(--brand-primary-color);
}

h1,
h1 * {
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.2;
  margin: 0;
}

p {
  font-weight: 400;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.6;
  color: var(--brand-gray-8-color);
  margin: 0;
  max-width: 600px;
}

img.logo {
  height: clamp(100px, 20vh, 200px);
  width: auto;
}

/* ==========================================================================
   4. STICKY FOOTER RULES
   ========================================================================== */
footer {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--brand-gray-5-color);
  text-align: center;
  padding: 1.5rem 1rem;
  width: 100%;
  margin-top: auto;
}

@media (max-width: 480px) {
  .main-container {
    gap: 2rem;
    padding: 2rem;
  }
}

@keyframes moveStaggeredMesh {
  from {
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      var(--size) calc(var(--height) / 2),
      var(--size) calc(var(--height) / 2),
      var(--size) calc(var(--height) / 2),
      var(--size) calc(var(--height) / 2);
  }
  to {
    background-position:
      var(--width) calc(0px - var(--height)),
      var(--width) calc(0px - var(--height)),
      var(--width) calc(0px - var(--height)),
      var(--width) calc(0px - var(--height)),
      calc(var(--size) + var(--width)) calc((var(--height) / 2) - var(--height)),
      calc(var(--size) + var(--width)) calc((var(--height) / 2) - var(--height)),
      calc(var(--size) + var(--width)) calc((var(--height) / 2) - var(--height)),
      calc(var(--size) + var(--width)) calc((var(--height) / 2) - var(--height));
  }
}

/* ==========================================================================
   CONTACT SECTION & EMAIL LINK STYLING
   ========================================================================== */

.main-container p:last-of-type {
  margin-top: 1rem;
  font-weight: 400;
  color: var(--brand-gray-7-color);
}

.main-container p a[href^="mailto:"] {
  color: var(--brand-primary-color);
  text-decoration: none;
  font-weight: 500;

  border-bottom: 1px solid var(--brand-secondary-color);
  padding-bottom: 2px;

  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}

.main-container p a[href^="mailto:"]:hover {
  color: var(--brand-black-color);
  border-bottom-color: var(--brand-primary-color);
}