/********************************************************/
/* Styling & Bootstrap adaptions for fonsendievanons.be */
/* Author: Sil @ LUID.pro                               */
/********************************************************/

/* Bootstrap Icons Font */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");

:root {
	--bs-primary: #4e1621 !important;
	--bs-primary-rgb: 78, 22, 33 !important;
	--bs-secondary: #f6f0f0 !important;
	--bs-secondary-rgb: 246, 240, 240 !important;
	--width: 100%;
	--height: 100%;
	--border-width: 200px;
	--border-height: 200px;
}


/* ALGEMEEN */
body {
	background: #fff url('../img/background.png') !important;
	background-position: left top;
	background-repeat: repeat;
}

img {
	border: none;
	text-decoration: none;
}

h1, h2, h3 {
	font-family: 'Streetwear', Helvetica;
}

.mb-n2 {
	margin-bottom: -0.5rem;
}

.min-vh-75 {
	min-height:75vh;
}

.toTop, .toTop:hover, .toTop:active {
  position: fixed;
  width: 50px;
  bottom: 90px;
  right: 0px;
  z-index: 9999;
  border: none;
  color: var(--bs-primary);
  cursor: pointer !important;
  font-size: 2rem;
  font-weight: bold;
}

/* FONTS */

/* Streetwear */
@font-face {
    font-family: 'Streetwear';
    src: url('../fonts/Streetwear.eot');
    src: local('Streetwear'), local('Streetwear'),
        url('../fonts/Streetwear.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Streetwear.woff2') format('woff2'),
        url('../fonts/Streetwear.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* BUTTONS */
.btn-primary {
	color: #f6f0f0 !important;
    background: #4e1621 !important;
    border-color: #4e1621 !important;
    --hover-color: #f6f0f0 !important;
    --bs-btn-hover-bg: #0b5ed7 !important;
    --bs-btn-hover-border-color: #0a58ca !important;
    --bs-btn-focus-shadow-rgb: 49,132,253 !important;
    --bs-btn-active-color: #f6f0f0 !important;
    --bs-btn-active-bg: #0a58ca !important;
    --bs-btn-active-border-color: #0a53be !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
}

/*    MAIN    */
main, nav {
	max-width:1280px;
}

.nav-link {
	color: rgb(var(--bs-primary-rgb)) !important;
	background-color: rgb(var(--bs-secondary-rgb));
	padding-right:0.9rem !important;
}

.active, .nav-link:hover{
	color: rgb(var(--bs-secondary-rgb)) !important;
	background-color: rgb(var(--bs-primary-rgb)) !important;
	margin-bottom: -1rem;
}

/*  INHOUD  */
.stroke {
  /* https://www.coding-dude.com/wp/css/css-stroke-text/ */
  --stroke-color: rgb(58, 17, 66);
  --stroke-width: .50rem;
  text-shadow: calc(var(--stroke-width) * 1) calc(var(--stroke-width) * 0) 0 var(--stroke-color),calc(var(--stroke-width) * 0.9659) calc(var(--stroke-width) * 0.2588) 0 var(--stroke-color),calc(var(--stroke-width) * 0.866) calc(var(--stroke-width) * 0.5) 0 var(--stroke-color),calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * 0.7071) 0 var(--stroke-color),calc(var(--stroke-width) * 0.5) calc(var(--stroke-width) * 0.866) 0 var(--stroke-color),calc(var(--stroke-width) * 0.2588) calc(var(--stroke-width) * 0.9659) 0 var(--stroke-color),calc(var(--stroke-width) * 0) calc(var(--stroke-width) * 1) 0 var(--stroke-color),calc(var(--stroke-width) * -0.2588) calc(var(--stroke-width) * 0.9659) 0 var(--stroke-color),calc(var(--stroke-width) * -0.5) calc(var(--stroke-width) * 0.866) 0 var(--stroke-color),calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * 0.7071) 0 var(--stroke-color),calc(var(--stroke-width) * -0.866) calc(var(--stroke-width) * 0.5) 0 var(--stroke-color),calc(var(--stroke-width) * -0.9659) calc(var(--stroke-width) * 0.2588) 0 var(--stroke-color),calc(var(--stroke-width) * -1) calc(var(--stroke-width) * 0) 0 var(--stroke-color),calc(var(--stroke-width) * -0.9659) calc(var(--stroke-width) * -0.2588) 0 var(--stroke-color),calc(var(--stroke-width) * -0.866) calc(var(--stroke-width) * -0.5) 0 var(--stroke-color),calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * -0.7071) 0 var(--stroke-color),calc(var(--stroke-width) * -0.5) calc(var(--stroke-width) * -0.866) 0 var(--stroke-color),calc(var(--stroke-width) * -0.2588) calc(var(--stroke-width) * -0.9659) 0 var(--stroke-color),calc(var(--stroke-width) * 0) calc(var(--stroke-width) * -1) 0 var(--stroke-color),calc(var(--stroke-width) * 0.2588) calc(var(--stroke-width) * -0.9659) 0 var(--stroke-color),calc(var(--stroke-width) * 0.5) calc(var(--stroke-width) * -0.866) 0 var(--stroke-color),calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * -0.7071) 0 var(--stroke-color),calc(var(--stroke-width) * 0.866) calc(var(--stroke-width) * -0.5) 0 var(--stroke-color),calc(var(--stroke-width) * 0.9659) calc(var(--stroke-width) * -0.2588) 0 var(--stroke-color)
}

/* NAVIGATIE */

.nav-item, .nav-item a {
	font-family: 'Streetwear', Helvetica;
	font-size: clamp(1rem, 2.5vw, 1.3rem);
}

/* Selfie Gallery */
/* https://codepen.io/gabrielajohnson/pen/EMVxEL */
.gallery{
  position:relative;
  height:100%;
  width:100%;
}

.gallery:after{
  content:'';
}

.gallery .shadow{
  position: absolute;
  top: 500px;
  left: 100px;
  width: 500px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(#805d78,rgba(0,0,0,0) 70%);
}

.gallery img{
  width:var(--width);
  height:var(--height);
}

.gallery .clipped-border{
  -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
   clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
   padding:5px;
   background:linear-gradient(grey,lightgrey);
   width:var(--border-width);
   height:var(--border-height);
   max-height:200px;
   max-width:200px;
   height: var(--height);
   width:var(--width);
   transition:transform 0.2s;
   position:absolute;
   cursor:pointer;
}



.gallery .clipped-border:before{
  content:'';
  position:absolute;
  opacity:0.5;
  width:275px;
  height:50px;
  background:white;
  top:0;
  left:0;
  z-index:1;
  transform:rotate(45deg);
  transition:transform 0.5s;
}

.gallery .clipped-border:hover:before{
  transform: translate(-100px,400%) rotate(45deg);
  transition:transform 0.5s;
}

.gallery .clipped-border:nth-child(2){
  top:0;
  left:180px;
}

.gallery .clipped-border:nth-child(3){
  top:0;
  left:360px;
}

.gallery .clipped-border:nth-child(4){
  top:150px;
  left:90px;
}

.gallery .clipped-border:nth-child(5){
  top:150px;
  left:270px;
}

.gallery .clipped-border:nth-child(6){
  top:300px;
}

.gallery .clipped-border:nth-child(7){
  top:300px;
  left:180px;
}

.gallery .clipped-border:nth-child(8){
  top:300px;
  left:360px;
}

.gallery .clipped {
-webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);

}

.gallery .clipped-border:hover{
  transform:scale(1.2);
  transition:transform 0.2s;
  z-index:10;
}


@media screen and (max-width:500px){
	.gallery .clipped-border{
    width:100px;
    height:100px;
  }

  .gallery .clipped-border:nth-child(2){
    top:0;
    left:100px;
  }

  .gallery .clipped-border:nth-child(3){
    left:200px;
  }

  .gallery .clipped-border:nth-child(4){
    top:82px;
    left:50px;
  }

  .gallery .clipped-border:nth-child(5){
    top:82px;
    left:150px;
  }
}