@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
/* colors */
:root {
  --black: #000000;
  --grey: #333333;
  --white: #ffffff;
  --yellow: #eecf29;
  --accent: #114466;
}
/* font-sizes */
:root {
  --step--2: clamp(0.78rem, calc(0.71rem + 0.38vw), 1rem);
  --step--1: clamp(0.94rem, calc(0.83rem + 0.54vw), 1.25rem);
  --step-0: clamp(1.13rem, calc(0.97rem + 0.76vw), 1.56rem);
  --step-1: clamp(1.35rem, calc(1.14rem + 1.05vw), 1.95rem);
  --step-2: clamp(1.62rem, calc(1.33rem + 1.43vw), 2.44rem);
  --step-3: clamp(1.94rem, calc(1.56rem + 1.93vw), 3.05rem);
  --step-4: clamp(2.33rem, calc(1.82rem + 2.58vw), 3.82rem);
  --step-5: clamp(2.8rem, calc(2.11rem + 3.42vw), 4.77rem);
}
/* header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  padding: 2rem 3rem;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)),
    url(media/homepage.webp);
  background-size: 40%;
  background-position: 50% 6%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  position: sticky;
  top: 0;
  transition: 0.5s ease-out;
}
.homepage .header {
  background: none;
  margin: 0;
  box-shadow: none;
}
@media (max-width: 1000px) {
  .header {
    padding: 2rem 1rem;
  }
}
/* naam */
.name a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--white);
  text-decoration: none;
}
.name h1 {
  font-size: var(--step-2);
  padding: 0.5rem 1rem;
  transition: all 0.2s ease-in-out;
}
.name span {
  border: 2px solid var(--yellow);
  color: var(--white);
  font-weight: 400;
  padding: 0.5rem 1rem;
  font-size: var(--step-0);
  transition: all 0.2s ease-in-out;
}
.name:hover span {
  background-color: var(--yellow);
  color: var(--black);
}
.name:hover h1 {
  color: var(--grey);
  background-color: var(--white);
}
/* menu */
.menu > ul {
  display: flex;
  list-style: none;
  gap: 0.25rem;
}
.menu > ul > li a {
  color: var(--white);
  font-weight: 500;
  text-decoration: none;
  font-size: var(--step-0);
  padding: 0.5rem 1rem;
  transition: all 0.1s ease-in-out;
}
.menu > ul > li {
  position: relative;
}
/* dropdown */
.menu .dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  transform: translateY(-20%);
  display: flex;
  width: max-content;
  flex-direction: column;
  gap: 1rem;
  padding: 0.5rem 0;
  border-radius: 5px;
  z-index: -1;
  opacity: 0;
  transition: transform 0.2s ease-out, opacity 0.1s ease-in;
  list-style: none;
}
.menu > ul > li:hover .dropdown,
.menu > ul > li:active .dropdown {
  transform: translateY(0);
  opacity: 1;
  z-index: 1;
}
.menu .dropdown li a {
  background-color: var(--white);
  height: 100%;
  width: 100%;
  color: var(--grey);
  position: relative;
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.1);
}
.menu .dropdown li a:hover {
  background-color: var(--accent);
  color: var(--white);
}
/*------end dropdown------ */
.menu .contact {
  /* background-color: var(--accent); */
  border: var(--yellow) 2px solid;
  color: var(--white);
}
.menu .contact:hover {
  background-color: var(--yellow);
  color: var(--grey);
}
.menu > ul > li:hover a {
  background-color: var(--white);
  color: var(--grey);
}
.menu > ul > li:hover a .headerbox .name h1 {
  font-size: var(--step-4);
}
/* background image */
.homepage {
  height: 100vh;
  width: 100vw;
  background: url(media/homepage.webp);
  background-size: 40%;
  background-position: 50% 50%;
  
}
.homepage::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.8) 20%, rgba(255, 255, 255, 0));
}
@media (max-width: 1300px) {
  .menu ul li a,
  .name h1,
  .name span {
    font-size: var(--step--1);
  }
}
@media (max-width: 950px) {
  .menu ul li a,
  .name h1,
  .name span {
    font-size: var(--step--2);
  }
}
@media (width < 800px) {
  .menu {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    transition: 0.3s ease-out;
  }
  .menu.showmenu {
    transform: translateY(0);
  }
  .menu > ul {
    flex-direction: column;
    gap: 1.5rem;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: var(--yellow) 4px solid;
    padding: 2rem;
    text-align: center;
    width: 100%;
    border-radius: 0 0 5px 5px;
    position: relative;
    overflow: hidden;
  }
  .menu-toggle {
    position: relative;
    width: 30px;
    height: 50px;
  }
  .hamburger {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }
  .hamburger span {
    display: flex;
    width: 29px;
    height: 3px;
    margin-bottom: 5px;
    position: relative;
    background: var(--white);
    z-index: 100;
    transform-origin: 5px 0px;
    transition: 0.4s cubic-bezier(0.77, 0.2, 0.05, 1);
  }
  .menu-toggle.active .hamburger span:nth-child(1) {
    transform: translate(3px, 2px) rotate(45deg);
  }
  .menu-toggle.active .hamburger span:nth-child(2) {
    transform: scaleX(0);
    transform-origin: center;
  }
  .menu-toggle.active .hamburger span:nth-child(3) {
    transform: rotate(-45deg);
  }
  .menu ul li a,
  .name h1,
  .name span {
    font-size: var(--step-0);
  }
}
@media (width < 600px) {
  .homepage {
    background-size: 70%;
  }
  .name span {
    display: none;
  }
}
/* collections */
.container {
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.container .sliderheader h2,
.container h2,
.collectionsection h2,
.contactbox h1 {
  font-size: var(--step-5);
  color: var(--grey);
  width: 100%;
  text-align: center;
  margin: 0 auto;
  font-weight: 500;
  text-transform: lowercase;
}
.glide__slides {
  display: flex;
  height: min(1000px, 60vh);
  position: relative;
  margin: 1rem 0;
}
/* slider */
.glide {
  margin: 2rem 0;
}
.glide__slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  cursor: grab;
}
.glide__slide:active {
  cursor: grabbing;
}
.glide__slide img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  border: inherit;
}
/* painting title */
.glide .title {
  color: var(--grey);
  font-size: var(--step-0);
  font-style: italic;
  width: max-content;
  margin: 0 auto;
}
/* view full collection */
.viewcollection {
  width: max-content;
  background: var(--grey);
  display: flex;
  padding: 0.5rem 1rem;
  font-size: var(--step-1);
  font-weight: 500;
  transition: all 0.3s ease-in-out;
  color: var(--white);
  text-decoration: none;
  margin: 2rem auto;
}
.viewcollection:hover {
  background-color: var(--accent);
  color: var(--white);
}
.glide__track {
  position: relative;
}
/* endslide */
.endslide {
  border: 5px solid var(--grey);
}
.glide a {
  text-decoration: none;
}
.endslide {
  text-decoration: none;
  color: var(--grey);
  font-size: var(--step-3);
  padding: 0.5rem 1rem;
  font-weight: 500;
  transition: all 0.3s ease-in-out;
}
.endslide:hover {
  background-color: var(--accent);
  color: var(--white);
  border: #114466;
}
/* slider arrows */
.glide__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background: none;
  border: var(--white) 5px solid;
  width: 100px;
  aspect-ratio: 1;
  background-color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: 0.5s;
}
.glide__arrow i {
  color: var(--white);
  font-size: var(--step-4);
  transition: 0.5s;
}
.glide__arrow--left {
  left: 1rem;
}
.glide__arrow--right {
  right: 1rem;
}
.glide__arrow:active i {
  transform: scale(0.8);
}
@media (hover: hover) {
  .glide__arrows button:hover {
    background-color: var(--accent);
  }
  .glide__arrow:hover i {
    transform: scale(1.2);
  }
}
.glide__arrows button:hover {
  background-color: var(--accent);
}
@media (width < 800px) {
  .glide__arrow {
    border: none;
    background-color: rgba(0, 0, 0, 0.3);
    width: 70px;
    border-radius: 5px;
  }
}

/* slider dots */
.glide__bullets {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  z-index: 10;
  width: max-content;
  margin: 1rem auto;
}
.glide__bullet {
  height: var(--step-0);
  aspect-ratio: 1;
  background: none;
  border: var(--grey) 3px solid;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
.glide__bullet--active {
  background-color: var(--grey);
}
.glide__bullet:hover {
  background-color: rgba(0, 0, 0, 0.3);
}
/*------------Collectiontemplate---------*/
.collectionsection {
  margin: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.collections {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.collection {
  display: flex;
  gap: 1rem;
  flex-direction: column;
  min-height: 700px;
  max-width: 500px;
  justify-content: center;
  position: relative;
}
.collectionimage {
  display: grid;
  place-items: center;
  margin: 0 auto;
  border: 3px solid rgba(0, 0, 0, 0.1);
  padding: 2rem;
  position: relative;
}
.collection img {
  max-width: 100%;
  object-fit: scale-down;
}
.collectiontext {
  font-size: var(--step--1);
  color: var(--grey);
  margin: 0 auto;
  width: 90%;
  text-align: center;
  /* background-color: var(--grey); */
  text-transform: lowercase;
  padding: 0.25rem 0;
}
/* collections test */
.collectionsbox {
  height: 80vh;
  width: 80vw;
  margin: 2rem auto;
  border-radius: 0 0 25px 25px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.collectionsbox h1 {
  font-size: var(--step-5);
  color: var(--grey);
  border: 5px solid var(--grey);
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
.collectionsbox ul {
  height: 80%;
  display: flex;
  gap: 3rem;
}
.collectionsbox ul li {
  list-style: none;
  height: 100%;
  flex-basis: 200px;
  flex-grow: 1;
  transition: 0.5s;
  position: relative;
  border-radius: 10px 10px 25px 25px;
  overflow: hidden;
}
.collectionsbox ul li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}
.collectionsbox ul li a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  z-index: 1;
  transition: 0.5s;
}
.collectionsbox ul li:hover {
  flex-basis: 1000px;
  border-radius: 25px;
}
.collectionsbox ul:has(li:hover) li:not(:hover) {
  transform: scale(0.95);
  opacity: 0.9;
  border-radius: 50px;
}
.collectionsbox ul li:hover a::before {
  opacity: 1;
}
.collectionsbox ul li h3 {
  position: absolute;
  color: var(--white);
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 1000%);
  font-size: var(--step-1);
  width: max-content;
  text-align: center;
  transition: 0.5s;
  z-index: 2;
  padding: 0.5rem 0.75rem;
  border: 3px solid var(--white);
}
.collectionsbox ul li:hover h3 {
  transform: translate(-50%, 50%);
}
/* ------------- Contact page --------------- */
.contactbox {
  width: min(1100px, 100%);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 auto;
}
#form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
#form input,
#form textarea {
  border: 2px solid rgba(0, 0, 0, 0.1);
  width: 100%;
  padding: 0.5rem;
  font-size: var(--step-0);
  font-family: "Poppins", sans-serif;
  height: 100%;
  transition: 0.2s ease-in-out;
}
#form textarea::-webkit-scrollbar {
  width: 10px;
}
#form textarea::-webkit-scrollbar-track {
  background: var(--grey);
}
#form textarea::-webkit-scrollbar-thumb {
  background: var(--yellow);
}
#form input:focus,
#form input:hover,
#form textarea:hover,
#form textarea:focus {
  outline: none;
  background-color: var(--grey);
  color: var(--white);
}
#form input:hover::placeholder,
#form input:focus::placeholder,
#form textarea:hover::placeholder,
#form textarea:focus::placeholder {
  color: #e9e9e9;
}

#from_name {
  grid-column: 1/2;
  grid-row: 1/2;
}
#from_email {
  grid-column: 2/3;
  grid-row: 1/2;
}
.field:nth-child(3) {
  grid-column: 1/-1;
  grid-row: 2/3;
}
.message {
  grid-column: 1/-1;
  grid-row: 3/4;
}
.message textarea {
  resize: none;
  min-height: 250px;
}
.buttonbox {
  grid-column: 1/-1;
  grid-row: 4/5;
}
#button {
  background-color: var(--yellow);
  color: var(--black);
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
#button:hover {
  background-color: var(--accent);
  color: var(--white);
}
/* ------- my work --------- */
.container .textbox {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  width: 80%;
  margin: 0 auto;
}
.container .textbox h3 {
  font-size: var(--step-2);
  color: var(--grey);
  width: 100%;
  margin: 0 auto;
  font-weight: 500;
}
.container .textbox > div {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  max-width: min(100%, 600px);
  margin: 0 auto;
  font-size: var(--step--2);
}
.container .textbox .col-0 {
  display: flex;
  padding: 0;
}
.textbox .col-0 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30%;
}
.textbox .col-1 {
  /* background-color: var(--accent); */
  color: var(--grey);
}
.textbox .col-2 {
  background-color: var(--grey);
  color: var(--white);
}
.textbox .col-2 h3 {
  color: var(--white);
}

/* --------- about me ------------- */
.about .textbox > div {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 2rem;
}
.about .date {
  font-size: var(--step--2);
  color: var(--grey);
  background-color: var(--accent);
  height: max-content;
  padding: 0.5rem 1rem;
  color: var(--white);
  text-align: center;
}
.about .col-2 .date {
  background-color: var(--white);
  color: var(--grey);
}
.about p {
  padding: 0.5rem 0;
}
@media (max-width: 1250px) {
  .headtext h1 {
    font-size: var(--step-4);
  }
}
@media (width < 900px) {
  .container .textbox {
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 700px) {
  .headtext h1 {
    font-size: var(--step-3);
  }
  .container .textbox > div {
    padding: 2rem;
    width: 100%;
  }
  .about .textbox > div {
    grid-template-columns: 1fr;
    column-gap: 1rem;
  }
  .about .date {
    width: max-content;
    margin: 0 auto;
  }
}

/* -------------- footer --------------- */
footer {
  display: grid;
  place-items: center;
  margin: 1rem 0;
}
footer a {
  color: var(--grey);
  text-decoration: none;
  font-size: var(--step--2);
  width: max-content;
  transition: 0.2s ease-in-out;
}