body {
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
  overflow-y: hidden;
  grid-template-columns: repeat(40,1fr);
  grid-template-rows: repeat(40,1fr);
  display: grid;
  background-color: black;
  margin: 0;
 
}

@font-face {
  font-family: 'ClashGrotesk-Semibold';
  src: url("Fonts/ClashGrotesk-Semibold.otf");
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: Napzer;
  src: url("Fonts/Napzer-Regular.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Neco';
  src: url("Fonts/Neco-Bold.otf");
  font-weight: normal;
  font-style: normal;
}

#main {
  grid-template-columns: repeat(40,1fr);
  grid-template-rows: repeat(40,1fr);
  display: grid;
  position: relative;
  grid-column: 2/40;
  grid-row: 2/40;
  border: 0.125rem solid antiquewhite;
  overflow: hidden;
}

#background {
  position: absolute;
  top: -25%;
  left: -25%;
  width: 130%;
  height: 130%;
  background-image: url("Bilkder/BACK2.jpg");
  background-size: 160% auto;
  background-position: center;
  transition: transform 0.1s linear;
}

h1 {
  font-family: 'Neco', Arial, sans-serif;
  color: antiquewhite;
  grid-row: 4/6;
  display: flex;
  align-items: flex-end;
  grid-column: 2/10;
  z-index: 10;
  position: relative;
  white-space: nowrap;
  font-size: 3vw;
 }

 h2 {
  font-family: 'Napzer', Arial, sans-serif;
  color: antiquewhite;
  font-size: 4vw;
  grid-row: 3/5;
  grid-column: 2/4; 
  z-index: 10;
  position: relative;
 }

 #nav{
  color:antiquewhite;
  z-index:2;
  font-family: neco;
  grid-column: 2/10;
  grid-row:19/30;
  font-size:2vw;
}

  .navitem{
  cursor: pointer;
  transition: 0.4s;
  }
 .navitem:hover{
 margin-left: 0.9375rem;
}

  .Projekt{
  transform: translateX(100%);
  opacity: 0;
  z-index: 10;
  transition: all 0.1s ease;
  border-radius: 0.625rem;
  height: 16vh;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
}

 #Projektdiv{
 grid-column: 32/40;
 grid-row: 6/38;
 display: flex;
 flex-direction: column;
 gap: 1.25rem;
 height: calc(4 * 16vh + 3 * 1.25rem);
overflow-y: auto;
 overflow-x: hidden;
 position: relative;
padding: 0;
margin: 0;
 scroll-behavior: smooth;
 scrollbar-width: none;        
-ms-overflow-style: none;

 }
  
#Projektdiv::-webkit-scrollbar {
  display: block
}
 
#Projekt1{

  background-image: url("Bilkder/guessthecountry.jpg");
  background-size: 100% 120%; 
  background-position: center;
  background-color: none;
 
}
#Projekt2{

  background-image: url("Bilkder/GAMBLING.webp");
  background-size: 100% 120%; 
  background-position: center;
  background-color: none;
}
#Projekt3{
 
  background-image: url("Bilkder/scrambler.png");
  background-size: 100% 120%; 
  background-position: center;
  background-color: none;
}

#Projekt4{

  background-image: url("Bilkder/Quiz.PNG");
  background-size: 100% 120%; 
  background-position: center;
  background-color: none;
}
#Projekt5{

  background-image: url("Bilkder/poco.jpg");
  background-size: 100% 120%; 
  background-position: center;
  background-color: none;
}
#Projekt6{
  background-image: url("Bilkder/figma.png");
  background-size: 100% 100%; 
  background-position: center;
  background-color: none;
}
#Projekt7{
  background-image: url("Bilkder/PlantbuddyDesign.jpg");
  background-size: 100% 120%; 
  background-position: center;
  background-color: none;
}
#Projekt8{
  background-image: url("Bilkder/Väder.jpg");
  background-size: 100% 120%;
  background-position: center;
  background-color: none;
}
#Projekt9{
  background-image: url("Bilkder/samurai-pixel-art-3840x2160-15196.jpg");
  background-size: 100% 120%;
  background-position: center;
  background-color: none;
}
       

        .slide-in {
          animation: slideInFromRight 0.2s ease-out forwards;
        }

        @keyframes slideInFromRight {
          from {
            transform: translateX(100%);
            opacity: 0;
            filter: blur(0.625rem);
          }
          to {
            transform: translateX(0);
            opacity: 1;
            filter: blur(0);
          }
        }

        .slide-out {
          animation: slideOutToRight 0.2s ease-out forwards;
        }

        @keyframes slideOutToRight {
          from {
            transform: translateX(0);
            opacity: 1;
            filter: blur(0);
          } 
          to {
            transform: translateX(100%);
            opacity: 0;
            filter: blur(0.625rem);
          }
        }

        .Content{
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background: rgba(0,0,0,0.5);
          display: flex;
          align-items: center;
          justify-content: flex-start;
          flex-direction: column;
          opacity: 0;
          transition: 0.4s;
          
        }

        .Projekt:hover .Content {
          opacity: 1;
        }

        

        h3{
          font-family: 'ClashGrotesk-Semibold', Arial, sans-serif;
          color: antiquewhite;
          font-size: 1vw;
          text-align: center;
          z-index: 10;
          position: relative;
          margin: 0;
          padding: 0;
          padding-top: 0.625rem;
          text-shadow: 0.125rem 0.125rem 0.125rem rgb(34, 34, 34);
        }

        .showdonut{
          animation: slideInFromRight 0.8s ease-out forwards;
        }

        .hidedonut{
          animation: slideOutToRight 0.2s ease-out forwards;
        }

        #beskrivning{
          font-family: neco;
          color: white;
          text-shadow: 0.125rem 0.125rem 0.125rem rgb(34, 34, 34);
          font-size: 0.82vw;
          text-align: center;
          padding: 0 0.625rem 0 0.625rem;
        }

        #codes{
          font-family: clashGrotesk-Semibold, Arial, sans-serif;
          text-shadow: 0.125rem 0.125rem 0.125rem rgb(34, 34, 34);
          font-size: 0.5vw;
          text-align: center;
          padding: 0 0.625rem 0 0.625rem;
          color: azure;
        }

        #omMig{
          font-family: 'Courier New', Courier, monospace;
          color: antiquewhite;
          grid-column: 26/38;
          grid-row: 12/30;
          font-size:1.4vw;
          z-index:2;
          display: none;
        }
        #texten {
        overflow: hidden;
  
        
      display: inline;
  position: relative;
}
#texten::after {
  content: "";
  display: inline-block;
  width: 0.125rem;
  height: 1em;
  background: antiquewhite;
  margin-left: 0.125rem;
  vertical-align: bottom;
  animation: blinkCaret 0.75s step-end infinite;
}

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


.carousel-container .Projekt.active .Content {
    opacity: 1;
    border-radius: 0.625rem;
}


.carousel-container .Content {
    opacity: 0;
    transition: 0.4s;
}


#Projektdiv .Content:hover {
    opacity: 1;
    border-radius: 0.625rem;
}
.carousel-container {
            position: fixed;
            width: 25vw;
            height: 80vh ;
            overflow: hidden;
            border-radius: 1.25rem;
            box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.3);
         
        
            
            grid-row:13/30;
            grid-column: 30/40;
            display: none;
            top:15%;
            left: 70%;

        }

        .carousel-track {
            position: relative;
            height: 100%;
            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            padding: 3.125rem 0;
        }

        .Projekt {
            position: absolute;
            width: calc(100% - 2.5rem);
            height: 15.625rem;
            left: 1.25rem;
            border-radius: 0.9375rem;
            padding: 1.875rem;
            cursor: pointer;
            transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            border: 0.125rem solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(0.3125rem);
            display: flex;
            align-items: center;
            justify-content: center;
            transform-origin: center;
            box-shadow: 0 0.5rem 1.5625rem rgba(0, 0, 0, 0.15);
            pointer-events: none;
        }

        .Projekt:hover {
            border-color: rgba(255, 255, 255, 0.3);
            box-shadow: 0 0.75rem 2.1875rem rgba(0, 0, 0, 0.2);
        }

        .Projekt.active {
            transform: scale(1) translateY(0) !important;
            opacity: 1 !important;
            z-index: 10;
            border-color: rgba(255, 255, 255, 0.4);
            box-shadow: 0 0.9375rem 2.5rem rgba(0, 0, 0, 0.25);
            pointer-events: auto;
        }

        .Projekt.prev, .Projekt.next {
            opacity: 0.6;
            transform: scale(0.85);
            z-index: 5;
        }

        .Projekt.far {
            opacity: 0.3;
            transform: scale(0.7);
            z-index: 1;
        }

        .Projekt.hidden {
            opacity: 0;
            transform: scale(0.5);
            z-index: 0;
        }

        .Content {
            text-align: center;
            max-width: 100%;
        }

        .Content h3 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
            text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
            transition: font-size 0.6s ease;
        }

        .active .Content h3 {
            font-size: 2.1rem;
        }

    

       

        #codes {
            font-size: 1rem;
            font-weight: bold;
        }

        #codes span {
            padding: 0.375rem 0.75rem;
            border-radius: 0.3125rem;
            background: rgba(0, 0, 0, 0.2);
            margin: 0 0.1875rem;
            display: inline-block;
            transition: all 0.3s ease;
        }

        .active #codes span {
            padding: 0.4375rem 0.875rem;
        }

    
   
        
   


        .nav-btn {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 2.8125rem;
            height: 2.8125rem;
            background: rgba(61, 61, 61, 0.8);
            border: 0.125rem solid rgba(250, 235, 215, 0.6);
            border-radius: 50%;
            color: white;
            font-size: 1.125rem;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 20;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nav-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateX(-50%) scale(1.1);
        }

        .prev-btn {
            top: 0.625rem;
        }

        .next-btn {
            bottom: 0.625rem;
        }


        
        
        .focus-label {
            position: absolute;
            top: 50%;
            left: -0.3125rem;
            width: 0.3125rem;
            height: 3.75rem;
            background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.8), transparent);
            transform: translateY(-50%);
            border-radius: 0 0.3125rem 0.3125rem 0;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .carousel-container:hover .focus-label {
            opacity: 1;
        }


        @media (max-width: 500px) {
            .carousel-container {
                width: 90vw;
                height: 70vh;
                min-height: 31.25rem;
            }
            
            .Projekt {
                height: 12.5rem;
                padding: 1.5625rem;
                width: calc(100% - 1.25rem);
                left: 0.625rem;
            }
            
            .Content h3 {
                font-size: 1.3rem;
            }
            
            .active .Content h3 {
                font-size: 1.5rem;
            }
            
            #beskrivning {
                font-size: 0.85rem;
            }
        }

        .scroll-hint {
            position: absolute;
                bottom: 3.75rem;
            font-size: 0.8rem;
            opacity: 0.6;
            text-align: center;
            z-index: 15;
            animation: fadeInOut 3s ease-in-out infinite;
        }

        @keyframes fadeInOut {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.7; }
        }















        @media (max-width: 480px) {
            body {
                display: block;
                overflow-x: hidden;
                overflow-y: hidden;
                padding: 0 0.5rem;
            }

            #donut-container {
                display: none !important;
            }

            #background {
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background-size: cover;
            }

            #main {
                grid-column: 1 / -1;
                grid-row: 1 / -1;
                border: none;
                min-height: 100vh;
                width: auto;
                position: relative;
            }

            h1, h2, #nav {
                grid-column: 1 / -1;
                grid-row: auto;
            }

            h1 {
                font-size: 6vw;
                justify-content: center;
            }

            h2 {
                font-size: 8vw;
                justify-content: center;
                text-align: center;
            }

            #nav {
                font-size: 6vw;
                flex-direction: row;
                display: flex;
                justify-content: space-around;
            }

            /* Hide "Hem" on mobile — no home page to go to */
            #nav .navitem:first-child {
                display: none;
            }

            #omMig {
                font-size: 4vw;
                padding: 1.25rem;
                text-align: center;
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 90%;
                max-height: 80vh;
                overflow-y: auto;
                z-index: 100;
                background: transparent;
                box-sizing: border-box;
            }

            #Projektdiv {
                grid-column: 1 / -1;
                grid-row: auto;
                width: 100%;
                height: auto;
                padding-bottom: 2.5rem;
            }

            /* Horizontal scrolling carousel on mobile */
            .carousel-container {
                position: fixed !important;
                top: 50% !important;
                left: 0 !important;
                transform: translateY(-50%) !important;
                width: 100vw !important;
                height: auto !important;
                min-height: 0 !important;
                background: transparent !important;
                backdrop-filter: none !important;
                box-shadow: none !important;
                border-radius: 0 !important;
                z-index: 90;
                padding: 0 !important;
                margin: 0 !important;
                animation: none !important;
            }

            /* Hide the vertical nav buttons */
            .carousel-container .nav-btn {
                display: none !important;
            }

            /* Make the track a horizontal flex row */
            .carousel-track {
                position: static !important;
                display: flex !important;
                flex-direction: row !important;
                overflow-x: auto !important;
                overflow-y: hidden !important;
                gap: 1rem !important;
                padding: 1rem !important;
                scroll-snap-type: x mandatory !important;
                -webkit-overflow-scrolling: touch !important;
                scrollbar-width: none !important;
                transition: none !important;
                transform: none !important;
                height: auto !important;
            }

            .carousel-track::-webkit-scrollbar {
                display: none !important;
            }

            /* Each project card: horizontal, snapping */
            .Projekt {
                position: relative !important;
                flex: 0 0 80vw !important;
                width: 80vw !important;
                height: 12rem !important;
                top: auto !important;
                left: auto !important;
                transform: none !important;
                opacity: 1 !important;
                scroll-snap-align: center !important;
                border-radius: 1rem !important;
                padding: 0 !important;
                pointer-events: auto !important;
                border: 0.125rem solid rgba(255,255,255,0.2) !important;
                animation: none !important;
                transition: none !important;
            }

            .Projekt.showdonut,
            .Projekt.hidedonut {
                animation: fadeInMobile 0.3s ease-out forwards !important;
            }

            @keyframes fadeInMobile {
              from {
                opacity: 0;
              }
              to {
                opacity: 1;
              }
            }

            /* Always show content overlay on mobile */
            .Projekt .Content {
                opacity: 1 !important;
                border-radius: 1rem !important;
                padding: 0.75rem 1rem !important;
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: 100% !important;
                height: 100% !important;
                box-sizing: border-box !important;
                justify-content: flex-start !important;
            }

            .Content h3 {
                font-size: 1.2rem;
            }

            .active #beskrivning {
                font-size: 0.8rem !important;
            }

            .showdonut,
            .hidedonut {
                animation: fadeInMobile 0.3s ease-out forwards !important;
            }

            @keyframes fadeInMobile {
              from {
                opacity: 0;
              }
              to {
                opacity: 1;
              }
            }

            @keyframes slideInFromRight {
              from {
                transform: none;
                opacity: 0;
                filter: none;
              }
              to {
                transform: none;
                opacity: 1;
                filter: none;
              }
            }

            @keyframes slideOutToRight {
              from {
                transform: none;
                opacity: 1;
                filter: none;
              }
              to {
                transform: none;
                opacity: 0;
                filter: none;
              }
            }

            #codes {
                font-size: 0.7rem;
            }
        }