@font-face {
   font-family: 'DancingScript';
   src: url('/assets/fonts/DancingScript.ttf') format('truetype');
}

@font-face {
   font-family: 'Arima';
   src: url('/assets/fonts/Arima.ttf') format('truetype');
}

@font-face {
   font-family: 'Parkinsans';
   src: url('/assets/fonts/Parkinsans.ttf') format('truetype');
}

:root {
   --light-color: rgb(255, 255, 255);
   --dark-color: rgb(0, 0, 0);
   --primary-color: rgb(139, 64, 151);
   --secondary-color: rgb(210, 182, 120);

   --light-color-raw: 255, 255, 255;
   --dark-color-raw: 3, 0, 28;
   --dark-accent-raw: 0, 0, 0;
   --primary-color-raw: 139, 64, 151;
   --secondary-color-raw: 210, 182, 120;

   --primary-font: 'DancingScript';
   --secondary-font: 'Arima';
   --tertiary-font: 'Parkinsans';

   --box-shadow-dark-low: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
   --box-shadow-dark-medium: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
   --box-shadow-dark-large: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
   --box-shadow-dark-extra: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
   --box-shadow-dark-super: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;

}


/* ================================== *//* ================================== */
/* == Default styling =============== *//* ================================== */
/* ================================== *//* ================================== */


*, *::before, *::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	list-style: none;
	list-style-type: none;
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

html {
   font-size: 100%;
	box-sizing: inherit;
	scroll-behavior: smooth;
}

body {
   font-family: var(--primary-font);
   font-size: clamp(1rem, 2vw, 1.125rem);
   font-weight: 400;
   line-height: 1.5;
   color: var(--light-color);
   background-color: var(--dark-color);
}

main, section {
   overflow: hidden;
}

a, button {
   cursor: pointer;
   user-select: none;
   white-space: nowrap;
   border: none;
   outline: none;
   color: inherit;
   background: unset;
   transition: all 0.3s ease;
}

h1, h2, h3, h4, h5 {
   font-family: inherit;
   line-height: 1.25;
   text-wrap: balance;
   word-wrap: break-word;
}

p, li {
   font-family: inherit;
   line-height: 1.5;
   text-wrap: pretty;
   word-wrap: break-word;
}

img, svg, picture {
   max-width: 100%;
   height: auto;
   vertical-align: middle;
   object-fit: cover;
   background-size: cover;
   background-repeat: no-repeat;
}

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

.no-scroll {
   position: fixed;      
   width: 100%;
   overflow-y: scroll;   
}


/* ================================== *//* ================================== */
/* == Header, Navbar and Hero ======= *//* ================================== */
/* ================================== *//* ================================== */


/* Header, nav, logo */

#header {
   position: fixed;
   top: 0; left: 0;
   width: 100%; height: auto;
   z-index: 99999;
   transition: all 300ms ease;
}

#header #header_inner {
   display: flex; align-items: center;
   padding: 0.75rem 1.25rem; margin: auto;
   max-width: 1400px; height: 100%;
}

#logo {
   height: 100px;
   display: flex; align-items: center; margin-right: auto;
   transition: all 300ms ease;
}

#logo img {
   height: 100%; width: auto;
}

#nav {
   position: relative;
   display: flex; flex-direction: row; gap: 2rem; align-items: center; margin-left: auto;
   font-family: var(--tertiary-font);
}

#actions {
   display: none;
}

/* header on scroll */

#header.on-scroll {
   background-color: var(--dark-color);
}

#header.on-scroll #logo {
   height: 70px;
}

/* Hero */

#hero {
   padding-top: 300px; min-height: 100vh;
   background: url('/assets/media/hero.webp');
   background-position: center;
   background-size: cover;
}

#hero:after {
   content: '';
   position: absolute; top: 0; left: 0;
   width: 100%; height: 100%;
   background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.75) 0%,
      rgba(0, 0, 0, 0.9) 75%,
      rgba(0, 0, 0, 1) 95%
   );
}

#hero .post {
   max-width: 600px;
}


/* ================================== *//* ================================== */
/* == Navmenu & button ============== *//* ================================== */
/* ================================== *//* ================================== */


/* Navmenu */

@media screen and (max-width: 50rem) {
   #header #header_inner {
      padding: 1rem 1.25rem;
   }

   #nav {
      display: none;
      visibility: hidden;
   }

   #logo {
      height: 60px;
   }

   #header.on-scroll #logo {
      height: 40px;
   }
}

#menu {
   position: fixed;
   top: 0; left: 0;
   width: 100vw; height: 100vh;
   z-index: 9999;

   display: none; flex-direction: column; text-align: center; justify-content: center;
   gap: 1rem;

   background-color: var(--dark-color);
   font-family: var(--secondary-font);
   font-size: 1.7rem;
}

#menu.is-active {
   display: flex;
}

#menu .nav-item {
   border-bottom: 2px solid rgba(var(--primary-color-raw), 0.5);
   width: 250px; margin: 1rem auto;
}

@media (min-width: 50rem) {
   #menu {
      display: none;
      visibility: hidden;
   }
}

/* Button/burger */

.burger {
   cursor: pointer;
   position: relative;
   display: block;
   order: 1;
   z-index: 10;
   width: 2rem;
   height: 1rem;
   user-select: none;
   visibility: visible;
}

@media screen and (min-width: 50rem) {
   .burger {
      display: none;
      visibility: hidden;
   }
}

.burger-line {
   position: absolute;
   display: block;
   right: 0;
   opacity: 1;
   width: 100%;
   height: 2px;
   background-color: currentColor;
   transition: all 0.25s ease;
}

.burger-line:nth-child(1) {
   top: 0px;
}

.burger-line:nth-child(2) {
   top: 0.5rem;
   width: 70%;
}

.burger-line:nth-child(3) {
   top: 1rem;
}

.burger.is-active .burger-line:nth-child(1) {
   top: 0.5rem;
   transform: rotate(135deg);
}

.burger.is-active .burger-line:nth-child(2) {
   right: -1rem;
   opacity: 0;
}

.burger.is-active .burger-line:nth-child(3) {
   top: 0.5rem;
   transform: rotate(-135deg);
}


/* ================================== *//* ================================== */
/* == General styling/layout ======== *//* ================================== */
/* ================================== *//* ================================== */


/* Page */

.content {
   position: relative;
}

.container {
   position: relative;
   width: 100%; max-width: 1200px;
   margin: auto; justify-items: center;
   padding: 1.25rem;
   overflow: hidden;
}

.flex-row {
   display: flex; flex-direction: row; flex-wrap: wrap;
   justify-content: center; align-items: center; row-gap: 2.5rem; column-gap: 7.5rem;
}

.flex-col {
   display: flex; flex-direction: column;
   gap: 1.5rem; justify-content: center;
}

.section {
   position: relative;
   width: 100%; padding: 50px 0;
   font-family: var(--primary-font);
}

@media (max-width: 500px) {
   .section {
      padding: 25px 0;
   }
}

.section.dark { background-color: var(--dark-color); color: var(--light-color); }
.section.light { background-color: var(--light-color); color: var(--dark-color); }

.post {
   position: relative;
   display: flex; flex-direction: column;
   gap: 0.75rem; text-align: left;
   width: auto; flex: 1 1 500px; max-width: 500px;
   z-index: 5;
}

.article {
   position: relative;
   display: flex; flex-direction: column;
   gap: 0.75rem; text-align: center;
   width: 100%; max-width: 800px;
   margin: 1rem 0 2rem 0; 
   z-index: 5;
}

/* Cards */

.cards {
   position: relative;
   display: flex; flex-direction: row; flex-wrap: wrap; 
   justify-content: center; align-items: center;
   column-gap: 1rem; row-gap: 4rem;
   max-width: 1000px; width: 100%; margin: auto;
   z-index: 5;
}

.cards_swipetrack {
   position: relative;
   display: flex; flex-direction: row; gap: 1.5rem;
   max-width: 1000px; width: 100%; margin: auto;
   z-index: 5;
}

.card_dame {
   position: relative;
   min-width: 317.5px; min-height: 400px;
   border-bottom: 2px solid var(--primary-color);
   border-radius: 0.25rem;
}

.card_dame img {
   width: 100%; height: 100%;
}

.card_dame span {
   position: absolute;
   bottom: 0; left: 0;
   width: 100%; height: auto; padding: 1rem;
   font-family: var(--secondary-font); font-size: 1.5rem;
   z-index: 5;
}

.card_dame:after {
   content: '';
   position: absolute;
   top: 0; left: 0; 
   width: 100%; height: 100%;
   background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.6) 75%,
      rgba(0, 0, 0, 8) 95%
   );
}

.card_mini {
   position: relative;  display: flex; flex-direction: column; gap: 0;
   text-align: center; align-items: center; justify-content: center;
   min-width: 275px; max-width: 300px; min-height: 200px; 
}

.card_mini-img {
   position: relative;
   width: 165px; height: 165px; 
   margin-bottom: 1.5rem;
   border-radius: 999px;
   border: 2px solid var(--secondary-color);
   overflow: hidden;
}

.card_mini-img img {
   width: 100%; height: 100%;
}

.card_mini-img::after {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: 999px;
   background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 0.4) 75%,
      rgba(0, 0, 0, 0.6) 95%
   );
   pointer-events: none;
}

/* Carousel/swipetrack */

._swipetrack {
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
}
._swipetrack::-webkit-scrollbar{display:none;}
._swipetrack:active{cursor:grabbing;}

._swipecard {
  scroll-snap-align:start;
  overflow:hidden;
  position:relative;
  user-select:none;
  touch-action:pan-x;
}

._swipecard img{
  pointer-events:none;
  -webkit-user-drag:none;
}

._swipetrack{
  cursor: grab;
  user-select: none;
}
._swipetrack.is-dragging{
  cursor: grabbing;
  scroll-snap-type: none;
}

._swipetrack.is-autoplaying { scroll-snap-type: none; }
._swipetrack.is-teleporting { scroll-behavior: auto; } 


/* ================================== *//* ================================== */
/* == Footer & Extra's ============== *//* ================================== */
/* ================================== *//* ================================== */


.footer {
   padding: 100px 0;
}

.footer .container{
  align-items: flex-start; justify-content: center;
}

.footer .footer-col {
   display: flex; flex-direction: column;
   gap: 1.5rem; justify-content: center;
   max-width: 250px;
}

.footer .footer-col .flex-row {
   column-gap: 2.25em;
}

.footer li[data] {
   position: relative;
   margin-left: 2rem; margin-bottom: 0.25rem;
   font-weight: 500;
}

.footer li[data]:before {
   content: "";               
   font-family: "bootstrap-icons"; font-weight: 800;
   position: absolute;
   left: -2rem;
   display: inline-block;
}

.footer li[data="mail"]:before { content: '\F32F'; }
.footer li[data="phone"]:before { content: '\F5C1'; }
.footer li[data="location"]:before { content: '\F3E8'; }

@media (max-width: 1200px) {
   .footer .container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 600px) {
   .footer .container {
      display: grid;
      grid-template-columns: 1fr;
   }

   .footer .footer-col h1 {
      text-align: center;
   }
}


/* ================================== *//* ================================== */
/* == Buttons & Links =============== *//* ================================== */
/* ================================== *//* ================================== */


/* Layouts */

.btn-row {
   position: relative;
   display: flex; flex-direction: row; gap: 0.5rem; flex-wrap: wrap;
   margin: 1rem auto;
}

@media (max-width: 500px) {
   .btn-row.btn-row {
      justify-content: center;
   }
}

/* Buttons */

.btn {
   border: 2px solid var(--fill);
   border-radius: 100px;
   padding: 0.65rem 2.25rem;
   font-family: var(--secondary-font);
   font-size: clamp(0.9rem, 1vw + 0.6rem, 1.1rem); font-weight: 900;
   cursor: pointer;
}

/* Button - variants */

.btn-primary {
   --fill: var(--primary-color);
   --accent: var(--light-color);
}

.btn-secondary {
   --fill: var(--secondary-color);
   --accent: var(--dark-color);
}

.btn-ghost {
   --fill: rgba(156, 156, 156, 0.75);
   --accent: var(--light-color);
   background: var(--fill);
   color: var(--accent);
}

/* Button - styles */

.btn-solid {
   background: var(--fill);
   color: var(--accent);
}

.btn-outline {
   background: transparent;
   color: var(--fill);
}

/* Links */



/* Hover/Focus states */

.btn-outline:hover {
   background: var(--fill);
   color: var(--accent);
}

.btn-solid:hover {
   background: transparent;
   color: var(--fill);
}

.btn-ghost:hover {
   filter: brightness(0.5);
}

.nav-item:hover {
   color: var(--primary-color);
}

/* ================================== *//* ================================== */
/* == Forms & Inputs ================ *//* ================================== */
/* ================================== *//* ================================== */


/* Subscribe form */

.subscribe-merged {
   display: flex;
   align-items: stretch;
   max-width: 600px;
   gap: 0;
}

.subscribe-merged input {
   padding: 0.75rem 1.5rem;
   font-family: var(--secondary-font);
   font-size: clamp(0.9rem, 1vw + 0.6rem, 1.1rem); font-weight: 900;
   border: 2px solid var(--primary-color);
   color: var(--light-color);
   border-radius: 100px 0 0 100px;
   background: transparent;
   flex: 1;
   text-align: center;
}

.subscribe-merged .btn {
   border-radius: 0 100px 100px 0;
   white-space: nowrap;
}

@media (max-width: 450px) {
   .subscribe-merged {
      flex-direction: column;
   }

   .subscribe-merged input {
      border-radius: 20px 20px 0 0;
   }

   .subscribe-merged .btn {
      border-radius: 0 0 20px 20px;
   }
}


/* ================================== *//* ================================== */
/* == Utility & Helper classes ====== *//* ================================== */
/* ================================== *//* ================================== */


/* Fonts */

.primary-font { 
   font-family: var(--primary-font) 
}

.secondary-font { 
   font-family: var(--secondary-font) 
}

.tertiary-font { 
   font-family: var(--tertiary-font) 
}

.title-small {
  font-size: clamp(1.35rem, 1.08rem + 0.96vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
}

.title-medium {
  font-size: clamp(1.8rem, 1.26rem + 1.2vw, 2rem);
  font-weight: 600;
  line-height: 1.3;
}

.title-big {
  font-size: clamp(2.2rem, 1.38rem + 1.92vw, 2.7rem);
  font-weight: 700;
  line-height: 1.1;
}

.title-large {
  font-size: clamp(2.6rem, 1.75rem + 3.2vw, 4rem);
  font-weight: 700;
  line-height: 1.15;
}

.header-small {
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1rem);     
  font-weight: 600;
  line-height: 1.45;
}

.header-medium {
  font-size: clamp(1rem, 0.92rem + 0.5vw, 1.125rem);   
  font-weight: 600;
  line-height: 1.4;
}

.header-big {
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.25rem);   
  font-weight: 600;
  line-height: 1.35;
}

.header-large {
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.5rem);    
  font-weight: 700;
  line-height: 1.3;
}

.text-small { 
   font-size: clamp(0.85rem, 0.8rem + 0.25vw, 0.875rem); 
   line-height: 1.55; 
}

.text-medium { 
   font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1rem);     
   line-height: 1.6; 
}

.text-large { 
   font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.125rem);
   line-height: 1.6; 
}

/* Color */

.primary-color {
   color: var(--primary-color);
}

.secondary-color {
   color: var(--secondary-color);
}

.tertiary-color {
   color: var(--tertiary-color);
}

.primary-bg {
   background-color: var(--primary-color);
}

.secondary-bg {
   background-color: var(--secondary-color);
}

.tertiary-bg {
   background-color: var(--tertiary-color);
}

/* Aligning/positioning */

.text-center {
   text-align: center; 
}

.text-left {
   text-align: left; 
}

.text-right {
   text-align: right; 
}

.full-center {
   text-align: center; align-items: center; justify-content: center;
}

.full-center-h {
   text-align: center; justify-content: center;
}

.full-center-v {
   text-align: center; align-items: center;
}

.self-center {
   margin: auto;
}

.self-right {
   margin-right: 0; 
}

.self-left {
   margin-left: 0; 
}

@media (max-width: 500px) {
   .self-right {
      margin-right: auto; 
   }

   .self-left {
      margin-left: auto; 
   }
}