@import url(./fonts/Manrope/Manrope-VariableFont_wght.ttf);

:root {
  --primary-color: #38462b;
  --secondary-color: #f0ba58;
  --secondary-color-dark: #886a29;
  --font-family: "Manrope", sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.5;
  --spacing-unit: 8px;
}

body,
* {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  margin: 0;
  padding: 0;
  background-color: var(--primary-color);
}
body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--secondary-color);
  margin-top: calc(var(--spacing-unit) * 2);
  margin-bottom: var(--spacing-unit);
}
p {
  margin-bottom: calc(var(--spacing-unit) * 2);
}
a {
  color: var(--secondary-color);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.image img {
  display: block;
  margin: auto;
  width: 300px;
  height: auto;
}
.text {
  text-align: center;
  margin: calc(var(--spacing-unit) * 4);
  max-width: 900px;
  position: relative;
}
hr {
  border: none;
  height: 3px;
  background-color: var(--secondary-color);
  width: 120px;
  margin: 30px auto;
  box-shadow: 0 2px 8px rgba(240, 186, 88, 0.3);
}
h1 {
  text-align: center;
  font-size: 4.5em;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-shadow:
    -3px -3px 0 var(--secondary-color-dark),
    3px -3px 0 var(--secondary-color-dark),
    -3px 3px 0 var(--secondary-color-dark),
    3px 3px 0 var(--secondary-color-dark),
    -3px 0 0 var(--secondary-color-dark),
    3px 0 0 var(--secondary-color-dark),
    0 -3px 0 var(--secondary-color-dark),
    0 3px 0 var(--secondary-color-dark),
    0 6px 15px rgba(0, 0, 0, 0.4),
    0 8px 20px rgba(240, 186, 88, 0.3);
}
h2 {
  font-size: 1.5em;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  opacity: 0.95;
  margin-top: 25px;
  line-height: 1.6;
}
@media screen and (max-width: 1024px) {
  body {
    flex-direction: column;
    padding: calc(var(--spacing-unit) * 4);
  }
}
@media screen and (max-width: 600px) {
  h1 {
    font-size: 2.25em;
    letter-spacing: 0.02em;
  }
  .text {
    margin: calc(var(--spacing-unit) * 2);
    max-width: 100%;
  }
  .image img {
    width: 250px;
    height: auto;
  }
}