/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }
  
  /* Sections
     ========================================================================== */
  
  /**
   * Remove the margin in all browsers.
   */
  
  body {
    margin: 0;
  }
  
  /**
   * Render the `main` element consistently in IE.
   */
  
  main {
    display: block;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  
  /* Grouping content
     ========================================================================== */
  
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  
  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /* Text-level semantics
     ========================================================================== */
  
  /**
   * Remove the gray background on active links in IE 10.
   */
  
  a {
    background-color: transparent;
  }
  
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }
  
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  
  b,
  strong {
    font-weight: bolder;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /**
   * Add the correct font size in all browsers.
   */
  
  small {
    font-size: 80%;
  }
  
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  sup {
    top: -0.5em;
  }
  
  /* Embedded content
     ========================================================================== */
  
  /**
   * Remove the border on images inside links in IE 10.
   */
  
  img {
    border-style: none;
  }
  
  /* Forms
     ========================================================================== */
  
  /**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
  
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }
  
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  
  button,
  input {
    /* 1 */
    overflow: visible;
  }
  
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  
  button,
  select {
    /* 1 */
    text-transform: none;
  }
  
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
  
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
    appearance: button;
  }
  
  /**
   * Remove the inner border and padding in Firefox.
   */
  
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  
  /**
   * Restore the focus styles unset by the previous rule.
   */
  
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  
  /**
   * Correct the padding in Firefox.
   */
  
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  
  legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
  
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  
  progress {
    vertical-align: baseline;
  }
  
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
  
  textarea {
    overflow: auto;
  }
  
  /**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
  
  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }
  
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  
  [type="search"] {
    -webkit-appearance: textfield; /* 1 */
    appearance: button;
    outline-offset: -2px; /* 2 */
  }
  
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  
  /* Interactive
     ========================================================================== */
  
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
  
  details {
    display: block;
  }
  
  /*
   * Add the correct display in all browsers.
   */
  
  summary {
    display: list-item;
  }
  
  /* Misc
     ========================================================================== */
  
  /**
   * Add the correct display in IE 10+.
   */
  
  template {
    display: none;
  }
  
  /**
   * Add the correct display in IE 10.
   */
  
  [hidden] {
    display: none;
  }
  ._pageWrapper_18kd9_1 {
    background-color: #1a1a1a; 
    color: #ffffff;
    min-height: 100vh;
    padding: 40px 20px;
    font-family: sans-serif;
}

._container_18kd9_9 {
    max-width: 900px;
    margin: 0 auto;
}

._backButton_18kd9_14 {
    color: #00adb5; 
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 30px;
    transition: color 0.2s ease;
}

._backButton_18kd9_14:hover {
    color: #007a80;
    text-decoration: underline;
}

._header_18kd9_28 h1 {
    font-size: 2.5rem;
    margin-bottom: 25px;
}

._contentSection_18kd9_33 h2, ._gallerySection_18kd9_33 h2 {
    color: #00adb5;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

._contentSection_18kd9_33 p {
    line-height: 1.6;
    color: #ddd;
    font-size: 1.1rem;
    margin-bottom: 40px;
}

._imageGrid_18kd9_47 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

._galleryImage_18kd9_54 {
    width: 100%;
    max-height: 450px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    object-fit: cover;
}

._itchButton_18kd9_62 {
    display: inline-block;
    background-color: #da5757; /* Itch.io-röd */
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.2s ease;
}

._itchButton_18kd9_62:hover {
    background-color: #bc4343;
}

._errorContainer_18kd9_77 {
    text-align: center;
    padding: 100px 20px;
    color: white;
    background-color: #1a1a1a;
    min-height: 100vh;
}
._titleContainer_18kd9_84 {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 15px;
}

/* Liten rundad logotyp bredvid titeln */
._projectLogo_18kd9_92 {
    width: 55px;
    height: 55px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #00adb5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Gemensam behållare för alla tech-badges */
._engineBadges_18kd9_102 {
    display: flex;
    gap: 12px;
    margin-bottom: 35px;
}

/* Individuella runda tech-badges */
._engineBadge_18kd9_102 {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #222222;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #333333;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Egenbyggd Unreal Blueprint-ikon */
._blueprintIcon_18kd9_122 {
    width: 26px;
    height: 26px;
    background-color: #a66200; /* Blueprint-orange */
    border: 1.5px solid #ffaa00;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Arial Black', sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
}

/* Rutmönster-effekt inuti Blueprint-ikonen */
._bpGrid_18kd9_141 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 4px 4px;
    background-image: 
        linear-gradient(to right, rgba(255,255,255,0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.08) 1px, transparent 1px);
}

._blueprintIcon_18kd9_122 span {
    position: relative;
    z-index: 2;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* Footer-knappar för Itch och GitHub har brister*/
._footerButtons_18kd9_158 {
    margin-top: 50px;
    display: flex;
    gap: 20px;
}

._githubButton_18kd9_164 {
    display: inline-block;
    background-color: #333333;
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #444444;
    transition: background 0.2s ease;
}

._githubButton_18kd9_164:hover {
    background-color: #444444;
}
/* --- LIGHTBOX STYLING --- */


._lightboxOverlay_18kd9_182 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9); 
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; 
    cursor: zoom-out; 
    animation: _fadeIn_18kd9_1 0.2s ease-out;
}

/* Behållare för den stora bilden */
._lightboxContent_18kd9_198 {
    position: relative;
    max-width: 90%;
    max-height: 85%;
    display: flex;
    justify-content: center;
    align-items: center;
}


._lightboxContent_18kd9_198 img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    animation: _zoomIn_18kd9_1 0.25s cubic-bezier(0.1, 0.8, 0.25, 1);
}


._lightboxClose_18kd9_218 {
    position: absolute;
    top: -40px;
    right: 0;
    color: #ffffff;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

._lightboxClose_18kd9_218:hover {
    color: #00adb5; 
}


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

@keyframes _zoomIn_18kd9_1 {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
._app_13f8i_1 {
    font-family: sans-serif;
    position: relative;
}

/* ************************************** Nave bar ************************************** */

._nav_13f8i_8 {
    height: 90px;
    padding: 10px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0 10px #ddd;
    width: 100%;
    position: fixed;
    z-index: 100;
    background-color: white;
}

._logo_13f8i_21 {
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    flex-direction: row;        
    gap: 15px;
    cursor: pointer;
    text-decoration: none;      
}

._logo_13f8i_21>svg {
    animation: _logo_13f8i_21 9s linear infinite;
}

._logo_13f8i_21>h5 {
    margin: 0;
    padding: 0;
    font-family: 'Allerta Stencil', sans-serif;
    font-weight: bold;
    font-size: 20px;
    color: var(--primary-main);
    text-transform: uppercase;
}

._nav_13f8i_8>ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

._nav_13f8i_8>ul>li {
    padding: 20px 30px;
    cursor: pointer;
}

._nav_13f8i_8>ul>li>a {
    color: var(--word-color);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    transition: .3s;
}

._nav_13f8i_8>ul>li:hover>a {
    color: var(--primary-light);
}

._menu-icon_13f8i_69 {
    display: none;
}

._checkbox2_13f8i_73 {
    display: none;
}

._toggle2_13f8i_77 {
    position: relative;
    width: 45px;
    height: 35px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition-duration: .5s;
}

._bars_13f8i_90 {
    width: 100%;
    height: 4px;
    background-color: var(--primary-main);
    border-radius: 6px;
}

._bar5_13f8i_97 {
    transition-duration: .8s;
}

._bar4_13f8i_101,
._bar6_13f8i_102 {
    width: 80%;
}

._checkbox2_13f8i_73:checked+._toggle2_13f8i_77 ._bars_13f8i_90 {
    position: absolute;
    transition-duration: .5s;
}

._checkbox2_13f8i_73:checked+._toggle2_13f8i_77 ._bar5_13f8i_97 {
    transform: scaleX(0);
    transition-duration: .5s;
}

._checkbox2_13f8i_73:checked+._toggle2_13f8i_77 ._bar4_13f8i_101 {
    width: 100%;
    transform: rotate(45deg);
    transition-duration: .5s;
}

._checkbox2_13f8i_73:checked+._toggle2_13f8i_77 ._bar6_13f8i_102 {
    width: 100%;
    transform: rotate(-45deg);
    transition-duration: .5s;
}

._checkbox2_13f8i_73:checked+._toggle2_13f8i_77 {
    transition-duration: .5s;
    transform: rotate(180deg);
}

._menu_13f8i_69 {
    display: none;
}

@keyframes _logo_13f8i_21 {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(270deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 1100px) {
    ._project_13f8i_160 {
        grid-template-columns: 1fr; /* Lägger bilden ovanför texten på mobil */
        grid-gap: 20px;
        margin-bottom: 60px;
        width: 100%;
        padding: 0 15px; /* Ger lite luft till kanten på mobilen */
    }

    ._project-image_13f8i_168 {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    ._project-image_13f8i_168>img {
        width: 100%;        
        max-width: 480px;  
        height: auto;      
        aspect-ratio: 16 / 10; 
    }

    ._project-info_13f8i_181 {
        display: flex;
        align-items: center; /* Centrerar rubrik och taggar på mobil */
        text-align: center;   /* Centrerar texten */
        margin-top: 10px;     /* Rensar bort den gamla krockande marginalen */
        margin-bottom: 0;
    }

    ._projectTitleLink_13f8i_189 {
        font-size: 1.8rem;    /* Lite mer lagom rubrikstorlek för mobil */
        margin-bottom: 8px;
    }

    ._project-info_13f8i_181>p {
        text-align: center;
        max-width: 100%;      /* Låter texten använda hela mobilbredden */
        font-size: 1.05rem;
        margin-bottom: 20px;
    }

    ._project-buttons_13f8i_201 {
        justify-content: center; /* Centrerar knapparna under texten */
        width: 100%;
        gap: 15px;
    }
}

    @media (max-width: 1100px) {
    ._menu-icon_13f8i_69 {
        display: block;
    }

    ._nav_13f8i_8>ul {
        display: none;
    }

    /* Fixar loggan till en horisontell rad utan hoptryckta kanter på mindre skärmar */
    ._logo_13f8i_21 {
        flex-direction: row !important; 
        border: none !important;        
        border-radius: 0 !important;
        width: auto !important;
        height: auto !important;
        gap: 12px;
        justify-content: flex-start;
    }

    ._logo_13f8i_21>h5 {
        font-size: 15px !important;    /* Gör namnet läsbart på mindre skärmar */
        text-align: left !important;
        width: auto !important;
    }
}

    ._menu_13f8i_69 {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
    }

    ._menu_13f8i_69>li {
        padding: 20px 30px;
        cursor: pointer;
        width: 100%;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: flex-end;
    }

    ._menu_13f8i_69>li>a {
        color: var(--word-color);
        font-weight: bold;
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: 1px;
        transition: .3s;
    }

    ._menu_13f8i_69>li:hover>a {
        color: var(--primary-light);
    }



/* ************************************** Home ************************************** */

._home_13f8i_269 {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
}


._bgVideo_13f8i_279 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: 1; 
}


._home_13f8i_269::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(30, 30, 30, 0.6), rgba(30, 30, 30, 0.6));
    z-index: 2; 
}


._home-content_13f8i_302 {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 900px;
    width: 92%;
    text-align: center;
    z-index: 3; 
    color:white;

     background: rgba(0, 0, 0, 0.35); 
    padding: 30px 40px;
    border-radius: 12px;
    backdrop-filter: blur(4px);
}
._home-content_13f8i_302 > h1 {
    color: #ffffff !important;
    font-size: 50px;
    margin-bottom: 15px;
     text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.6);
}
._home-content_13f8i_302 > p {
    color: #f0f0f0 !important;
    font-size: 20px;
    margin-bottom: 35px;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
}

._scroll-icon_13f8i_331 {
    position: absolute;
    bottom: 20px;
    z-index: 3;
}

._contactNav_13f8i_337 {
    display: flex;
    transition: all 0.4s ease-in-out; 
}
._topbar_13f8i_341 {
    position: static;
    flex-direction: row; 
    gap: 15px; 
    background-color: transparent;
    box-shadow: none;
    margin-left: 20px; 
}
._contactNav_13f8i_337 a svg {
    transition: transform 0.2s;
}
._contactNav_13f8i_337 a:hover svg {
    transform: scale(1.1);
}
._sidebar_13f8i_355 {
    position: fixed; 
    top: 40%; 
    left: 0;
    width: 50px;
    flex-direction: column; 
    align-items: center;
    background-color: white;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 0 5px 5px 0; 
    padding: 10px 0;
    z-index: 999; 

     opacity: 1;
    pointer-events: auto;
}
@media (max-width: 768px) {
    ._sidebar_13f8i_355 {
        display: none; 
    }
}

._scroll-down_13f8i_377 {
    --color: black;
    --sizeX: 30px;
    --sizeY: 50px;
    position: relative;
    width: var(--sizeX);
    height: var(--sizeY);
    margin-left: calc(--sizeX / 2);
    border: calc(var(--sizeX) / 10) solid var(--color);
    border-radius: 50px;
    box-sizing: border-box;
    margin-bottom: 16px;
}

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

@keyframes _scroll-down-anim_13f8i_1 {
    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_13f8i_429 {
    padding: 6px 0 0 0;
    margin-left: -3px;
    margin-top: 48px;
    width: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

._chevron-down_13f8i_439 {
    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);
}

._chevron-down_13f8i_439:nth-child(odd) {
    animation: _pulse54012_13f8i_1 500ms ease infinite alternate;
}

._chevron-down_13f8i_439:nth-child(even) {
    animation: _pulse54012_13f8i_1 500ms ease infinite alternate 250ms;
}

@keyframes _pulse54012_13f8i_1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.5;
    }
}

@media (max-width: 768px) {
    ._home-content_13f8i_302 {
        padding: 20px 15px; /* Minskar paddingen på mobilen så rutan inte blir för stor */
        width: 90%;
    }
    
    ._home-content_13f8i_302 > h1 {
        font-size: 28px; /* Gör namnet lite mer lagom stort på mobilen */
    }
    
    ._home-content_13f8i_302 > p {
        font-size: 16px;
    }


    ._contact-nav_13f8i_483 {
        bottom: 20px;
    }
}

._contact-nav_13f8i_483 {
    position: absolute;
    left: 0;
    width: 50px;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: white;
    box-shadow: 0 0 10px #ddd;
    border-radius: 5px;
}

._contact-nav_13f8i_483>a {
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}

._github_13f8i_506:hover>svg,
._linkedin_13f8i_507:hover>svg,
._gmail_13f8i_508:hover>svg,
._facebook_13f8i_509:hover>svg,
._react-query_13f8i_510:hover>svg,
._recoil_13f8i_511:hover>svg {
    fill: white;
    transition: .2s;
}

._github_13f8i_506:hover {
    background-color: var(--github-color);
    transition: .3s;
}

._linkedin_13f8i_507:hover {
    background-color: var(--linked-in-color);
    transition: .3s;
}

._gmail_13f8i_508:hover {
    background-color: var(--gmail-color);
    transition: .3s;
}

._facebook_13f8i_509:hover {
    background-color: var(--facebook-color);
    transition: .3s;
}

._git_13f8i_506:hover {
    background-color: var(--git-color);
    transition: .3s;
}


/* ************************************** About ************************************** */

._about_13f8i_544 {
    min-height: 100vh;
    background-color: var(--back-ground-color);
    padding-top: 100px;
}

._container_13f8i_550 {
    max-width: 120rem;
    margin: auto;
    width: 92%;
}

._title_13f8i_556 {
    margin: 0;
    padding: 0;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    color: var(--title-color);
    position: relative;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 50px;
}

._title_13f8i_556::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 5px;
    border-radius: 5px;
    background-color: var(--primary-main);
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}

._about_13f8i_544>._container_13f8i_550>p {
    font-size: 18px;
    text-align: center;
    width: 100%;
    line-height: 1.6;
    color: var(--paragraph-color);
    margin: 0;
    max-width: 700px;
    margin: 0 auto 90px;
}

._about-content_13f8i_592 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 100px;
}

._about-content_13f8i_592>div>h3 {
    margin: 0;
    padding: 0;
    margin-bottom: 40px;
    font-size: 25px;
    color: var(--title-color);
    font-weight: 700;
}

._about-content_13f8i_592>div {
    width: 100%;
}

._about-info_13f8i_611>p {
    font-size: 16px;
    color: var(--paragraph-color);
    line-height: 1.7;
    margin: 0;
    padding: 0;
}

._about-info_13f8i_611>p>span {
    font-weight: bold;
}

._about-info_13f8i_611>p>a {
    color: var(--primary-main);
    font-weight: bold;
}

._skills_13f8i_628 {
    display: flex;
    column-gap: 10px;
    row-gap: 20px;
    flex-wrap: wrap;
}

._skill_13f8i_628 {
    padding: 10px 15px;
    border-radius: 5px;
    background: rgba(153, 153, 153, .2);
    color: #666;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

._skill_13f8i_628>._skill-icon_13f8i_656 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

._skill_13f8i_628::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 1s;
    z-index: 2;
}

._skill_13f8i_628:hover::after {
    border-radius: 5px;
    width: 100%;
    height: 100%;
}

/* .skill:hover{
    transform: translateY(-5px);
    transition: 1s;
} */

._skill_13f8i_628:hover>._skill-icon_13f8i_656 {
    display: block;
    z-index: 4;
    transition: 1.3s;
}

._skill_13f8i_628:hover>._skill-name_13f8i_694 {
    color: transparent;
}

._html_13f8i_698:hover::after {
    background-color: var(--html-color);
}

._css_13f8i_702:hover::after {
    background-color: var(--css-color);
}

._java-script_13f8i_706:hover::after {
    background-color: var(--java-script-color);
}

._react_13f8i_510:hover::after {
    background-color: var(--react-color);
}

._redux_13f8i_714:hover::after {
    background-color: var(--redux-color);
}

._git_13f8i_506:hover::after {
    background-color: var(--git-color);
}

._git-hub_13f8i_722:hover::after {
    background-color: var(--github-color);
}

._java_13f8i_706:hover::after {
    background-color: var(--java-color);
}

._cpp_13f8i_730:hover::after {
    background-color: var(--cpp-color);
}

._problem-solving_13f8i_734:hover::after {
    background-color: var(--gmail-color);
}

._recoil_13f8i_511:hover::after {
    background-color: var(--recoil-color);
}

._react-query_13f8i_510:hover::after {
    background-color: var(--react-query-color);
}

._responsive_13f8i_746:hover::after {
    background-color: #009688;
}

._type-script_13f8i_750:hover::after {
    background-color: var(--type-script-color);
}

@media (max-width: 768px) {
    ._about-content_13f8i_592 {
        grid-template-columns: 1fr;
        grid-gap: 50px;
    }

    ._skills_13f8i_628 {
        margin-bottom: 40px;
    }
}

/* ************************************** Projects ************************************** */
._projects_13f8i_766 {
    min-height: 100vh;
    background-color: white;
    padding-top: 100px;
}

._projectsPitch_13f8i_772 {
    max-width: 800px;
    margin: 0 auto 60px;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--paragraph-color, #666);
}

._projects-list_13f8i_781 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 40px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    align-items: stretch; /* Håller korten på samma rad lika höga */
}

._project_13f8i_160 {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #f0f2f5;
    box-sizing: border-box;
}

/* FIXAT: Ingen fast höjd! Nu använder vi aspect-ratio för att ge detaljerna fullt utrymme */
._project-image_13f8i_168 {
    width: 100%;
    aspect-ratio: 16 / 10;     /* Skapar ett perfekt spelfönster/widescreen-format */
    background-color: #1a1a1a; 
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.6); 
}

/* BILDEN: Nu med cover för att fylla ut hela rutan och visa alla detaljer utan nerkrympt pixelering */
._project-image_13f8i_168>img {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* Fyller hela spelfönstret knivskarpt */
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

._project-image_13f8i_168:hover>img {
    transform: scale(1.03);    /* Mjuk liten zoom vid hovring */
}

._project-info_13f8i_181 {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;             
}

._projectTitleLink_13f8i_189 {
    font-size: 1.9rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--title-color, #222);
    text-decoration: none;
    display: inline-block;
    transition: color 0.2s ease;
}

._projectTitleLink_13f8i_189:hover {
    color: var(--primary-main, #00adb5);
}

._project-info_13f8i_181>p {
    font-size: 1.05rem;
    color: var(--paragraph-color, #555);
    line-height: 1.6;
    margin-bottom: 30px;
    flex-grow: 1;            
}

/* --- DET NYA UTBYGGDA TAGG-SYSTEMET --- */

._badgeContainer_13f8i_859 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;                  /* Ökat avstånd mellan taggarna */
    margin-bottom: 16px;       /* Luft ner till rubriken */
    width: 100%;
}

._badge_13f8i_859 {
    font-size: 0.75rem !important; /* Lite större text för ökad läsbarhet */
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 12px !important;  /* Mer luft inuti rutorna så de inte kläms ihop */
    border-radius: 6px !important;
    display: inline-block !important;
    white-space: nowrap;          /* Tvingar texten att hållas på en rad inuti rutan */
    line-height: 1 !important;
}
._projectTitleLink_13f8i_189 {
    margin-bottom: 8px;
}

._project-info_13f8i_181 > p {
    margin-bottom: 10px; /* Snyggt avslut i botten av kortet */
}

._firstProject_13f8i_886 {
    background-color: #fef3c7;
    color: #b45309;
    border-color: #fde68a;
}

._sideProject_13f8i_892 {
    background-color: #eef2f3;
    color: #475569;
    border-color: #cbd5e1;
}

/* Din nya Blueprint-tagg (Klassisk Unreal-orange, github är lite bristat!) */
._blueprintBadge_13f8i_899 {
    background-color: #fff7ed;
    color: #c2410c;
    border-color: #ffedd5;
}

/* Språk-tagg (Lila/Blåtonad) */
._langBadge_13f8i_906 {
    background-color: #f5f3ff;
    color: #6d28d9;
    border-color: #ddd6fe;
}

/* Metadata-taggar (År, Tid, Gruppstorlek) */
._metaBadge_13f8i_913 {
    background-color: #f8fafc;
    color: #64748b;
    border-color: #e2e8f0;
}

._project-buttons_13f8i_201 {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: auto;        
}

@media (max-width: 960px) {
    ._projects-list_13f8i_781 {
        grid-template-columns: 1fr; /* 1 kolumn på mobilen */
        grid-gap: 30px;
    }
}
/* ************************************** Contact ************************************** */

._contact_13f8i_337 {
    min-height: 100vh;
    background: linear-gradient(to right, rgba(245, 245, 245, .8), rgba(245, 245, 245, .8)), url(/AlexanderLarsson/assets/back-ground-FWo4riPI.svg);
    padding: 100px 0;
}

._contact_13f8i_337>._container_13f8i_550>p {
    font-size: 18px;
    text-align: center;
    width: 100%;
    line-height: 1.6;
    color: var(--paragraph-color);
    margin: 0;
    max-width: 700px;
    margin: 0 auto 90px;
}

._contact_13f8i_337>._container_13f8i_550>form {
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0 10px #ddd;
    max-width: 780px;
    width: 95%;
    text-align: right;
    margin: auto;
    padding: 40px;
    position: relative;
}

._contact_13f8i_337>._container_13f8i_550>form> :nth-child(1),
._contact_13f8i_337>._container_13f8i_550>form> :nth-child(2) {
    margin-bottom: 40px;
}

._contact_13f8i_337>._container_13f8i_550>form> :nth-child(3) {
    margin-bottom: 100px;
}

._contact_13f8i_337>._container_13f8i_550>form> :nth-child(4) {
    position: absolute;
    right: 40px;
    bottom: 40px;
}

._inactive-form_13f8i_978::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: white;
    border-radius: 5px;
}

._loader_13f8i_989 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
}

@media (max-width: 1100px) {
    ._contact_13f8i_337>._container_13f8i_550>form> :nth-child(3) {
        height: 200px !important;
    }
}

/* ************************************** Projects ************************************** */

._footer_13f8i_1005 {
    background-color: black;
    color: white;
    padding: 0 100px;
}

._footer-info_13f8i_1011 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 80px 0;
}

._footer-info_13f8i_1011 div:nth-child(1)>h3 {
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 20px;
    margin-bottom: 20px;
}

._footer-info_13f8i_1011 div:nth-child(1)>p {
    margin: 0;
    padding: 0;
    color: #eee;
    line-height: 1.7;
    width: 60%;
    font-size: 15px;
}

._social_13f8i_1036>h3 {
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 20px;
    margin-bottom: 20px;
}

._social_13f8i_1036>div {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
}

._social_13f8i_1036>div>a {
    padding: 5px 8px;
    border-radius: 5px;
}

._copy-right_13f8i_1057 {
    padding: 30px 0;
    border-top: 1px solid #444;
    color: #eee;
    font-size: 12px;
    text-align: left;
    text-align: center;
}

._copy-right_13f8i_1057>span {
    font-size: 13px;
    font-weight: bold;
}

@media (max-width: 1100px) {
    ._footer_13f8i_1005 {
        padding: 0 40px;
    }

    ._footer-info_13f8i_1011 div:nth-child(1)>p {
        width: 100%;
        margin-bottom: 50px;
    }
}

._flipContainer_13f8i_1082 {
    perspective: 1000px;
    width: 45px;        
    height: 45px;
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    position: relative;
}
._flipper_13f8i_1091 {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: _rotateLogo_13f8i_1 6s infinite ease-in-out;
}

._flipper_13f8i_1091 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: 45px !important;
    max-height: 45px !important;
    backface-visibility: hidden;
    object-fit: contain;
}

._back_13f8i_1111 {
    transform: rotateY(180deg);
}

@keyframes _rotateLogo_13f8i_1 {
    0%, 40% { transform: rotateY(0deg); }
    50%, 90% { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
}
@media (max-width: 768px) {
    ._flipContainer_13f8i_1082 {
        width: 30px;
        height: 30px;
    }
    ._flipper_13f8i_1091 img {
        max-width: 30px !important;
        max-height: 30px !important;
    }
}

._profilePicContainer_13f8i_1131 {
    width: 100%;
    display: flex;
    justify-content: flex-start; /* Justerar bilden till vänster på rad med rubriken */
    margin-bottom: 25px;         /* Skapar ett snyggt avstånd ner till rubriken */
}
._profilePic_13f8i_1131 {
    width: 180px;                /* Justera storleken på ditt foto här */
    height: 180px;
    object-fit: cover;           /* Ser till att bilden inte sträcks ut fult */
    border-radius: 50%;          /* Gör bilden helt rund. Ta bort denna rad om du vill ha den fyrkantig */
    border: 3px solid var(--primary-main); /* Lägger till en snygg ram i din lila profilfärg */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Lägger till en mjuk skugga */
}
@media (max-width: 768px) {
    ._profilePicContainer_13f8i_1131 {
        justify-content: center; 
    }
    ._profilePic_13f8i_1131 {
        width: 140px;
        height: 140px;
    }
}
._unity_13f8i_1154:hover::after {
    background-color: #222c37; /* Mörkgrå Unity-färg */
}

._unreal_13f8i_1158:hover::after {
    background-color: #0e0e0e; /* Svart Unreal-färg */
}

._perforce_13f8i_1162:hover::after {
    background-color: #1a446c; /* Perforce-blå färg */
}

/* Stil för den nya underrubriken */
._subSkillTitle_13f8i_1167 {
    margin: 30px 0 20px 0 !important;
    font-size: 20px !important;
    color: var(--title-color);
    font-weight: 700;
}
._cvIcon_13f8i_1173:hover {
    background-color: #da5757; /* En snygg PDF-röd färg vid hover */
    transition: .3s;
    border-radius: 5px;
}
._cvIcon_13f8i_1173:hover>svg {
    fill: white;
}
/* Container som samlar alla taggarna på en rad med ett litet mellanrum */
._badgeContainer_13f8i_859 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 15px;
    width: 100%;
}

/* En grundstil för ALLA taggar med en mörkare basfärg */
._badge_13f8i_859 {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    border: 1px solid #cbd5e1;
    background-color: #f1f5f9;
    color: #334155; /* Mörkt skiffergrå text som standard så allt syns */
}

/* Guldgul tagg för första projektet */
._firstProject_13f8i_886 {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
    border-color: #fde68a !important;
}

/* Neutral grå/blå tagg för sidoprojekt */
._sideProject_13f8i_892 {
    background-color: #e2e8f0 !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
}

/* Unreal Engine Blueprint-tagg (Tydlig orange) */
._blueprintBadge_13f8i_899 {
    background-color: #ffedd5 !important;
    color: #ea580c !important;
    border-color: #fed7aa !important;
}

/* Språk-tagg för C++ och C# (Snygg lila) */
._langBadge_13f8i_906 {
    background-color: #f3e8ff !important;
    color: #7e22ce !important;
    border-color: #e9d5ff !important;
}

/* Taggarna för År, Tid och Gruppstorlek (Tydlig grå inramning) */
._metaBadge_13f8i_913 {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border-color: #cbd5e1 !important;
}
._responsive_13f8i_746:hover::after {
    background-color: #f59e0b !important; 
}

/* Mörkröd färg för Git */
._git_13f8i_506:hover::after {
    background-color: #f05032 !important; 
}

/* Mörkgrå färg för GitHub */
._github-tool_13f8i_1248:hover::after {
    background-color: #24292e !important; 
}

/* Snygg blå/lila färg för OOP-knappen */
._oop_13f8i_1253:hover::after {
    background-color: #4f46e5 !important; 
}
._simpleCvBox_13f8i_1256 {
    width: 30px;               /* Samma storlek som dina andra ikoner (30px) */
    height: 30px;
    border: 2px solid black;   /* Svart stilren ram */
    border-radius: 6px;        /* Mjukt avrundade hörn */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition: all 0.2s ease-in-out;
}

/* Stylar själva texten inuti boxen */
._simpleCvBox_13f8i_1256 span {
    font-family: sans-serif;
    font-size: 11px;           
    font-weight: 800;          
    color: black;             
    letter-spacing: 0.5px;
}


._cvIcon_13f8i_1173:hover ._simpleCvBox_13f8i_1256 {
    background-color: #da5757; 
    border-color: #da5757;
    transform: scale(1.1);    
}

/* Gör texten vit när man hovrar över boxen */
._cvIcon_13f8i_1173:hover ._simpleCvBox_13f8i_1256 span {
    color: white;
}
._blueprints-skill_13f8i_1288:hover::after {
    background-color: #a66200; 
}
._blueprintSkillIcon_13f8i_1291 {
    font-family: 'Arial Black', sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: white;
}
._highlightedProject_13f8i_1297 {
    background-color: #f5fdfd !important; /* En svag, elegant nyans av din temafärg */
    border: 2px solid var(--primary-main, #00adb5) !important;
    transform: translateY(-2px);
    transition: all 0.3s ease-in-out;
}

/* Stil för när en skill-knapp är aktivt nedtryckt */
._activeSkillButton_13f8i_1305 {
    background: var(--primary-main, #00adb5) !important;
    color: white !important;
    border-radius: 5px;
}
._activeSkillButton_13f8i_1305 ._skill-name_13f8i_694 {
    color: white !important;
}

._gitBadge_13f8i_1314 {
    background-color: #fef2f2 !important;
    color: #ef4444 !important;
    border-color: #fee2e2 !important;
}

/* Perforce-tagg inuti projektkorten (Svag marinblå) */
._p4Badge_13f8i_1321 {
    background-color: #f0fdf4 !important;
    color: #16a34a !important;
    border-color: #dcfce7 !important;
}* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
  /* primary */
  --primary-main: #5e07cd;
  --primary-light: #7843e9;
  --word-color: #333;
  --title-color: #111;
  --back-ground-color: #fafafa;
  --paragraph-color: #555;

  /* icons color */
  --html-color: #e34c26;
  --css-color: #264de4;
  --java-script-color: #f1d01b;
  --react-color: #61dafb;
  --redux-color: #764abc;
  --github-color: #000000;
  --git-color: #f05539;
  --java-color: #5382a1;
  --cpp-color: #4caf50;
  --facebook-color: #4267B2;
  --linked-in-color: #0077b5;
  --gmail-color: #c72923;
  --type-script-color: #007acc;
  --recoil-color: #3578e5;
  --react-query-color: #f73f51;
}

html {
  scroll-behavior: smooth;
  /* overflow: hidden; */
}

body {
  font-family: 'DM Sans', sans-serif;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* media */

.container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

/* Small */
@media (max-width: 768px) {
  .container {
    width: 750px;
  }
}

/* Medium */
@media (max-width: 992px) {
  .container {
    width: 970px;
  }
}

/* Large */
@media (max-width: 1200px) {
  .container {
    width: 1170px;
  }
}