* {
  --font-poppins: 'Poppins', 'sans-serif';
  --font-sunrise: 'Waiting for the Sunrise', cursive;
}

.handwriting {
  font-family: var(--font-sunrise);
}

.no_select {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.hidden {
  opacity: 0;
}

html,
body {
  background-color: #101010;
  color: #ffffff;
  font-family: var(--font-poppins);
  padding: 0;
  margin: 0;
  overflow-y: hidden;
}

.outer-wrapper {
  width: auto;
  height: 100vh;
  width: 100vw;
  overflow-y: scroll;
  overflow-x: hidden;
  position: absolute;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

::-webkit-scrollbar {
  display: none;
}

.wrapper {
  display: flex;
  flex-direction: row;
}

.section {
  flex-shrink: 0; /* ADDED instead of the width/height of the wrapper */
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 50px;
}

/* #a { background-color: #ccc; } */
/* #b { background-color: #fff; } */
/* #c { background-color: #ccc; } */
/* #d { background-color: #fff; } */
/* #e { background-color: #ccc; } */
/* #f { background-color: #fff; } */

/* NAVBAR AND HEADER  */
header {
  position: fixed;
  width: 100vw;
  z-index: 1;
  height: 60px;
}

.menu_bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;  
  padding: 40px;
}

.container {
  display: inline-block;
  cursor: pointer;
  /* flex: 0 0 33%; */
}

.bar1, .bar2, .bar3 {
  width: 30px;
  height: 5px;
  background-color: #ffffff;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

.commission_btn_ctn {
  /* flex: 0 0 33%; */ 
}

.commission_btn {
  font-weight: 300;
  border-radius: 1.25rem;
  padding: .225rem 1.625rem;
  line-height: 2.5rem;

  border: 1px solid white;
  cursor: pointer;
}

.navbar_ctn {
  display: flex;
  /* justify-content: center; */
  /* align-items: center; */
  /* transform: scale(1.875); */
  margin: auto;
}

.inline-block {
  display: inline-block;
}

.navbar {
  text-align: left;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}

.navbar li{
  margin-right: 30px;
  opacity: 0;
}

.nav_item {
  color: white;
  text-decoration: none;
  filter: brightness(50%);
  font-weight: 800;
  font-size: 20px;
  
}

.nav_item:hover {
  filter: brightness(100%);
}


/* SECTION 1: HOME  */

.mobile_img_ctn {
display: none;
}

#background_img {
  width: 100%;
  height: 100%;
}

.intro_txt,
.body_text {
  font-size: 40px;
  text-align: center;
}

.body_title {
  font-size: 200px;
  font-weight: 800;
  pointer-events: none;
  /* text-shadow: 0.03em 0.02em 0 rgb(151, 109, 243),
              -0.035em -0.02em 0 rgb(113, 218, 244); */
}


.body_title_clear {
  position: fixed;
  bottom: 10%;
  right: 0%;
  z-index: 2;
  pointer-events: none;
}

.body_title_clear span {
  font-size: 250px;
  font-weight: 800;
  -webkit-text-stroke: 1px #DDDDDD20;
  -webkit-text-fill-color: transparent;
}

.contact_icons {
  position: absolute;
  padding: 40px; 
  bottom: 0;
  left: 0;
}

.icon_list {
  display: flex;
  gap: 50px;
  padding: 10px;
  list-style-type: none;
}

i {
  color: white;
}

.fa-youtube:hover {
  color: rgb(255, 0, 0);
}

.fa-x-twitter:hover {
  color: rgb(29, 161, 242);
}

.fa-discord:hover {
  color: rgb(114,137,218);
}

.fa-instagram:hover {
  color: rgb(225, 48, 108);
}

.fa-linkedin:hover {
  color: rgb(0, 119, 181);
}

.fa-envelope:hover {
  color: rgb(244, 180, 0);
}

.fa-github:hover {
  color: rgb(45, 186, 78);
}

.fa-tiktok:hover {
  /* color: rgb(244, 180, 0); */
  text-shadow: 0.06em 0.03em 0 rgba(255, 0, 80,0.75),
              -0.055em -0.05em 0 rgba(0, 242, 234,0.75);
}


/* SECTION 2: ABOUT ME */

.about_me_ctn {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-left: 0;
}

.about_me {
  width: 600px;
  font-size: 22px;
}

/* top | right | bottom | left */
.about_me_box,
.about_me_box-2 {
  padding: 20px;
  display: flex;
  flex-direction: column;
}


.about_me_sec-1,
.about_me_sec-2,
.about_me_sec-3 {
  margin: auto;
}

.about_me_sec-2 {
  display: block !important;
}


.about_me_sec-2 > div > h3 {
  font-size: 35px;
}

.info_box_2 {
text-align: center;
}

.continue_btn {
  font-weight: 300;
  border-radius: 1.25rem;
  padding: .225rem 1.625rem;
  line-height: 2.5rem;

  border: 1px solid white;
  cursor: pointer;
}

.continue_btn:hover,
.commission_btn:hover {
  background-color: white;
  color: black;
}

.img-Edi {
  width: 350px;
}

#cursor {
  font-weight: 100;
  font-size: 20px;
  color: #ffffff;
  margin-left: -5px;
  animation: blink 0.75s infinite;
}

#current-tech{
	display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}



@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}



/* #current-tech > span > a {
  -moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  color: inherit;
  border-bottom: solid 1px;
  text-decoration: none;
}

#current-tech > span > a:hover {
    border-bottom-color: transparent;
    color: #ffe4b4;
  } */


/* PROJECTS SECTION  */

.projects_sec {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
}

.scroll_button {
  background: none;
  border: none;
  color: white;
  font-size: 1em; /* Adjust size as needed */
  cursor: pointer;
}

.select_slider{
  display: flex;
  gap: 10px;
}

#gallery {
  position: relative;
  text-align: center;
  width: 120px;
  height: 300px; /* Adjust the height to fit your needs */
  /* usually an «overflow:hidden» is set here */
}

#gallery { 
  overflow: hidden; 
}

#gallery-container {
  display: flex;
  flex-direction: column; /* Vertical layout */
  position: absolute;
  list-style: none;
  top: 0;
  left: 0; /* Adjust the left position as needed */
  margin: 0;
  padding: 0;
}

#gallery-container li {
  width: 100%;
  height: 100%;
  padding: 2px;
}

.item {
  filter: brightness(50%);
  transition: filter 0.5s ease;
  cursor: pointer;
}

.item:hover,
.item.clicked {
  filter: brightness(100%);
}


.project_ctn {
  flex: 1;
  display: flex;
  align-items: center;
  /* justify-content: center; */
}

.project_box {
  display: flex;
  flex-direction: row;
  gap: 20px
}

.img_ctn_2 {
  width: 1080px;
  height: 700px;
  display: flex;
  flex-direction: column; /* This will stack the large image and the small images container vertically */
  transition: all .3s ease-in-out;
}

.small_img_ctn {
  display: flex; /* This will line up the small images in a row */
  justify-content: space-between;
  /* gap: 5px; */
  margin-top: 5px;
}

.large_img {
  width: 100%;
  height: 100%;
  filter: grayscale(85%) brightness(50%); /* Make the image grayscale and darken */
  transition: filter 0.5s ease, transform 0.5s ease; /* Transition effect for the filter and transform */
}

.large_img:hover {
  filter: grayscale(0%) brightness(100%); /* Full color on hover */
  transform: scale(1.01); /* Slightly increase size on hover */
  z-index: 1;
}

.sI {
  width: calc(25% - 5px); /* This will divide the width evenly among the small images, subtracting a little for margins */
  /* margin: 5px; */
  filter: grayscale(85%) brightness(50%); /* Make the image grayscale and darken */
  transition: filter 0.5s ease, transform 0.5s ease; /* Transition effect for the filter and transform */
}

.sI:hover {
  filter: grayscale(0%) brightness(100%); /* Full color on hover */
  transform: scale(1.03); /* Slightly increase size on hover */
  z-index: 1;
}

.project_box {
  /* margin: auto; */
}

.project-tech {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* align-content: space-around; */
  gap: 10px;
  width: 80%;
}
.project-tech > span > a {
  text-decoration: none;
}

.active {
  display: none;
}


.project_info {
  display: flex;
  flex-direction: column;
}

.project_text {
  width: 400px;
  font-size: 20px;
}

/* CONTACTS SECTION  */

.contacts_ctn {
  display: flex;
  justify-content: space-around;
}

.contacts_sec_1 {
  display: flex;
  align-items: center;
  
  gap: 600px;
  /* padding: 50px; */

}

.icon_list_2 {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.cIcon {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 50px;
  height: 60px;
}

.cInfo-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.name_box {
  display: flex;
  align-items: center;
  gap: 20px;
}

.name,
.email,
.feedback {
  border-radius: 3px;
  padding: 5px;
  background: transparent;
  color: white;
  resize: none;
}

.name {
  width: 150px;
  height: 25px;
}

.email {
  width: 350px;
  height: 25px;
}

.feedback {
  height: 100px;
  width: 350px;
}

/* GLITCH EFFECT. */
.glitch-wrapper {
  width: 100%;
  height: 100%;
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
  /* text-align: center; */
}

.glitch {
  font-size: 50px;
}

.glitch:before {
  display: block;
  content: attr(data-text);
  position: relative;
  top: 75px;
  opacity: 0.8;
  width: 100%;
}

.glitch:after {
  display: block;
  content: attr(data-text);
  position: relative;
  bottom: 75px;
  opacity: 0.8;
  width: 100%;
}


.glitch:before {
   animation: glitch-it 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
   color: rgb(113, 218, 244);
   z-index: -1;
}

.glitch:after {
   animation: glitch-it 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
   color:  rgb(151, 109, 243);
   z-index: -2;
}

@keyframes glitch-it {
   0% {
      transform: translate(0);
   }
   20% {
      transform: translate(-2px, 2px);
   }
   40% {
      transform: translate(-2px, -2px);
   }
   60% {
      transform: translate(2px, 2px);
   }
   80% {
      transform: translate(2px, -2px);
   }
   to {
      transform: translate(0);
   }
}



  /* MOBILE  */

  @media screen and (max-width: 480px) {
    .outer-wrapper {
      box-sizing: border-box;
      overflow-y: scroll;
      overflow-x: hidden;
      position: absolute;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    
    ::-webkit-scrollbar {
      display: none;
    }
    
    .wrapper {
      flex-direction: column;

    }

/* SECTION 1: HOME  */
.section {
  margin-left: 0px;
}

.container { 
  align-self: flex-start;
}

.commission_btn_ctn {
  align-self: flex-end;
}

.coontainer  { 
  flex: 1 0 50%; /* This makes the items take up 50% of the width */
  max-width: 50%; /* This ensures the items don't grow beyond 50% */
}

.menu_bar {
  display: flex;
  
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;  
  padding: 10px;
}

.navbar {
  text-align: center;
  flex-direction: column;
  gap: 90px;

}

.navbar_ctn {
  display: block;
  /* justify-content: center; */
  /* align-items: center; */
  /* transform: scale(1.875); */
  margin: auto;
}

.navbar li{
  margin-right: 0px;
  opacity: 1 !important;
  display: none;
}

.navbar li a{
  font-size: 40px;
  
}

.seperate {
  order: 2;
  margin-top: 80px;
  flex: 1 0 100%; /* This makes the item take up 100% of the width */
  max-width: 100%;
  max-height: 100%;
}

    .body_title {
      font-size: 50px;
      font-weight: 800;
      pointer-events: none;
      /* text-shadow: 0.03em 0.02em 0 rgb(151, 109, 243),
                  -0.035em -0.02em 0 rgb(113, 218, 244); */
    }

    .icon_list {
      display: flex;
      gap: 20px;
      list-style-type: none;
    }

    .mobile_img_ctn {
      position: absolute;
      top: 0;
      z-index: -5;
      height: 350px;
      width: 100vw;
      display: block;
    }

    #mobile_img {
      width: 100%;
      height: 100%;
    }

    .home_text {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 200px;
    }

    .intro_txt {
      font-size: 32px;
    }

    .body_text {
      font-size: 24px;
    }

    fade {
      position: relative;
      bottom: 50px;
    
      display: block;
    
      width: 100%;
      height: 50px;
    
      background-image: linear-gradient(to bottom, 
          rgba(255, 255, 255, 0), 
          #101010
      100%);
    }

    .body_title_clear {
      position: fixed;
      bottom: 10%;
      right: 0%;
      z-index: 2;
      pointer-events: none;
    }
    
    .body_title_clear span {
      font-size: 150px;
      font-weight: 800;
      -webkit-text-stroke: 1px #DDDDDD20;
      -webkit-text-fill-color: transparent;
    }

    .contact_icons {
      left: auto;
      bottom: 50px;
    }


    /* ABOUT ME  */
    .about_me_ctn {
      flex-direction: column;
      text-align: center;
      height: 100%;
      width: 100%;
      
    }
    
 
    
    /* top | right | bottom | left */
    .about_me {
      font-size: 16px;
      width: 100%;
    }
    
    .about_me_box > div > h1 {
      text-align: center;
    }
    
    .about_me_sec-2 > div > h1 {
      font-size: 35px;
    }
    

    #current-tech{
      display: flex;
      justify-content: space-evenly;
    }

    .active {
      order: -1;
      display: block;
    }

    .hidden {
      opacity: 1;
    }

    .continue_btn_ctn {
      display: none;
    }

    #gallery {
      position: relative;
      text-align: center;
      width: 300px;
      height: 70px; /* Adjust the height to fit your needs */
      /* usually an «overflow:hidden» is set here */
    }
    
    #gallery-container {
      display: flex;
      flex-direction: row; /* Vertical layout */
      position: absolute;
      list-style: none;
      gap: 20px;
      top: 0;
      left: 0; /* Adjust the left position as needed */
      margin: 0;
      padding: 0;
    }

    #gallery-container li {
      width: 100%;
      height: 100%;
      padding: 2px;
    }

    .select_slider{
      display: flex;
      align-items: center;
      gap: 10px;
    }

 /* PROJECTS SECTION  */
  .projects_sec {
    flex-direction: column;
    text-align: center;
    height: 100%;
    width: 100vw;
  }

  
  .scroll_button {
    background: none;
    border: none;
    color: white;
    font-size: 1em; /* Adjust size as needed */
    cursor: pointer;
  }

  .hideMobile {
    display: none;
  }
  
  #gallery {
    position: relative;
    text-align: center;
    width: 300px;
    height: 70px; /* Adjust the height to fit your needs */
    /* usually an «overflow:hidden» is set here */
  }
  
  #gallery-container {
    display: flex;
    flex-direction: row; /* Vertical layout */
    position: absolute;
    list-style: none;
    gap: 20px;
    top: 0;
    left: 0; /* Adjust the left position as needed */
    margin: 0;
    padding: 0;
  }

  #gallery-container li {
    width: 100%;
    height: 100%;
    padding: 2px;
  }

  .select_slider{
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  #myDiv {
    overflow: hidden;
    height: 50%; /* Adjust this value according to your needs */
  }
  
  .scroll_container::-webkit-scrollbar { 
    display: none; /* For Chrome, Safari and Opera */
  }
  
  .item {
    filter: brightness(50%);
    transition: filter 0.5s ease;
    cursor: pointer;
  }
  
  .item:hover,
  .item.clicked {
    filter: brightness(100%);
  }
  
  
  .project_ctn {
    flex: 1;
    flex-direction: column;
    width: 100%;
  }
  
  .project_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px
  }
  
  .img_ctn_2 {
    width: 90%;
    height: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* This will stack the large image and the small images container vertically */
    transition: all .3s ease-in-out;
    margin-bottom: 20px;
  }
  
  .small_img_ctn {
    display: flex; /* This will line up the small images in a row */
    justify-content: space-between;
    flex-wrap: wrap;
    /* gap: 5px; */
  }
  
  .large_img {
    width: 100%;
    height: 100%;
    filter: grayscale(0%) brightness(100%); /* Make the image grayscale and darken */
    transition: filter 0.5s ease, transform 0.5s ease; /* Transition effect for the filter and transform */
  }
  
  .large_img:hover {
    filter: grayscale(0%) brightness(100%); /* Full color on hover */
    transform: scale(1.01); /* Slightly increase size on hover */
    z-index: 1;
  }
  
  .sI {
    width: calc(50% - 5px); /* This will divide the width evenly among the small images, subtracting a little for margins */
    /* margin: 5px; */
    padding-top: 10px;
    filter: grayscale(85%) brightness(50%); /* Make the image grayscale and darken */
    transition: filter 0.5s ease, transform 0.5s ease; /* Transition effect for the filter and transform */
  }
  
  .sI:hover {
    filter: grayscale(85%) brightness(50%); /* Full color on hover */
    transform: scale(1.03); /* Slightly increase size on hover */
    z-index: 1;
  }
  
  .project_box {
    /* margin: auto; */
  }
  
  .project_info {
    display: flex;
    flex-direction: column;
    width: 90%;
  }
  
  .project_text {
    font-size: 18px;
    width: 100%;
  }

  .project-tech {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  /* CONTACTS SECTION  */

.contacts_ctn {
  display: flex;
  margin: 0  auto;
  width: 90%;
}

.contacts_sec_1 {
  flex-direction: column;
  gap: 0;
  /* padding: 50px; */

}
.icon_list_2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 40px;
}

.cIcon {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  height: 60px;
  width: 50%;
}

.cInfo-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.name_box {
  display: flex;
  align-items: center;
  gap: 20px;
}

.name,
.email,
.feedback {
  border-radius: 3px;
  padding: 5px;
  background: transparent;
  color: white;
  resize: none;
}

.name {
  width: 150px;
  height: 25px;
}

.email {
  width: 350px;
  height: 25px;
}

.feedback {
  height: 100px;
  width: 350px;
}

/* GLITCH EFFECT. */
.glitch-wrapper {
  width: 100%;
  height: 100%;
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
  /* text-align: center; */
}

.glitch {
  font-size: 40px;
}

.glitch:before {
  display: block;
  content: attr(data-text);
  position: relative;
  top: 60px;
  opacity: 0.8;
  width: 100%;
}

.glitch:after {
  display: block;
  content: attr(data-text);
  position: relative;
  bottom: 60px;
  opacity: 0.8;
  width: 100%;
}
}