* {
  box-sizing: border-box;
  /* scrollbar-color: transparent transparent; */
  scrollbar-width: 0px;
}

@font-face {
  font-family: "Quicksand-Regular";
  src: url("/assets/css/font/quicksand/Quicksand-Regular.otf"),
       url("/assets/css/font/quicksand/Quicksand-Regular.otf") format("opentype");
}

@font-face {
  font-family: 'Amethyst';
  src: url('/assets/css/font/amethyst/Amethyst.woff2') format('woff2'),
       url('/assets/css/font/amethyst/Amethyst.ttf'),
       url('/assets/css/font/amethyst/Amethyst.woff') format('woff'),
       url('/assets/css/font/amethyst/Amethyst.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

.lang-text {
  display: none;
}

.lang-text.show {
  display: block;
}



html {
  cursor: crosshair;
}

body {
  background-image: url("../../media/KarBoFaded.webp");
  background-repeat: repeat;
  background-size: 100vw auto;
  font-family: "Quicksand-Regular";
  font-size: 20px;
  color: white;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
}

/*HEADER STUFF*/

header {
  background-color: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  display: grid;
  grid-template-columns: repeat(2, minmax(10px, 1fr));
  grid-template-rows: auto;
  align-items: center;
  justify-items: start;
  border-bottom-color: rgb(255, 255, 255);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  height: auto;
  width: 100%;
  padding: 35px;
  z-index: 1;
}

#hamburger {
  display: none;
}

.logo-container {
  font-family: 'Amethyst';
  display: grid;
  align-items: center;
}

.logo-container svg {
  font-family: 'Amethyst';
  width: 10vw;
  height: 10vw;
  max-width: 130px;
  max-height: 130px;
}

.logo-container a {
  font-family: 'Amethyst';
  color: white;
  text-decoration: none;
  vertical-align: middle;
}
#profileplaceholder{
  padding: 1vw;
}

.headlinks {
  display: grid;
  grid-template-columns: repeat(10, auto);
  grid-template-rows: 35px;
  justify-items: center;
  justify-self: end;
  z-index: 2;
  justify-content: space-evenly;
  align-items: center;
  align-content: center;
}

.headlinks a {
  color: white;
  text-decoration: none;
  z-index: 2;
  padding: 10px;
  font-size: 18px;
}

header a:hover {
  color: gray;
}

/*dropdown on header */
.dropdown,
.sidedropdown {
  display: inline-block;
}

.dropdown-content {
  max-width: 160px;
  display: none;
  position: absolute;
  background-color: rgba(32, 32, 32, 0.9);
  color: black;
  border-radius: 8px;
}

.sidedropdown-content {

  display: inline-block;
  max-width: 160px;
  display: none;
  position: absolute;
  margin-left: 160px;
  margin-top: -66px;
  background-color: rgba(32, 32, 32, 0.9);
  z-index: 2;
  color: black;
  border-radius: 8px;
}

.dropdown-content a,
.sidedropdown-content a {
  color: rgb(255, 255, 255);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown:hover .dropdown-content,
.sidedropdown:hover .sidedropdown-content {
  display: block;
}


/* MAIN STUFF CSS */

main {
  flex: 1 0 auto;
  text-align: center;
  margin: 0vw 10vw 0vw 10vw;
  padding: 0.5vh;
  background-color: rgba(0, 0, 0, 0.9);
  border-left: 1px solid;
  border-right: 1px solid;
  min-height: 100vh;
}

.tekstitasaus td {
  text-align: justify;
  text-justify: inter-word;
}
.tekstitasaus h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center; /* Center headings for emphasis */
  color: #00e1ff; /* Accent color for headings */
}

.tekstitasaus h2 {
  font-size: 1.5rem;
  margin-bottom: 0.8rem;
  color: #3cff00; /* Subtle accent for subheadings */
}

.tekstitasaus p {
  font-size: 1.5rem;
  margin-bottom: 1.5rem; /* Add spacing between paragraphs */
  text-align: left;
  text-justify: inter-word;
}

.tekstitasaus ul {
  padding: 0px;
  list-style-type: disc; /* Use bullets for lists */
  margin-left: 0rem; /* Indent list items */
}

.tekstitasaus li {
  margin-bottom: 0.5rem;
  line-height: 1.6; /* Adjust line spacing for list items */
}

.tekstitasaus a {
  color: #0a57a3; /* Highlight links */
  text-decoration: none;
}

.tekstitasaus a:hover {
  text-decoration: underline; /* Add hover effect for links */
}

.section-box {
  background-color: rgba(255, 255, 255, 0.05); /* Slight contrast from the background */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
  border-radius: 8px; /* Rounded corners */
  padding: 1.5rem; /* Inner padding for content */
  margin: 1.5rem 0; /* Spacing between boxes */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
  color: #fff; /* Text color */
}

.section-box h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #66ff00; /* Accent color for titles */
  border-bottom: 2px solid rgba(255, 255, 255, 0.2); /* Subtle underline for title */
  padding-bottom: 0.5rem; /* Spacing below the title */
}

.section-box p {
  font-size: 1rem;
  line-height: 1.6; /* Comfortable line spacing */
  text-align: center;
  margin-bottom: 1rem;
}

.section-box ul {
  list-style: none; /* Remove default bullet points */
  padding: 0; /* Remove padding */
  margin: 0;
}

.section-box ul li {
  background-color: rgba(255, 255, 255, 0.1); /* Box for each list item */
  border-radius: 5px; /* Rounded corners */
  padding: 0.8rem; /* Inner padding for list items */
  margin-bottom: 0.5rem; /* Spacing between list items */
  display: flex; /* Align icon and text */
  align-items: center;
}

.section-box ul li:before {
  content: "•"; /* Custom bullet */
  color: #00ffd9; /* Accent color for bullet */
  margin-right: 1rem; /* Space between bullet and text */
  font-size: 1.2rem;
}


.main img {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 700px;
}

.leftgrid {
  display: grid;
  margin: 0;
  justify-items: stretch;
  align-content: stretch;
  justify-content: end;
}

.mainGridContainer {
  display: grid;
  grid-template-columns: 10% minmax(auto, 1fr) 10%;
  grid-template-rows: auto;
  overflow: hidden;
  margin: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: minmax(auto, 80vw);
  gap: 0.1rem;
  margin: 0 auto;
  max-width: 1500px;
}


.grid-item {
  text-align: center;
  padding: 1rem;
  text-decoration: none;
}

.subgrid {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  grid-template-columns: repeat(3, minmax(auto, 1fr));
  grid-template-rows: auto;
  justify-items: stretch;
  align-items: center;
  justify-content: space-around;
  align-content: space-evenly;
}

.imagegrid {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  height: -webkit-fill-available;    
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: repeat(1, minmax(auto, 1fr));
}


.subgrid-item {
  text-align: center;
  align-self: center;
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.medsubgrid {
  display: grid;
  gap: 0.8rem;
  margin: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(auto, 1fr));
  grid-template-rows: 300px 100px auto 200px 100px;
  justify-items: stretch;
  align-items: center;
  justify-content: space-around;
  align-content: space-evenly;
}

.bigsubgrid {
  display: grid;
  gap: 0.8rem;
  margin: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(auto, 1fr));
  grid-template-rows: 300px 300px auto 200px 300px;
  justify-items: stretch;
  align-items: center;
  justify-content: space-around;
  align-content: space-evenly;
}

.threegrid {
  display: grid;
  gap: 0.8rem;
  margin: 1rem;
  padding: 1vw;
  grid-template-columns: 10vw minmax(50vw, 1fr);
  grid-template-rows: auto;
  justify-items: stretch;
  justify-content: center;
}

.minisubgrid {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  grid-template-columns: repeat(10, minmax(5vw, 1fr));
  grid-template-rows: repeat(3, minmax(auto, 1fr));
  justify-items: stretch;
  align-items: center;
  justify-content: space-around;
  align-content: space-evenly;
}

.duogrid {
  display: grid;
  margin: 0;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, minmax(auto, 1fr));
  justify-items: center;
  align-items: center;
  justify-content: space-around;
  align-content: space-evenly;
}

.duoxgrid {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(2, minmax(auto, 1fr));
  grid-template-rows: 1fr;
  justify-items: stretch;
  align-items: center;
  justify-content: space-around;
  align-content: space-evenly;
}

.Verticalminisubgrid {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  grid-template-columns: repeat(1, minmax(auto, 1fr));
  grid-template-rows: repeat(10, minmax(auto, 1fr));
  justify-items: stretch;
  align-items: center;
  justify-content: space-around;
  align-content: space-evenly;
}

/* GitHub-nappi */
.github-button {
  display: inline-block;
  background-color: #24292e;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.06), 0 4px 0 rgba(0, 0, 0, 0.1), 0 8px 0 rgba(0, 0, 0, 0.06), 0 16px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease-in-out;
}

.github-button:hover {
  background-color: #1a202c;
  color: #fff;
}

.lang-button {
  display: inline-block;
  background-color: #00000000;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.06), 0 4px 0 rgba(0, 0, 0, 0.1), 0 8px 0 rgba(0, 0, 0, 0.06), 0 16px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease-in-out;
}

.lang-button:hover {
  background-color: #00000090;
  color: #fff;
  cursor: pointer;
}

/* Vihreä latausnappi */
.download-button {
  display: inline-block;
  background-color: #48bb78;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.06), 0 4px 0 rgba(0, 0, 0, 0.1), 0 8px 0 rgba(0, 0, 0, 0.06), 0 16px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease-in-out;
}

.download-button:hover {
  background-color: #38a169;
  color: #fff;
}


/*footer stuff */
footer {
  display: flex;
  flex-direction: column;
  font-family: fantasy;
  text-align: center;

  padding: 30px;
  height: 300x;
  flex-shrink: 0;

  background-color: rgba(0, 0, 0, 0.8);
  border-top: 1px solid;
}

.footercontainer {

  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: row;
  letter-spacing: 2px;
  color: rgb(180, 180, 180);
}

.footer-tbl{
  padding-left: 5rem;
  font-size: 1.4rem;
  text-align: center;
  vertical-align: middle;
}
.footer-tbl th{
  
  padding: 10px;
  text-align: center;
  vertical-align: middle;
}
.footer-tbl td{
  padding: 10px;
  
  font-size: 1rem;
  text-align: center;
  vertical-align: middle;
}

.footerpages {
  display: flex;
  align-items: center;
  flex-wrap: no-wrap;
  padding: 0px 5px 0px 5px;
}

.footerpages td {
  padding: 0px 5px 0px 5px;
}

.footerpages a:hover {
  color: gray;
}

.footerlogo img {
  width: 100px;
  height: 100px;
  margin-right: auto;
  margin-left: auto;
}

.footerpages a {
  overflow: hidden;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
}

.footerline {
  display: grid;
  margin-top: 35px;
  justify-items: center;
  border-top: 1px solid white;
  text-decoration: none;
}

.footerline .minisubgrid {
  justify-items: stretch;
  justify-content: center;
}

.footerline p {
  font-size: 20px;
  letter-spacing: 3px;
  color: #808080;
}

.footerline svg {
  fill: #808080;
}

.footerline svg:hover {
  fill: #606060;
}

#discordfooter {
  grid-row: 2;
  grid-column: 1;
  max-width: 80px;
  max-height: 80px;
}

#youtubefooter {
  grid-row: 2;
  grid-column: 2;
  max-width: 80px;
  max-height: 80px;
}

#githubfooter {
  grid-row: 2;
  grid-column: 3;
  max-width: 80px;
  max-height: 80px;
}

#steamfooter {
  grid-row: 2;
  grid-column: 8;
  max-width: 80px;
  max-height: 80px;
}

#instagramfooter {
  grid-row: 2;
  grid-column: 9;
  max-width: 80px;
  max-height: 80px;
}

#tiktokfooter {
  grid-row: 2;
  grid-column: 10;
  max-width: 80px;
  max-height: 80px;
}


#up-btn {
  grid-row: 2;
  grid-column: 5 / span 2;
  font-size: 18px;
  width: 30px;
  border: none;
  outline: none;
  color: black;
  background-color: #808080;
  padding: 5px;
  margin-top: 8px;
  margin: auto;
  border-radius: 4px;
}

#up-btn:hover {
  background-color: #606060;
}

#copyKarBo {
  grid-row: 3;
  grid-column: 4 / span 4;
  font-size: 24px;
  color: #f0f0f0;
  text-shadow: 0 0 8px #00ff00;
  animation: float-text 2s ease-in-out infinite;
}

/* Full-width input fields */
input[type=text],
input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
.loginbutton {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

.loginbutton:hover {
  opacity: 0.8;
}


/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

img.avatar {
  width: 30%;
  border-radius: 50%;
}

.texteffect {
  color: white;
  text-decoration: none;
}

.texteffect:hover {
  opacity: 0.8;
}

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  padding-top: 60px;
  text-decoration: none;
}

/* Modal Content/Box */
.modal-content {
  background-color: #202020;
  padding: 25px;
  margin: 5% auto 15% auto;
  /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 40%;
  min-width: 515px;
  /* Could be more or less, depending on screen size */
}

.modal-content {
  -webkit-animation-name: fadeInSlide;
  -webkit-animation-duration: 0.2s;
  animation-name: fadeInSlide;
  animation-duration: 0.2s;
}
/* The Close Button (x) */
.imageclose,
.loginclose {
  position: absolute;
  right: 25px;
  top: 0;
  color: #880;
  font-size: 35px;
  font-weight: bold;
}

.imageclose:hover,
.imageclose:focus,
.loginclose:hover,
.loginclose:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}



.skills {
  padding: 20px;
}

.skills h3 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 20px;
}

.skills p {
  font-size: 18px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}

.skill {
  margin-bottom: 10px;
}

.skill span {
  display: inline-block;
  width: 150px;
}

.progress-bar {
  background-color: #ddd;
  height: 20px;
  border-radius: 10px;
  margin-top: 5px;
  text-align: center;
  font-size: 18px;
}

.progress {
  background-color: #4caf50;
  height: 100%;

  border-radius: 10px;
}

.linkki {
  color: white;
  text-decoration: none;
}

.thumb {
  float: left;
  /* must be floated for same cross browser position of larger image */
  position: relative;
}

.thumb img {
  border: 1px solid #000;
  vertical-align: bottom;
}

.thumb:hover {
  border: 0;
  /* IE6 needs this to show large image */
  z-index: 1;
}

.thumb span {
  position: absolute;
  visibility: hidden;
}

.thumb:hover span {
  visibility: visible;
  top: 37px;
  left: 37px;
}

.thumb:hover span img {
  visibility: visible;

  max-height: 220%;
  max-width: 220%;
  top: 37px;
  left: 37px;
}



/* Slideshow container */
.slideshow-container {
  min-width: 50vw;
  min-height: 50vh;
  min-width: 50vw;
  min-height: 50vh;
  position: relative;
  margin: auto;
  display: grid;
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
}

.slideshow-container img,
.slideshow-container video {
  max-width: 50vw;
  max-height: 50vh;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  width: auto;
  padding: 16px;
  top: 50%;
  margin-bottom: calc(50% - 22px);
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.prev {
  left: 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a grey background color */
.prev:hover,
.next:hover {
  background-color: #f1f1f1;
  color: black;
}



.imagetomodal:hover {
  opacity: 0.7;
}

/* The Modal (background) */
.imagemodal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 3;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}

/* Modal Content (image) */
.imagemodal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.imagemodal-content,
#caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}






*::-webkit-scrollbar {
  width: 0;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;
}

* {
  -ms-overflow-style: none;
}

ol,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.carousel {
  position: relative;
  padding-top: 50%;
  filter: drop-shadow(0 0 10px #0003);
  perspective: 100px;

}

.carousel__viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  align-items: stretch;
  margin: auto;
  max-width: 50vw;
}

.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
}

.carousel__slide img {
  position: relative;
  object-fit: contain;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.carousel__slide:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -40%, 70px);
  font-size: 2em;
}

.carousel__snapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
}

@media (hover: hover) {
  .carousel__snapper {
    animation-name: tonext, snap;
    animation-timing-function: ease;
    animation-duration: 4s;
    animation-iteration-count: infinite;
  }

  .carousel__slide:last-child .carousel__snapper {
    animation-name:  snap; /*tostart,*/
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__snapper {
    animation-name: none;
  }
}

.carousel:hover .carousel__snapper,
.carousel:focus-within .carousel__snapper {
  animation-name: none;
}

.carousel__navigation {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}

.carousel__navigation-list,
.carousel__navigation-item {
  display: inline-block;
}

.carousel__navigation-button {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #808080;
  background-clip: content-box;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  font-size: 0;
  transition: transform 0.1s;
}

.carousel::before,
.carousel::after,
.carousel__prev,
.carousel__next {
  position: absolute;
  top: 0;
  margin-top: 37.5%;
}


/*Carousel with controls*/




/*LOGIN REGISTER Form Section */
.form-section {
  display: none;
}

.form-section.active {
  display: block;
}


input[type="text"], input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 3px solid #ccc;
  border-radius: 1px;
  font-size: 1.2rem;
}

/* Profile container on header */

/* Profile Container Styling */

.profile-container span {
  margin: 0.5em;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

/* Profile Image Styling */
.profile-image {
  z-index: -1;
  width: 250px;
  height: 250px;
  border: 0px solid #ffffffaf;
  border-radius: 50%;
  transition: transform 0.4s ease; /* Smoothly move image */
}
/* Profile picture styling */
.profile-container {
  display: flex;
  align-items: center;
  position: relative;
}


/* Profile picture styling */
.profile-container {
  display: flex;
  align-items: center;
  position: relative;
}


.profile-menu {
  display: none;
  position: absolute;
  top: calc(50% - 1);
  transform: translateY(-50%);
  opacity: 0;
  left: calc(50%);
}

.profile-menu a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #ffffff;
  opacity: 0; /* Hidden initially for fade effect */
}

/* When dropdown is open */
.profile-container.open .profile-image {
  transform: translateX(-125px); /* Move image to the right */
}

.profile-container.open .profile-menu {
  display: block;
  animation: fadeInSlide 0.4s ease forwards; /* Trigger the animation */
}

.profile-container.open .profile-menu a {
  animation: fadeInText 0.4s ease forwards; /* Animate each item */
  animation-delay: 0.1s; /* Delay for smooth text fade */
}



/* Container for project cards */
.project-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  justify-content: center;
}

/* Project card styling */
.project-card {
  width: 300px;
  background-color: #111; /* Dark background */
  border-radius: 5px; /* Squared corners */
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  text-decoration: none;
  color: #fff; /* White text */
  transition: transform 0.3s, background-color 0.3s;
}

/* On hover, apply a theme color and scale effect */
.project-card:hover {
  transform: scale(1.05);
  background-color: rgb(25, 212, 25); /* Change to blue theme on hover */
}


.project-card:active {
  background-color: #00dfdf; /* Darker shade for active click */
}

/* Subtle blur for project image background */
.project-image {
  position: relative;
  height: 130px;
  background-size: cover;
  background-position: center;
  filter: blur(0px); /* Subtler blur effect */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Project title overlay */
.project-title {
  position: absolute;
  font-size: 1.2em;
  font-weight: bold;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6); /* Dark overlay for readability */
  padding: 5px 12px;
  border-radius: 3px;
}

/* Project description styling */
.project-description {
  padding: 10px;
  font-size: 0.9em;
  color: #ccc;
}

/* Keyframe Animations */
@keyframes fadeInSlide {
  0% {
      opacity: 0;
      transform: translateX(-125px); /* Start from the left */
  }
  100% {
      opacity: 1;
      transform: translateX(0); /* End at original position */
  }
}

@keyframes fadeInText {
  0% {
      opacity: 0;
      transform: translateX(-125px); /* Slide text from left */
  }
  100% {
      opacity: 1;
      transform: translateX(0); /* At final position */
  }
}


@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0)
  }

  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}



/*main carousell*/

@keyframes tonext {
  75% {
    left: 0;
  }

  95% {
    left: 100%;
  }

  98% {
    left: 100%;
  }

  99% {
    left: 0;
  }
}

@keyframes tostart {
  75% {
    left: 0;
  }

  95% {
    left: -300%;
  }

  98% {
    left: -300%;
  }

  99% {
    left: 0%;
  }
}

@keyframes snap {
  96% {
    scroll-snap-align: center;
  }

  97% {
    scroll-snap-align: none;
  }

  99% {
    scroll-snap-align: none;
  }

  100% {
    scroll-snap-align: center;
  }
}

@keyframes fade {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}


@-webkit-keyframes animatezoom {
  from {
    -webkit-transform: scale(0)
  }

  to {
    -webkit-transform: scale(1)
  }
}

@keyframes animatezoom {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

@keyframes spin {
  0% {
      transform: rotateX(0) rotateY(0);
  }

  50% {
      transform: rotateX(10deg) rotateY(10deg);
  }

  100% {
      transform: rotateX(0) rotateY(0);
  }
}

/* Neon Text Blink */
@keyframes neon-blink {
  from {
      opacity: 1;
  }

  to {
      opacity: 0.7;
  }
}

@keyframes float-text {
  0% {
      transform: translateY(0);
  }

  50% {
      transform: translateY(-10px);
  }

  100% {
      transform: translateY(0);
  }
}
























































@media screen and (max-width: 880px) {

  header {
    display: grid;
    grid-template-columns: minmax(auto, 1fr);
    grid-template-rows: repeat(2, auto);
    justify-items: center;
  }

  main {
    flex: 1 0 auto;
    text-align: center;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.9);
    border-left: 0;
    border-right: 0;
    min-height: 100vh;
  }

  #hamburger {
    display: grid;
    font-size: 1.5em;
  }

  .logo-container {
    width: 100%;
    display: grid;
    align-self: center;
    align-content: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
  }

  .headlinks {
    display: none;
    grid-template-columns: minmax(120px, 1fr);
    grid-template-rows: repeat(8, 35px);
    width: 100%;
    align-self: center;
    text-align: center;
    transition: transform 0.4s ease; /* Smooth transitions */
  }

  .headlinks a {
    text-align: center;
  }

  .dropdown a {
    text-align: center;
  }

  .logo-container a {

    align-self: center;
  }


  .dropdown-content {
    max-width: 160px;
    display: none;
    position: absolute;
    background-color: rgba(32, 32, 32, 0.9);
    margin: 0 auto;
    margin-top: 0;
    z-index: 1;
    color: black;
    border-radius: 8px;
  }

  .sidedropdown-content {

    display: inline-block;
    max-width: 160px;
    display: none;
    position: relative;
    margin-left: 0;
    margin-top: 0;
    background-color: rgba(6, 32, 32, 0.7);
    z-index: 2;
    color: black;
    border-radius: 8px;
  }

  .dropdown-content a,
  .sidedropdown-content a {
    color: rgb(255, 255, 255);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  #up-btn {
    grid-row: 2;
    grid-column: 5 / span 2;
  }

  #copyKarBo {
    grid-row: 3;
    grid-column: 4 / span 4;
    font-size: 24px;
    color: #f0f0f0;
    text-shadow: 0 0 8px #00ff00;
    animation: float-text 2s ease-in-out infinite;
  }



  .threegrid {
    display: flex;
    gap: 0.8rem;
    margin: -1rem;
    margin-top: 5vh;
    margin-bottom: 5vh;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 10px;
  }

  .footercontainer {
    display: flex;
    letter-spacing: 2px;
    color: rgb(180, 180, 180);
    flex-direction: column;
    align-items: center;
  }
}