@font-face {
  font-family: "hobo_stdmedium";
  src: url("inc/fonts/hobo-std-font-webfont.woff2") format("woff2"),
    url("inc/fonts/hobo-std-font-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Sour Gummy";
  src: url("inc/fonts/SourGummy-Italic.woff2") format("woff2"),
    url("inc/fonts/SourGummy-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Sour Gummy";
  src: url("inc/fonts/SourGummy-Regular.woff2") format("woff2"),
    url("inc/fonts/SourGummy-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --primary: rgb(112, 165, 53);

  --lightbackground: #c2a990;

  --darkbackground: #191919;

  --black: #000000;

  --light: rgb(255, 255, 255);

  --globalfont: "hobo_stdmedium";
  --paragraphfont: cursive;

  --blur: blur(20px);
  --shadow: -10px 10px 5px var(--darkbackground);
  --shadowblack: -10px 10px 5px var(--black);
}

html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--globalfont);
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--black);
  color: var(--light);
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

a {
  text-decoration: none;
  color: var(--light);
}

ul {
  list-style: none;
}

p {
  font-family: "Sour Gummy";
  font-optical-sizing: auto;
  /* font-style: normal; */
  font-style: italic;
  font-size: 1.1rem;
  padding: 15px;
}

/* --- Spacer Section --- */

.spacer {
  aspect-ratio: 900/50;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: transparent;
  z-index: 1;
}

.spacer-section {
  background-image: url("img/webspacer.svg");
}
.footerspacer {
  background-image: url("img/footerspacer.svg");
}

.flip {
  transform: rotate(180deg);
}

.offset-top {
  margin-top: -4%;
}

.offset-bottom {
  margin-bottom: -4%;
}

/* ---- Main Content ---- */

#about,
#services,
#gallery,
#contact {
  margin-top: -3px;
}

.chapter {
  text-align: center;
  display: flex;
  justify-content: center;
  padding: 30px;
}

/* --- About Section --- */

#about {
  scroll-margin-top: -90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  min-height: 120dvh;
  background: url(img/bgwhite.webp);

  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: top;
  z-index: -1;
}

.bgfilter {
  background: rgb(25, 25, 25, 0.2);
  backdrop-filter: blur(3px);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

#about .bgfilter {
  background: linear-gradient(
    90deg,
    rgb(25, 25, 25, 0.8),
    rgb(25, 25, 25, 0.5),
    rgb(25, 25, 25, 0.1),
    rgb(25, 25, 25, 0),
    rgb(25, 25, 25, 0),
    rgb(25, 25, 25, 0.1),
    rgb(25, 25, 25, 0.5),
    rgb(25, 25, 25, 0.8)
  );
}

#about .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0;
  min-height: 120dvh;
  width: 100%;
}

.column-fixed {
  display: block;
  position: fixed;
  top: 0;
  z-index: -1;
  max-width: 600px;
  margin: 30px;
  color: var(--light);
  text-align: center;
}

.frame-content {
  box-shadow: var(--shadow);
  background: rgb(25, 25, 25, 0.6);
  padding: 20px;
  margin-top: 15dvh;
}

.column-fixed h2 span {
  margin-left: 4px;
}

/* --- Services Section --- */

#services {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  z-index: 1;
  gap: 2rem;
  min-height: 100dvh;
  height: 100%;
  background: url(img/bgblack.webp);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

#services .bgfilter {
  background: linear-gradient(
    180deg,
    rgb(25, 25, 25, 1),
    rgb(25, 25, 25, 0.5),
    rgb(25, 25, 25, 0),
    rgb(25, 25, 25, 0),
    rgb(25, 25, 25, 0),
    rgb(25, 25, 25, 0),
    rgb(25, 25, 25, 0.5),
    rgb(25, 25, 25, 1)
  );
  /* backdrop-filter: blur(3px); */

  width: 100%;
  height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#services .column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 0 60px 0;
  width: 70%;
  height: 100%;
  gap: 2rem;
}

#services .row {
  display: flex;
  justify-content: center;

  gap: 2rem;
}

#services .row img {
  box-shadow: var(--shadowblack);
  height: auto;
  object-fit: cover;
  width: 40%;
}

.row.reverse {
  flex-direction: row-reverse;
}

.column-content {
  box-shadow: var(--shadowblack);
  box-shadow: var(--shadowblack);
  background-color: var(--darkbackground);
  padding: 20px;
}

/* --- Gallery Section --- */

#gallery {
  scroll-margin-top: -90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 120dvh;
  background: url(img/bgwhite.webp);
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  background-size: cover;
  background-position: bottom;
  z-index: -1;
}

.gallery-wrapper {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  margin-bottom: 60px;
  gap: 2rem;
}

.gallery-content {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 3rem;

  max-width: 1224px;
}

.image {
  max-height: auto;
  max-width: 300px;
  box-shadow: var(--shadow);
}

/* --- Contact Section --- */

#contact {
  width: 100%;
  min-height: 600px;
  background-color: var(--darkbackground);
  padding: 30px 0 90px 0;
  z-index: 1;
}

.contact-content {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.contact-content .wrapper {
  width: 90%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2rem;
  margin: 30px 0 50px 0;
}

.map {
  aspect-ratio: 3/2;
  height: 500px;
  box-shadow: var(--shadowblack);
}

.map iframe {
  border: none !important;
  filter: invert(90%);
  user-select: none;
  width: 100%;
  height: 100%;
}

.contact-cards {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.card {
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadowblack);
  backdrop-filter: brightness(120%);
  color: var(--light);
  aspect-ratio: 1/1;
  height: 100%;
  width: min-content;
  transition: 0.5s;
}

.card:hover {
  box-shadow: none;
}

/* --- Footer Section --- */

footer {
  width: 100%;
  background-color: var(--black);
  font-weight: bold;
  text-align: center;
  user-select: none;
  font-size: 1.1rem;
}
footer .socials {
  padding: 20px;
}

footer .logo-bottom {
  color: var(--light);
  cursor: pointer;
}

footer .logo-bottom span {
  color: var(--primary);
  margin-left: 3px;
}

/* ---- Responsivenes ---- */

@media (max-width: 1024px) {
  .row {
    flex-direction: column;
    align-items: center;
    /* width: 85%; */
  }

  .row.reverse {
    flex-direction: column;
    align-items: center;
    /* width: 85%; */
  }

  #services .row img {
    width: 100%;
  }

  #services .column {
    width: 85%;
  }

  .image {
    width: 85%;
  }

  #gallery {
    scroll-margin-top: -40px;
  }

  #contact .wrapper {
    width: 85%;
    flex-direction: column;
  }

  .map {
    height: 350px;
  }

  .contact-cards {
    flex-direction: row;
  }

  .card {
    width: 100%;
    height: min-content;
  }
}