html, body{
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

  /* BARDZO WAŻNE TRZEBA DODAĆ TUTAJ I NAJLEPIEJ W GŁOWNYM HTML
  The CSS code html, body{ overflow-x: hidden; } is used to hide the horizontal scrollbar that may appear on the webpage.
  By default, when the content of a webpage exceeds the width of the viewport, a horizontal scrollbar appears to allow 
  the user to scroll to the right and view the content. However, in some cases, the presence of the scrollbar can cause
  layout issues or detract from the design of the page. 
  In such cases, the overflow-x: hidden property can be used to hide the scrollbar and prevent scrolling horizontally.
  */

body {
    background: linear-gradient(90deg, #16222A, #3A6073) no-repeat; /*#16222A, #3A6073 od czarnego to jasno niebieskiego
                                                                #232526, #414345 midnight city (carno czarny)*/
    font-family: sans-serif;
  }


header{
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    height: 5rem;
    width: 100%;
    max-width: 100vw;
    background-color: #192830;
    z-index: 9999; /* Set a high z-index value to ensure the header is above other elements and buttons can be clicked*/

}

.headerText{
    margin: 0;
    padding: 16px;
    padding-left: 3.5rem;
    font-size: 30px;
    color: white;
    text-align: left;

    background-image: linear-gradient(90deg, #ff1e76, #dd3a40, #7df9ff, #0b36c3, #7df9ff, #dd3a40, #ff1e76);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: gradient 5s ease-in-out infinite;
    background-size: 400% 100%;
}

@keyframes gradient {
    0% {
      background-position: 0% 0%;
    }
    100% {
      background-position: 100% 0%;
    }
  }

.homeText{
    margin: 0;
    padding: 12px;
    padding-right: 20px;
    font-size: 40px;
    color: white;
    text-align: center;
    animation: appear 2.5s ease-in ;
}

.homeText2{
    margin: 0;
    padding: 5px;
    padding-right: 20px;
    font-size: 60px;
    color: white;
    text-align: center;
    animation: appear 2.5s ease-in ;
}

@keyframes appear {
    0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
}

.aboutText{
  margin: 0;
  padding: 12px;
  padding-right: 20px;
  font-size: 20px;
  color: white;
  text-align: left;
  line-height: 40px;
}


.headerButtonDiv{
    margin: 0;
    margin-left: auto;
    padding-right: 5rem;
}

.hamburger-container{
  display: none;
}


.headerButton{
    margin: 0;
    padding: 16px;
    padding-right: 20px;
    font-size: 20px;
    color: white;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}

.headerButton:hover{
  background-image: linear-gradient(130deg, #ee0914, #ff6a00);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 10px #d49567, 0 0 20px #d49567; 
  /*The first 0 is the horizontal offset, which means the shadow will be directly behind the text without any horizontal shift. 
  The second 0 is the vertical offset.
  The 10px, 20px, and 30px values are the blur radius of the shadow, meaning that the shadow will become more blurry and spread out as the value increases.*/
  transition: 0.5s;
}

.section{
    height: 100vh; /* make each section the height of the viewport minus the header height */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow-y: hidden; /*Hides scroll for section to make one big scroll for whole site*/
}

.section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 1px;
    background-color: white;
    opacity: 0.3;
}

.section:first-child::after {
    display: none; /* hide the first section's horizontal line */
}

.section::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background-color: white;
    opacity: 0.3;
    transition: width 0.3s ease-in-out;
}

.section:hover::before {
    width: 50%; /* make the horizontal line thicker on hover */
}

.section#home #about {
    display: flex;
  }

#home img
{
    width: 100%;
    height: 100%;
    /* border: 5px solid #ccc; */
}

  .section#home > div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  
  .section#home > div:first-child {
    height: 100%;
    width: 50%;
  }
  
  .section#home > div:last-child {
    height: 100%;
    width: 50%;
  }

  
                                                          /*About Section*/


  .section#about > div {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .section#about > div:first-child {
    height: 100%;
    width: 80%;
  }

  #about .unique-span{
    text-align: center;
    display: block;
  }

                                                         /*CONTACT FORM SECTION*/
  
  #contact{
    overflow-y: hidden;
    padding: 0px 0px 100px 0px; /*Powiększa sekcje o 100px od góry i dołu*/
  }



                                                              /*Projekty*/
.projects-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* height: 100%; */
  width: 100%;
  margin: 0;
  /* margin-top: 180px; */
  /* line-height: 0; */
  gap: 20px;
  row-gap: 30px;
}

.project {
  position: relative;
  margin: 20px;
  width: 24vw; /*450px*/
  height: 32vh; /*300px*/
  overflow: hidden;
  border-radius: 20px;
}

.project img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  transition: transform 0.5s ease;
}

.project:hover img {
  transform: scale(1.1);
  filter: brightness(0.6);
}

.project-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 55%;
  background-color: #2394d1;
  opacity: 0;
  transition: opacity 0.5s ease;
  mask-image: linear-gradient(to top, transparent 10%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 10%, black 100%);
}

.prject-info-text{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff; /*text color*/
  opacity: 0;
  font-size: 1.2rem;
  text-align: center;
  top: 0; /*potrzebne żeby ruszyć vertically postion:absolute*/
  transition: opacity 0.5s ease;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.project:hover .project-info {
  opacity: 1;
}

.project:hover .prject-info-text {
  opacity: 1;
}

                                                      /* EXTERNAL LINK BUTTON */

button {
  width: 60px;
  height: 60px;
  margin-top: 20px;
  transform: scale(1);
  border-style: none;
  outline: none;
  cursor: pointer;
  border-radius: 50%;
  background: rgb(228, 232, 236);
  /* background: linear-gradient(45deg, rgb(228, 232, 236) 0%, rgb(234 234 234) 100%);
  box-shadow: -2px -7px 10px #f1f1f1, 4px 6px 10px #d4d7da; */
  transition: all .3s;
}

button:active {
  background: rgb(218, 221, 224);
  background: linear-gradient(45deg, rgb(218, 221, 224) 0%, rgb(241, 241, 241) 100%);
  box-shadow: -2px -7px 10px #d4d7da, 
    4px 6px 10px #f1f1f1,
    inset -2px -7px 10px #f1f1f1, 
    inset 4px 6px 10px #d4d7da;
  transition: all .3s;
  transform: scale(.95);
}

button i {
  font-size: 20px;
  background: linear-gradient(-45deg, gray 0%, lightgray 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all .3s;
}

button:active i {
  transform: scale(.9);
  transition: all .3s;
}

.svg {
  width: 25px;
  height: 60px;
  border-style: none;
  align-items: center;
}

                                                        /*FOOTER*/


footer{
  display: flex;
  text-align: center;
  justify-content: start;
  margin: 0;
  padding: 10px;
  background-color: #192830;
  color: #e6e5f0;
  min-height: 8vh;
  width: 100vw;
  overflow-y: hidden;
  overflow-x: hidden;
}

/* .f-r{
  display: block;
  text-align: right;
} */

.footer-links{
  margin: 0 auto 0 auto; /* "auto" Dodaje Marigin automatycznie między napisem z lewej tak zeby div był po prawej*/
  padding: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.footer-links a{
  color: #e6e5f0;
  text-decoration: none;
  padding: 10px 0 5px 0;
}

.footer-author{
  margin: 0 auto 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.footer-author p{
  margin: 0;
  padding: 10px 0 5px 0;
}



                                                  /* SCROLL ANIMATION */
.scrolldown {
  --color: skyblue;
  --sizeX: 30px;
  --sizeY: 50px;
  position: absolute;
  bottom: 3rem;
  right: 0;
  width: var(--sizeX);
  height: var(--sizeY);
  margin-left: var(sizeX / 2);
  border: calc(var(--sizeX) / 10) solid var(--color);
  border-radius: 50px;
  box-sizing: border-box;
  margin-bottom: 16px;
  /* cursor: pointer; */
}

.leftHome{
  position: relative;
}

.scrolldown::before {
  content: "";
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: var(--color);
  border-radius: 100%;
  animation: scrolldown-anim 2s infinite;
  box-sizing: border-box;
  box-shadow: 0px -5px 3px 1px #2a547066;
}

@keyframes scrolldown-anim {
  0% {
    opacity: 0;
    height: 6px;
  }

  40% {
    opacity: 1;
    height: 10px;
  }

  80% {
    transform: translate(0, 20px);
    height: 10px;
    opacity: 0;
  }

  100% {
    height: 3px;
    opacity: 0;
  }
}

.chevrons {
  padding: 6px 0 0 0;
  margin-left: -3px;
  margin-top: 48px;
  width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chevrondown {
  margin-top: -6px;
  position: relative;
  border: solid var(--color);
  border-width: 0 3px 3px 0;
  display: inline-block;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
}

.chevrondown:nth-child(odd) {
  animation: pulse54012 500ms ease infinite alternate;
}

.chevrondown:nth-child(even) {
  animation: pulse54012 500ms ease infinite alternate 250ms;
}

@keyframes pulse54012 {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.5;
  }
}


                                                    /*Download Button*/

.cssbuttons-io-button {
  display: flex;
  align-items: center;
  font-family: inherit;
  font-weight: 500;
  font-size: 17px;
  padding: 0.8em 1.5em 0.8em 1.2em;
  margin: 0.8em 1.5em 0.8em 1.2em;
  color: white;
  background: #ad5389;
  background: linear-gradient(0deg, rgba(77,54,208,1) 0%, rgba(132,116,254,1) 100%);
  border: none;
  box-shadow: 0 0.7em 1.5em -0.5em #4d36d0be;
  letter-spacing: 0.05em;
  border-radius: 20em;
  width: auto;
  text-decoration: none;
}

.cssbuttons-io-button svg {
  margin-right: 8px;
}

.cssbuttons-io-button:hover {
  box-shadow: 0 0.5em 1.5em -0.5em #4d36d0be;
}

.cssbuttons-io-button:active {
  box-shadow: 0 0.3em 1em -0.5em #4d36d0be;
}