*{
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  scroll-behavior: smooth;
  font-family: "Helvetica";
}

html{
  font-size: 60%;
  overflow-x: hidden;
}

body{
  background-color:black;
  color:white;
}

.header{
  position: sticky;
  width:100%;
  top:0;
  left:0;
  padding: 4rem 15%;
  background-color:rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display:flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  list-style: none;
}

.logo{
  font-size: 3rem;
  color:white;
  font-weight: 800;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

.logo:hover{
  transform: scale(1.1);
}

span{
  background: linear-gradient(
  270deg,
   rgb(198, 129, 222) 10%,
   rgb(112, 40, 139) 100%
  );
  background-clip: text;
  color: transparent;
}



#menu ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  gap: 3rem;
  padding-inline-start: 0;
}

#menu a{
  font-size:1.8rem;
  color:white;
  font-weight: 500;
  transition:0.3s ease-in-out;
  border-bottom:3px solid transparent;
}

#menu a:hover{
  color:rgb(198, 129, 222);
  border-bottom: 3px solid rgb(198,129,222);
}

a{
  color:white;
}
.menu-toggle{
  display:none;
  background:none;
  border:none;
  color:white;
  font-size:3rem;
  cursor:pointer;
}



.contact{
  font-size: 1.8rem;
  padding:1rem 2rem;
  border-radius: 400px;
  background: linear-gradient(
    270deg,
    rgb(198, 129, 222) 10%,
    rgb(112, 40, 139) 100%
  );
  color:white;
  border:none;
  cursor: pointer;
  text-wrap:nowrap;
}

.contact:hover{
  transform: scale(1.1);
}



section{
  min-height:100vh;
  padding: 10rem 15%;
}

.home{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15rem;
}

.home1{
  display:flex;
  flex-direction: column;
  align-items:flex-end;
  text-align: right;
}

.home1 h1{
  font-size: 8rem;
  font-weight: 700;
  margin-top: 1.5rem;
  line-height: 1;
}

.home1 h3{
  margin: 1rem 0;
  font-size:4rem;
}

.home1 p{
  margin: 1rem 0;
  font-size: 1.5rem;
}

.home-img img{
  width: 32vw;
  border-radius: 100%;
  box-shadow: 0 0 25px rgb(54, 90, 242);
}

.home-img img:hover{
  box-shadow: 0 0 50px rgb(112, 40, 139);
  transition: 1s ease;
}

.przyciski{
  display:flex;
}

.przycisk{
  display: inline-block;
  padding:1rem 3rem;
  background-color: black;
  box-shadow: 0 0 25px rgb(54, 90, 242);
  border-radius:3rem;
  border:2px solid rgb(198, 129, 222);
  font-size: 1.8rem;
  color:rgb(198, 129, 222);
}

.przycisk:hover{
  box-shadow: 0 0 50px rgb(112, 40, 139);
  transition: 1s ease;
  background:rgb(198, 129, 222);
  color:black;
}



.about{
  display:flex;
  justify-content: center;
  align-items: center;
  gap:10rem;
  background:black;
}

.about-img img{
  width: 20vw;
  border-radius: 100%;
  box-shadow:0 0 25px black;
}

.about img:hover{
  box-shadow: 0 0 50px rgb(198, 129, 222);
  transition: 1s ease;
}

.about h1{
  font-size: 8rem;
  font-weight: 700;
  margin-top: 1.5rem;
  line-height: 1;
  color: white;
}

.about p{
  margin: 2rem 0;
  font-size: 1.5rem;
  color:white;
}


::-webkit-scrollbar{
  width: 20px;
}

::-webkit-scrollbar-thumb{
  background-color: rgb(198, 129, 222);
}

::-webkit-scrollbar-track{
  background-color: black;
}



.drawing h1,
.painting h1,
.graphic h1{
  font-size: 8rem;
  font-weight: 700;
  margin-top: 1.5rem;
  padding-bottom: 1.5rem;
  line-height: 1;
  text-align: center;
}

.drawing h1,
.graphic h1{
  color:black;
}

.painting h1{
  color:white;
}

.drawing h3,
.painting h3,
.graphic h3{
  margin: 1rem 0;
  font-size:4rem;
  color:rgb(198, 129, 222);
}

.drawing p,
.painting p,
.graphic p{
  margin: 2rem 0;
  font-size: 1.5rem;
  color:rgb(198, 129, 222);
}


.drawing{
  background-color:rgb(198,129,222);
}

.painting{
  background-color:black;
}

.graphic{
  background-color:rgb(198,129,222);
}


.drawing-box{
  display: grid;
  grid-template-columns:1fr 1fr 1fr;
  gap: 3rem;
  row-gap: 5rem;
}

.drawing-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: black;
  border: 2px solid black;
  border-radius: 3rem;
  gap: 2rem;
  padding:3rem 0.5rem;
  overflow:hidden;
  cursor:pointer;
  box-shadow: 0 0 5px rgb(198, 129, 222);
  transition:0.3s ease;
}

.drawing-card:hover{
  box-shadow: 0 0 25px rgb(54, 90, 242);
  transform:scale(1.02);
}

.drawing-card img{
  max-width:200px;
  border-radius: 2em;
  object-fit: cover;
}


.heading{
  text-align:center;
  font-size:7rem;
  margin: 5rem 0;
}

.kontakt{
  background-color: black;
}

.kontakt h2{
  margin-bottom: 3rem;
  color:white;
}

.kontakt form{
  display:flex;
  align-content: center;
  justify-content: center;
  gap: 3rem;
  margin: 5rem 0;
  text-align: center;
}

.kontakt form .input-box input{
  width:100%;
  padding:2.5rem;
  font-size: 1.8rem;
  color:rgb(198, 129, 222);
  background-color: black;
  border-radius: 2rem;
  border: 2px solid rgb(198, 129, 222);
  margin:1.5rem 0;
  resize: none;
}

.kontakt form textarea{
  width:100%;
  padding:2.5rem;
  font-size: 1.8rem;
  color:rgb(198, 129, 222);
  background-color: black;
  border-radius: 2rem;
  border: 2px solid rgb(198, 129, 222);
  margin:1.5rem 0;
  resize: none;
}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media(max-width: 991px){

  html{
    font-size:55%;
  }

  .header{
    padding:2rem 5%;
  }

  section{
    padding:10rem 5%;
  }

  .contact{
    display:none;
  }

  .menu-toggle{
    display:block;
    z-index:1001;
  }

  #menu{
    position:absolute;
    top:100%;
    right:5%;
    width:260px;

    background:rgba(0,0,0,0.95);

    border:2px solid rgb(198,129,222);

    border-radius:2rem;

    padding:2rem;

    display:none;

    backdrop-filter: blur(10px);

    box-shadow:0 0 25px rgb(112, 40, 139);
  }

  #menu.active{
    display:block;
    animation:slideDown 0.3s ease;
  }

  #menu ul{
    flex-direction:column;
    align-items:flex-start;
    gap:2rem;
  }

  #menu a{
    margin:0;
    display:block;
    font-size:2rem;
  }

  .home{
    flex-direction:column-reverse;
    gap:5rem;
    text-align:center;
  }

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

  .home1 h1{
    font-size:5rem;
  }

  .home1 h3{
    font-size:3rem;
  }

  .home-img img{
    width:70vw;
  }

  .about{
    flex-direction:column;
    text-align:center;
  }

  .about-img img{
    width:60vw;
  }

  .about h1{
    font-size:5rem;
  }

  .drawing-box{
    grid-template-columns:1fr 1fr;
  }

  .kontakt form{
    flex-direction:column;
  }
}

@media(max-width: 600px){

  html{
    font-size:50%;
  }

  .drawing-box{
    grid-template-columns:1fr;
  }

  .drawing-card img{
    max-width:100%;
  }

  .home-img img{
    width:85vw;
  }

  .about-img img{
    width:75vw;
  }

  .heading{
    font-size:5rem;
  }
}


@keyframes slideDown{

  from{
    opacity:0;
    transform:translateY(-20px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}