body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	transition: background-color 0.5s ease;
	background-repeat: repeat;
	background-position: center;
	background-size: cover;
	background-color: var(--bg-white);
	caret-color: var(--pink);;
	scroll-behavior: smooth;
	scroll-padding: 10rem;
	cursor: url('/assets/cursor/arrow/cursor.svg') 10 5, url('/assets/cursor/arrow/cursor.png') 10 5, pointer;
	}

	
*:active {
	cursor: url('/assets/cursor/arrow/click.svg') 10 5,
	        url('/assets/cursor/arrow/click.png') 10 5,
	        pointer !important;
}	

	
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	cursor: url('/assets/cursor/arrow/cursor.svg') 10 5, url('/assets/cursor/arrow/cursor.png') 10 5, pointer;
	}
	
	
:root {
--black: #212121;
--grey: rgba(255, 255, 255, 0.8);
--light-grey: rgb(121, 121, 121);

--bg-white: #fbfbfb;
--bg-light: #e8e8e8;
--yellow: #F3FC58;
--pink: #ff39a4;
--purple: #9980FF;
--deep-purple: #0c003d;

}

svg:focus {outline: none;}


::-moz-selection { /* Code for Firefox */
    color: var(--pink);
    background: var(--yellow);
}

::selection {
    color: var(--pink);
    background: var(--yellow);
}


.no-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}



   .areyouok {
    background: var(--pink);
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    position: fixed;    
    display: none;
    pointer-events: auto;
    }




a{cursor: url('assets/misc/cursor.svg'), url('assets/misc/cursor.png')30 30, pointer;}
a:active{cursor: url('assets/misc/click.svg'), url('assets/misc/click.png') 30 30, pointer !important;}



h2{
	font-family: 'MabryPro';
	font-weight: 400;
	text-wrap:pretty;
	font-size: 2.3vw;
	text-align: left;
	line-height: 2.4vw;
	}

#content h1 {
font-family: 'MabryPro';
font-weight: 500;
font-size: 2vw;
text-wrap: pretty;
line-height: 2.4vw;
margin: 0px;
color: var(--deep-purple);
letter-spacing: -0.25px;

}


#content h2 {
font-family: 'MabryPro';
font-weight: 400;
font-size: 2vw;
text-wrap: pretty;
line-height: 2.4vw;
    color: var(--deep-purple);
}



h2#challenge{
	margin: 0px;
}



h3{
font-family: 'MabryPro';
font-weight: 400;
font-size: 1.2vw;
line-height: 1.6vw;
margin: 0px;
padding: 0px;
}





p {
text-wrap: pretty;
font-family: 'abc-diatype';
font-style: normal;
line-height: clamp(1.1vw, 1.8vw, 2.8vw);
letter-spacing: 0.2px;
font-size: clamp(0.8vw, 1.3vw, 2vw);
text-align: left;

}










picture img{
	width: 100%;
	z-index: 10;
}


img {
    width: 100%;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    pointer-events: none;
}
  
  
  .saturation-1 {
filter: saturate(1.1);
}

  .saturation-2 {
filter: saturate(1.3);
}
 
   
.mousedown-cursor {
    cursor: url('/assets/misc/click.svg'), url('/assets/misc/click.png') 30 30, pointer !important;
}      
      
#content{
	width: 100vw;
	}




.centered-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.centered-content img {
    display: block;
    margin: auto;
}

#loading {
height: 20vw;
width: 100%;
z-index: 9999999;
position: fixed;
bottom: 0;
}

#loading img {
width: 10vw;
display: block;
max-width: 200px;
}













.section-container {
display: flex;
flex-wrap: wrap;
margin-left: 4vw;
margin-right: 4vw;
margin-bottom: 40vh;
margin-top: 10vw;
/* position: relative; */
}

.section {
}

/* Set specific width values for each section */
.section.dynamic {
/*     flex: 0 0 47vw;  */
    flex: 0 0 46vw; 
}

.section#proposition {
    flex: 0 0 26vw; /* 30% of the viewport width */
}

.section.sticker-skills {
 flex: 0 0 10vw; /* 10% of the viewport width */
}














.project {
display: flex;
font-family: 'abc-diatype';
font-style: normal;
  line-height:clamp(1.1vw, 2vw, 2.8vw);
  letter-spacing: 0.2px;
  font-size: clamp(0.8vw, 1.4vw, 2vw);/* Adjust the minimum, preferred, and maximum font size as needed */
word-wrap: break-word;

}

.project-right-section {
  flex: 1; /* Takes up remaining space */
  padding: 10px; /* Add padding */
}

.project-right-align {
flex: 0 0 42vw;
text-align: left;
padding: 2vw 5vw 4vw 0vw;
}




.project-left-section {
  flex: 1; /* Takes up remaining space */
  padding: 10px; /* Add padding */
}

.project-left-align {
/* flex: 0 0 53vw; */
text-align: left;
padding: 2vw 0vw 2vw 3vw;
}




.two-column-text-container {
display: flex;
height: auto;
padding: 4vw 4vw 4vw 4vw;
}





.text-columns {
    column-count: 2;
    column-gap: 4vw;
    width: 67vw;
}


 .two-column-text-left {
    flex: 1;
  }

  .two-column-text-right {
    flex: 1;
  }
  
  
.text-columns p {
    margin: 0;
    break-inside: avoid-column; /* Prevent paragraphs from breaking across columns */
    widows: 2; /* Ensure at least 2 lines appear at the top of the next column */
    orphans: 2; /* Ensure at least 2 lines appear at the bottom of the current column */
    word-wrap: break-word; /* Break long words to prevent single words on a line */
}





video {
/* aspect-ratio: 4/3; */
background-color: transparent;
width: 100vw;
margin: auto;
max-width: 100%;
/* border-radius: 10px; */
overflow: hidden;
    filter: contrast(110%) brightness(105%) saturate(110%);
}




.video-container video {
	width: 100vw;
	height: 100%;
	}








/* Ensure the image is initially hidden */
.fade-in-viewport {
    width: 100%;
    opacity: 0;
    transform: translateY(4vw);
    transition: opacity .6s ease-in-out, transform .6s ease-in-out; }

/* Make the image visible and return it to its original position when the in-viewport class is added */
.fade-in-viewport.in-viewport {
    opacity: 1;
    transform: translateY(0);
}








.main-content {
    width: 100%;
    overflow-x: hidden; 
    overflow-y: visible;
    display: flex;
    justify-content: center;
	color: var(--black);
}





.main-content {
    width: 100%;
    overflow-x: hidden; 
    overflow-y: visible;
    display: flex;
    justify-content: center;
	color: var(--black);
}




.media-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 2vw;
}

.media-item {
flex-basis: 46vw;
margin-bottom: 5vw;
}


.media-item p,
.media-item-1 p,
.media-item-2 p,
.media-item-3 p {
    margin-top: 1.5vw;
}

     
     
     
     
     
.image-container,
.video-container {
    position: relative;
    overflow: hidden;
}

.image-container picture, .video-container video {
    width: 100%;
    height: auto;
    border-radius: 10px;
}



.media-item picture {
    width: 100%;
    height: 60vw;
}

.media-item picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-item video {
	    border-radius: 10px;
    width: 100%;
    height: 60vw;
    object-fit: cover;
    top: 0;
    left: 0;
}


.media-item picture > * {
border-radius: 10px;
}















.media-container-3 {
display: flex;
flex-wrap: wrap;
gap: 2vw;
justify-content: space-between;
padding: 3vw;
}



.media-item-3 {
    flex: 1 1 calc(33.333% - 2vw); /* Adjusted to allow three items per row with gaps */
    box-sizing: border-box;
    padding: 0;
}


.img-flex-3 img{
	border-radius: 10px;
}


.media-item picture > * {
	border-radius: 10px;
}

svg.vennio-date {
background-image: url('../../assets/images/vennio/gradient.svg');
width: 100%;
height: 30vw;
border-radius: 10px;
}


.img-flex-2-wrapper {
	width: calc(100% - 4vw);
	max-width: 100vw;
	display: flex;
	justify-content: space-between;
	}

.img-flex-2 {
	width: calc(51% - 2vw);
	margin: 0vw;
	}

.img-flex-2-wrapper p {
	line-height: 4vw;
	font-size: 2.8vw;
	padding: 1vw 0vw 2vw 0vw;
	margin: 0vw 1vw 0vw 1vw;;
	}

.img-flex-2-wrapper picture > * {
	font-family: 'abc-diatype';
	font-style: normal;
	line-height: clamp(1vw, 2.2vw, 2.4vw);
	letter-spacing: 0.2px;
	font-size: clamp(0.8vw, 1.8vw, 2vw);
	border-radius: 10px;
	}





.overlay {
    position: relative;
}


.img-flex-2 img {
    width: 100%; /* Set the width of images to 100% of their container */
    height: auto; /* Maintain aspect ratio */
}














  
.two-column-container {
display: flex;
width: 100vw;
padding: 0;
color: var(--black);
margin: 0vw 0vw 2vw 0vw;
}

.two-column-container h2 {
padding: 0vw 0vw 0vw 4vw;
text-align: left;
line-height: 2.4vw;
width: 40vw;
align-self: flex-start;
}






  .two-column-title {
    flex: 0 0 50vw; 
  }

  .two-columns {
    flex: 2;
    display: flex;
    gap: 20px;
      height: auto;
  }

.two-column {
flex: 0 0 calc(22vw - 0px);
padding: 0px;
border-radius: 0px;
}









picture:first-of-type {
z-index: 9;

}




.container-sticky {
    display: flex;
color: var(--black);    
}










.project-title{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
color: var(--black);
z-index: 9;
padding: 0vw 0vw 2vw 0vw;
background-color: blue;
	}

.project-title:first-of-type {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; 
color: var(--black);
z-index: 9;
padding: 15vw 0vw 2vw 0vw;
}




.project-title-section-sticky {
    flex: 1;
    padding: 6vw 4vw 0vw 4vw;
    position: sticky;
    top: 0;
    height: 100vh; 
    overflow-y: auto; 
}

.images-section-sticky {
    flex: 2;
    padding: 20px;
}

.images-section-sticky img {
    display: block;
    width: 100%; 
    margin-bottom: 20px;
}

.images-section-sticky img:first-child {
    padding: 6vw 0vw 0vw 0vw;
}