:root {
  --font-primary: "DM Mono", monospace;
  --font-secondary: "lust-sans", sans-serif;
  --color-light: #ffffff;
  --color-dark: #969696;
  --color-primary: #6b8771;
  --color-secondary: #e4f2e5;
  --spacing: 15px;
}

::-moz-selection {
  color: var(--color-light);
  background: var(--color-primary);
}

::selection {
  color: var(--color-light);
  background: var(--color-primary);
}

html, body {
  height: 100%;
}

body {
  background-color: var(--color-light);
  color: var(--color-dark);
  font: normal normal clamp(20px, calc(30vw/1920*100), 28px)/1.75 var(--font-primary);
}

a {
  border-bottom: 2px solid transparent;
  color: var(--color-primary);
  text-decoration: none;
  transition: border-color 0.35s;
  padding-bottom: 2px;
}
a:hover, a:active, a:visited {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-secondary);
}

figure, ul, li {
  margin: 0;
}

.page {
  overflow: hidden;
}

.col-lg-6 {
  padding-top: calc( var(--spacing) * 2 );
  padding-bottom: calc( var(--spacing) * 2 );
}

.hero {
  color: var(--color-light);
  user-select: none;
}
.hero .col-12 {
  background-image: url("../img/coffee.jpg");
  background-size: cover;
  background-position: center center;
  position: relative;
  height: 600px;
}
.hero .logo {
  margin-bottom: calc(var(--spacing) * 3);
  height: auto;
  width: clamp(240px, calc(380vw/1920*100), 380px);
}
.hero h1 {
  font-size: clamp(48px, calc(120vw/1920*100), 120px);
}
.hero h1, .hero h2 {
  font-family: var(--font-primary);
}
.hero a:hover {
  border-color: transparent;
}

.about .col-lg-6:first-child {
  background-image: url("../img/coffee-service.jpg");
  background-size: cover;
  background-position: center center;
}
.about h2 {
  font-size: clamp(42px, calc(100vw/1920*100), 100px);
  color: var(--color-light);
  line-height: 1.65em;
  user-select: none;
}

.contact {
  background-color: var(--color-secondary);
  color: var(--color-primary);
}
.contact h2 {
  font-size: clamp(42px, calc(100vw/1920*100), 100px);
  line-height: 1.65em;
}
.contact h2, .contact p {
  margin-bottom: clamp(30px, calc(45vw/1920*100), 45px);
}
.contact .map {
  width: 100%;
  min-height: 100%;
}

iframe {
  user-select: none;
}

.instagram .col-12 {
  padding-top: clamp(calc(var(--spacing)*2), calc(90vw/1920*100), calc(var(--spacing)*6));
  padding-bottom: clamp(calc(var(--spacing)*2), calc(90vw/1920*100), calc(var(--spacing)*6));
}
.instagram h3 {
  font-family: var(--font-primary);
  margin-bottom: inherit;
}
.instagram .bi-instagram {
  height: 24px;
  width: 24px;
}
.instagram .illustration {
  margin-top: clamp(30px, calc(90vw/1920*100), 90px);
  user-select: none;
}
.instagram .illustration img {
  height: auto;
  width: clamp(225px, calc(360vw/1920*100), 360px);
}

.swiper {
  margin: clamp(15px, calc(105vw/1920*100), 105px);
}
.swiper a {
  background-color: var(--color-light);
  border: none;
  padding: inherit;
}

.swiper-slide {
  align-items: center;
  display: flex;
  justify-content: center;
  user-select: none;
}
.swiper-slide img {
  aspect-ratio: 1/1;
  display: block;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.35s;
  width: 100%;
}
.swiper-slide img:hover {
  opacity: 0.75;
}

.swiper-button-next, .swiper-button-prev {
  color: var(--color-light);
  transition: color 0.35s;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
  color: var(--color-primary);
}
.swiper-button-next::after, .swiper-button-prev::after {
  font-size: 36px;
}

.footer {
  border-top: 1px solid var(--color-dark);
  font-size: clamp(18px, calc(24vw/1920*100), 22px);
  margin: 0 calc(var(--spacing)*-1);
  padding-top: clamp(30px, calc(75vw/1920*100), 75px);
}
.footer li {
  border-right: 1px solid var(--color-dark);
  padding-right: calc( var(--spacing) / 3 * 4);
}
.footer li:last-child {
  border: none;
}

@media (max-width: 991px) {
  a {
    border-width: 1px;
  }

  .contact .map {
    min-height: 100vh;
  }

  .footer li {
    border: none;
    display: inherit;
    margin-right: 0 !important;
    padding: inherit;
    padding-bottom: calc(var(--spacing) / 3);
  }
  .footer li:last-child {
    padding-bottom: 0;
  }
}
@media (min-width: 768px) {
  .about p, .contact p {
    width: 85%;
  }

  .col-lg-6 {
    padding-left: 0;
    padding-right: 0;
  }
}