/* font import */
@import url('https://fonts.googleapis.com/css2?family=Titan+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Edu+QLD+Beginner:wght@400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Oswald:wght@200..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

@font-face {
  font-family: 'Rubik';
  src: url('assets/styles/fonts/Rubik-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; /* supports all weights from 100 to 900 */
  font-style: normal;
}

/* Italic Variable Font */
@font-face {
  font-family: 'Rubik';
  src: url('assets/styles/fonts/Rubik-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
}

@font-face {
  font-family: 'RadioGrotesk';
  src: url('./fonts/RadioGrotesk-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MonumentExtended';
  src: url('./fonts/MonumentExtended-Ultrabold.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
}

/* * {
  border: 1px solid red !important;
} */

/* css roots */
:root {
  --main-font: 'Rubik', sans-serif;
}

/* styles */

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  font-family: var(--main-font);
  background-color: #e2e2e2; /* example grey, change as needed */
}

.navbar {
  background-color: #ffffff; /* example grey, change as needed */
  padding: 8px 10px;
  font-weight: bold;
  font-family: var(--main-font);


}






.navbar-menu {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.navbar-menu li {
  margin-right: 20px;
}

.navbar-menu li.nav-right {
  margin-left: auto; /* pushes this item to the far right */
  margin-right: 0;
}

.navbar-menu a {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
}


.image-grid {
  display: flex;
  flex-direction: column;  /* Stack images vertically */
  padding: 0;
  margin: 0;
  gap: 2px; /* Remove any gap between images */

}

.image-grid a {
  display: block;
}

.image-grid img, .image-grid video {
  width: 100%;             /* Take full width of container */
  height: 500px;            /* Keep original aspect ratio */
  object-fit: cover;       /* Ensures consistent appearance if cropped */
  display: block;
}

.cukovy-img { object-position: center 10%; }
.babyark-img { object-position: 20% center; }
.costume-design-img { object-position: center 90%; } /* fine-tune horizontally */
.image-grid .nivea-video {
  height: 400px;          /* let it keep its aspect ratio */
  /* object-fit: contain;   no cropping */
  object-position: 50% 50%;
}
.algoflex-img { object-position: center 90%; }
.upcycled-img { object-position: 27% 20%; }
.image-grid .johnnie-walker-video {
  height: 350px;          /* let it keep its aspect ratio */
  /* object-fit: contain;   no cropping */
  object-position: 50% 50%;
}.red-img { object-position: 20% 60%; }



.content-stack{
  display:flex;
  flex-direction:column;
  padding: 10px;

}

.section h1.name{
  line-height:1.1;
  margin-top : 0px;
  margin-bottom:5px;
  font-weight:700;
}

.section h2{
  line-height:1.2;
  margin:0 0 10px;
  font-weight:700;
}

.section h3{
  font-size: var(--h3);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.section p, .section li{
  font-size: var(--body);
  line-height:1.65;
  margin:0;
}


/* Behance line */
.behance a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Education list */
.edu-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.edu-list li strong{ font-weight:600; }


/* slider */


/* slider */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}
.slider {
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
  margin-top : 40px;
}
.slider::before, .slider::after {
/*   background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); */
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.slider::before {
  left: 0;
  top: 0;
}
.slider .slide-track {
  animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 14);
}
.slider .slide {
  height: 100px;
  width: 350px;
  padding-left: 20px;
}

.slide img {
  height: 60px; /* Adjust this as needed */
  width: auto;  /* Keeps the logo proportions */
  object-fit: contain;
  padding: 10px; /* Optional: adds spacing inside */
}


/* footer */
.footer {
  font-family: sans-serif;
  padding-top: 10px;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding-bottom: 20px;
  text-align: left;
}

.footer-section {
  flex: 1 1 300px; /* grow, shrink, and base width */
  max-width: 400px;
}

.footer-section h4 {
  margin-bottom: 8px;
  font-size: 1rem;
  text-transform: uppercase;
}

.footer-section p,
.footer-section a {
  margin: 0;
  font-size: 0.9rem;
  color: #000000;
  text-decoration: none;
}

.footer-section a:hover {
  color: #444444;
}

.footer-bottom {
  text-align: center;
  font-size: 0.8rem;
  background-color: #ffffff;
  color: #575757;
  width: 100%;
  padding: 5px;
}

.email-axel a {
  color: #000000;
  text-decoration: none;
}



.photo-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* center horizontally */
  gap: 5px; /* space between images */
}

.photo-container img, .photo-container video {
  max-width: 100%;
  height: auto;
}

.description-container_cukovy, .description-container_babyark, .description-container_nivea {
  padding-left: 10px;
  padding-right: 10px;
}

.photo-container img.medium-zoomed-image {
  height: 400px;
  object-fit: cover;
  
}

.photo-container img.big-zoomed-image {
  height: 600px;
  object-fit: cover;
}

.photo-container img.slight-zoomed-image {
  height: 400px;
  object-fit: cover;
}

.photo-container img.medium-vertical-cropped {
  height: 450px;
  width : 100%;
  object-fit: cover;
}

.photo-container img.slight-vertical-cropped {
  height: 600px;
  width : 100%;
  object-fit: cover;
}

.photo-container img.big-vertical-cropped {
  height: 300px;
  width : 100%;
  object-fit: cover;
}

/* Specific focus positions */
.focus-center       { object-position: 50% 50%; }
.focus-slight-bottom { object-position: 50% 63%; }
.focus-left         { object-position: 0% 50%; }
.focus-slight-left  { object-position: 30% 50%; }
.focus-very-slight-left { object-position: 40% 50%; }
.focus-right        { object-position: 100% 50%; }
.focus-slight-right { object-position: 70% 50%; }
.focus-top          { object-position: 50% 0%; }
.focus-bottom       { object-position: 50% 100%; }
.focus-right-top    { object-position: 80% 20%; }
.focus-left-bottom  { object-position: 10% 90%; }



.award-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
 width : 100%;
  margin: 30px auto;
}

.award-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1; /* ensures square shape */
  object-fit: contain;
}




.arrow-icon {
  width: 15px;
  height: 15px;
}


.small-hr {
  width: 50px;
  background-color: #000000;
  margin: 10px 10px; /* centers the line */
}

.designer-info {
  margin-bottom : 10px;
}

.image-grid {
display: flex;
flex-wrap: wrap;
gap: 5px;
justify-content: center;
}

.grid-img {
width: 200px;
height: 140px;
object-fit: cover;
position: relative;
}

.masonry-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}

.masonry-grid img {
  margin-top : 20px;
height: auto;
transition: transform 0.3s ease;
object-fit: cover;
position: relative;
}


.vertical-image {
  width: 110px;

}

.big-vertical-image {
  width: 200px;

}

.w-medium {
  max-height: 150px;
  width: auto ;
  
}

.w-small {
  max-height: 120px;
  width: auto ;
  
}

/* Pure CSS chaos */
.masonry-grid img:nth-child(1)  { transform: rotate(-8deg) translate(-8px, 4px); z-index: 2; }
.masonry-grid img:nth-child(2)  { transform: rotate(6deg) translate(12px, -5px); z-index: 1; }
.masonry-grid img:nth-child(3)  { transform: rotate(-5deg) translate(-6px, 3px); z-index: 3; }
.masonry-grid img:nth-child(4)  { transform: rotate(7deg) translate(8px, -4px); z-index: 1; }
.masonry-grid img:nth-child(5)  { transform: rotate(-7deg) translate(-10px, 5px); z-index: 2; }
.masonry-grid img:nth-child(6)  { transform: rotate(4deg) translate(6px, -2px); z-index: 1; }
.masonry-grid img:nth-child(7)  { transform: rotate(-6deg) translate(-5px, 7px); z-index: 3; }
.masonry-grid img:nth-child(8)  { transform: rotate(5deg) translate(7px, -3px); z-index: 2; }
.masonry-grid img:nth-child(9)  { transform: rotate(-4deg) translate(-7px, 6px); z-index: 1; }
.masonry-grid img:nth-child(10) { transform: rotate(3deg) translate(6px, -5px); z-index: 2; }
.masonry-grid img:nth-child(11) { transform: rotate(-3deg) translate(-4px, 4px); z-index: 1; }
.masonry-grid img:nth-child(12) { transform: rotate(8deg) translate(8px, -6px); z-index: 3; }
.masonry-grid img:nth-child(13) { transform: rotate(-2deg) translate(-6px, 4px); z-index: 2; }
.masonry-grid img:nth-child(14) { transform: rotate(6deg) translate(10px, -4px); z-index: 1; }
.masonry-grid img:nth-child(15) { transform: rotate(-5deg) translate(-8px, 5px); z-index: 3; }
.masonry-grid img:nth-child(16) { transform: rotate(7deg) translate(6px, -3px); z-index: 2; }
.masonry-grid img:nth-child(17) { transform: rotate(-6deg) translate(-5px, 6px); z-index: 1; }
.masonry-grid img:nth-child(18) { transform: rotate(4deg) translate(7px, -2px); z-index: 2; }
.masonry-grid img:nth-child(19) { transform: rotate(-4deg) translate(-6px, 5px); z-index: 3; }
.masonry-grid img:nth-child(20) { transform: rotate(5deg) translate(9px, -6px); z-index: 1; }
  .masonry-grid img:nth-child(21) { transform: rotate(-5deg) translate(9px, -6px); z-index: 1; }
.masonry-grid img:nth-child(22) { transform: rotate(5deg) translate(9px, -6px); z-index: 1; }
.masonry-grid img:nth-child(23) { transform: rotate(-3deg) translate(9px, -6px); z-index: 1; }
.masonry-grid img:nth-child(24) { transform: rotate(5deg) translate(9px, -3px); z-index: 1; }


.masonry-grid img:hover {
transform: scale(1.1) rotate(0deg) translate(0, 0);
z-index: 10;
}


.costume-design-cover {
  width: 390px !important; /* or 200px if you want it even bigger */
  z-index: 5;
  transform: rotate(-2deg) translate(5px, -5px);
}