/* =========================
Variables
========================= */
:root {
  --color-bg: #EEE7DA;
  --color-bgbody: #F7F3EA;
  --color-text: #1A1917;
  --color-line: #B8B2A8;
  --color-hover: #8F8578;

  --transition-speed: 0.3s;
}

/* =========================
Fonts
========================= */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
}

/* =========================
Tags
========================= */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;

  background-color: var(--color-bgbody);
  color: var(--color-text);

  font-family: "Inter", Arial, sans-serif;
}

header,
footer {
  background-color: var(--color-bg);
  color: var(--color-text);
  border-bottom: 5px solid var(--color-line);

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.grid_header > :nth-child(2) svg,
.grid_footer > :nth-child(2) svg {
  width: 100px;
  height: auto;
  display: block;
  color: var(--color-text);
}

footer {
  background-color: var(--color-hover);
  border-bottom: none;
  border-top: 5px solid var(--color-line);
}

h1,
h2,
h3,
a,
nav a,
button {
  font-family: "Space Grotesk", Arial, sans-serif;
  text-decoration: none;
  color: var(--color-text);
}

main {
  display: flex;
  flex-direction: column;
}

header img,
footer img {
  width: 100px;
  height: auto;
  display: block;
}

a h2 {
  background-color: var(--color-bgbody);
  border-radius: 7px;
  font-size: clamp(38px, 4vw, 65px);
  color: var(--color-text);
  padding: 10px 15px;

  transition: var(--transition-speed);
}

a h2:hover {
  background-color: var(--color-hover);
  color: var(--color-bgbody);
}

/* =========================
Classes
========================= */
.section-line {
  border: none;
  height: 6px;
  background-color: var(--color-line);
  margin: 0;
}

.grid_header,
.grid_footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  padding: clamp(2px, 3vw, 60px) 9%;
}

.grid_header > :nth-child(1),
.grid_footer > :nth-child(1) {
  justify-self: start;
}

.grid_header > :nth-child(2),
.grid_footer > :nth-child(2) {
  justify-self: center;
}

.grid_header > :nth-child(3),
.grid_footer> :nth-child(3) {
  justify-self: end;
}

footer .main-nav,
.main-nav {
  display: grid;
  gap: clamp(3px, 0.45vw, 9px);

  transition: clolor var(--transition-speed) ease;
} 

.main-nav a {
  transition: var(--transition-speed);
}

.main-nav a:hover {
  color: var(--color-hover);
}

footer .main-nav a {
  transition: var(--transition-speed);
}

footer .main-nav a:hover {
  color: var(--color-bg);
}

.hero {
  position: relative;
  width: 100%;
  margin-left: 0;
  overflow: hidden;
}

.hero video {
  width: 100%;
  height: auto;
  display: block;
}

.hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  color: var(--color-bg);
}

.hero h1 {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(1.8rem, 6.5vw, 6.5rem);
  margin: 0;
  color: var(--color-text);
}

.hero p {
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(2rem, 3.5vw, 2.5rem);
  margin: 1rem 0 2rem;
  color: var(--color-text);
}

.hero a {
  color: var(--color-bg);
  text-decoration: none;
  color: var(--color-text);
}

.hero a:hover {
  color: var(--color-line);
  text-decoration: none;
}

.social {
  display: flex;
  align-items: center;
  gap: 15px;

  padding-top: 4%;

  transition: color var(--transition-speed) ease;
}

.icon {
  width: 32px;
  height: 32px;
}

.main-nav a.active {
  font-weight: 700;
  border-bottom: 2px solid currentColor;
  pointer-events: none;
}

.hero-picture {
  position: relative;
  width: 100%;
  padding: 3%;
  box-sizing: border-box;
}

.hero-picture img {
  width: 100%;
  height: auto;
  display: block;
  border: 5px solid var(--color-line);
  border-radius: 5px;
  box-sizing: border-box;
}

.hero-picture a {
  position: absolute;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  color: var(--color-bg);

  top: 61.803%;
  left: 15%;
}

.darker {
  filter: brightness(0.75);
}

/* Contact/Social Hover sauber */
.social {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-top: 4%;

  color: var(--color-text);
  text-decoration: none;

  transition: color var(--transition-speed) ease;
}

.social svg,
.social span {
  transition: color var(--transition-speed) ease;
}

.grid_header .contact .social:not(:nth-child(2)):hover {
  color: var(--color-hover);
}

.grid_footer .contact .social:not(:nth-child(2)):hover {
  color: var(--color-bg);
}

/* =========================
IDs
========================= */