/* ---- Zoom reset for mid-size screens ---- */
@media screen and (max-width: 1400px) {
    body {
        zoom: 85% !important;
    }
}

@media screen and (max-width: 1200px) {
    body {
        zoom: 100% !important;
    }
}

/*  MOBILE & TABLET */
@media screen and (max-width: 1024px) {

    body {
        display: block !important;
        zoom: 100% !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        height: auto !important;
        min-height: 100vh !important;
    }

    .elements-horizontal {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        overflow: visible !important;
    }

    /* NAV BAR*/
    .nav-bar {
        position: fixed !important;
        left: 20px !important;

        width: calc(100% - 40px) !important;
        height: auto !important;

        margin: 15px 0 0 0 !important;
        padding: 12px 16px !important;

        flex-wrap: wrap !important;
        gap: 12px !important;
        justify-content: space-between !important;
        justify-self: unset !important;

        box-shadow: 5px 5px 0px var(--border-color-dark) !important;

        z-index: 999 !important;
    }

    #blackout {
        font-size: 1.3rem !important;
        padding: 5px 12px !important;
    }

    .nav-links {
        gap: 15px !important;
        font-size: 0.85rem !important;
        order: 3;
        width: 100% !important;
        justify-content: center !important;
        flex-wrap: wrap;
    }

    .nav-socials {
        gap: 10px !important;
    }

    .social-icon {
        width: 38px !important;
        height: 38px !important;
    }

    .social-icon img {
        width: 26px !important;
        height: 26px !important;
    }

    .material-symbols-outlined {
        font-size: 38px !important;
        width: 38px !important;
        height: 38px !important;
    }

    /* Title */
    #title {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        height: auto !important;
        min-height: 100vh !important;

        margin-top: 155px !important;
        padding: 30px 20px 60px !important;

        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .top-box {
        width: 40% !important;
        height: 10% !important;

        padding: 8px 16px !important;
        
        font-size: 3rem !important;
        
        animation: float 3s ease-in infinite !important;
    }

    .top-H, .mid-H, .bottom-H {
        display: none !important;
    }

    .header-mid {
        margin-top: 25px !important;
        
        font-size: 1rem !important;
        width: 100% !important;

        text-align: center !important;
    }

    .top-header {
        display: flex;
        justify-content: center;

    }

    .top-header::after {
        content: "BUILDING";
        display: block;

        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(10rem, 9vw, 6rem) !important;
        height: 150px !important;
        font-weight: 800;

        text-align: center !important;
        color: black;
        letter-spacing: -0.05em;
    }

    .mid-header {
        display: flex;
        justify-content: center;
    }

    .mid-header::after {
        content: "BOLD";
        display: block;

        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(10rem, 9vw, 5.5rem) !important;
        height: 150px !important;
        font-weight: 800;

        text-align: center !important;
        color: transparent;
        -webkit-text-stroke: 3px black;
        letter-spacing: -0.05em;
    }

    .bottom-header {
        display: flex;
        justify-content: center;
    }

    .bottom-header::after {
        content: "EXPERIENCES";
        display: block;

        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(10rem, 5.5vw, 5.5rem) !important;
        height: 150px !important;
        font-weight: 800;

        text-align: center !important;
        color: black;
        letter-spacing: -0.05em !important;
    }

    .description-paragraph {
        width: 90% !important;
        font-size: clamp(3rem, 3.2vw, 1.6rem) !important;
        margin-top: 20px !important;
    }

    .bottom-buttons {
        width: 100% !important;
        height: 40% !important;

        gap: 40px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        margin-top: 28px !important;

        animation: none !important;
    }

    .works-button,.contact-button {
        padding: 14px 28px !important;
        font-size: 3rem !important;
        box-shadow: 20px 20px 0px 0px var(--border-color-dark) !important;
    }

    .works-button:active, .contact-button:active {
        transform: translate(7px, 7px) !important;
        box-shadow: none !important;
    }

    /* ----- About ----- */
    #about {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        
        flex-direction: column !important;

        width: 100% !important;
        height: auto !important;

        padding: 40px 20px !important;
        gap: 25px !important;
        box-sizing: border-box !important;
    }

    .img-placeholder {
        width: 100% !important;
        height: 260px !important;

        transform: rotate(0deg) !important;

        background-size: cover !important;
        background-position: center !important;

        box-shadow: 10px 10px 0px 0px var(--border-color-dark) !important;
    }

    .img-placeholder:hover {
        transform: translate(-6px, -6px) rotate(0deg) !important;
        box-shadow: 16px 16px 0px 0px var(--border-color-dark) !important;
    }

    .img-placeholder.windowDown:hover {
        transform: translate(-6px, -6px) rotate(0deg) !important;
        box-shadow: 16px 16px 0px 0px var(--deep-maroon) !important;
    }

    .about-me {
        position: relative !important;

        width: 100% !important;
        height: auto !important;
        min-height: 380px !important;

        margin-top: 0 !important;
    
        transform: rotate(0deg) !important;
        padding: 15px 20px 100px !important;
        box-sizing: border-box !important;
    }

    .about-txt {
        position: absolute !important;
        top: 20px !important;
        left: 20px !important;

        width: auto !important;
        height: auto !important;

        padding: 5px 10px;
        font-size: 1.5rem !important;
    }

    .about-header {
        position: absolute !important;
        top: 20%;
        left: 1% !important;
        right: 20px !important;

        font-size: clamp(1.6rem 5.5vw 3rem) !important;
        line-height: 1.1 !important;
    }

    .about-paragraph {
        position: absolute !important;
        top: 28% !important;
        left: 20px !important;
        right: 20px !important;

        font-size: clamp(2rem, 2.8vw, 1.4rem);
    }

    .about-lang-box {
        position: absolute !important;
        bottom: 3% !important;
        top: auto !important;
        left: 2% !important;
    }

    .git-about-me {
        position: absolute !important;
        bottom: 20px !important;
        top: auto !important;
        left: auto !important;
        right: 20px !important; 
    }

    .git-info {
        position: absolute !important;
        bottom: 95px !important;
        top: auto !important;
        left: 20px !important;
        right: 20px !important;

        padding-right: 20px !important;
        box-shadow: 10px 10px 0px 0px var(--border-color-dark) !important;
    }

    .git-repos, .git-followers {
        font-size: 1.1rem !important;
    }

    /* ----- Skills ----- */
    #skills {
        display: block !important;

        position: relative !important;
        left: 0 !important;
        top: 400px !important;

        width: 100% !important;
        height: auto !important;

        padding: 40px 20px 50px !important;
        box-sizing: border-box !important;
    }

    .my-toolbox {
        display: inline-block !important;

        margin-bottom: 20px !important;

        position: relative !important;
        top: auto !important;
        left: auto !important;

        font-size: 4rem !important;
    }

    /* Hide the skill svg (too complicated i aint doin allat) */
    .skills-text-area {
        display: none;
    }

    .front-end-box {
        position: relative !important;
        top: auto !important;
        left: auto !important;
    
        margin-bottom: 100px !important;

        width: 100% !important;
        height: 400px !important;
 
        box-sizing: border-box !important;
    }

    /* remove animation FE Box */
    .front-end-box:hover {
        transform: none !important;
        z-index: 1 !important;
    }

    .back-end-box {
        position: relative !important;
        top: auto !important;
        left: auto !important;
    
        margin-bottom: 100px !important;

        width: 100% !important;
        height: 400px !important;
 
        box-sizing: border-box !important;    
    }

    .back-end-box:hover {
        transform: none !important;
    }

    /* ----- Projects ----- */
    #projects {
        display: block !important;

        position: relative !important;
        left: 0 !important;
        top: 500px !important;

        width: 100% !important;
        height: auto !important;

        padding: 40px 20px 60px !important;
        box-sizing: border-box !important;
    }

    /* remove the svg :sob: */
    .work-T {
        display: none !important;
    }

    .projects-container::before {
        content: "Works";
        display: block;

        font-family: "Space Grotesk";
        font-size: clamp(10rem, 8vw, 4rem);
        font-weight: 800;
        text-transform: uppercase;

        color: black;
        margin-bottom: 100px !important;
        letter-spacing: -0.05rem;
    }

    .projects-container {
        display: flex !important;
        flex-direction: column !important;
    
        position: relative !important;
        top: auto !important;
        left: auto !important;
    
        gap: 35px !important;
        width: 100% !important;
    }

    /* Project cards */
    .combat-helper, .svelte-proj, .orcrist-addon-proj {
        display: flex !important;
        flex-direction: column !important;

        position: relative !important;
        left: auto !important;
        top: auto !important;

        width: 100% !important;
        height: 20% !important;

        margin-bottom: 60px !important;

        box-shadow: 10px 10px 0px 0px var(--border-color-dark) !important;
    }

    .combat-helper-container {
        position: relative !important;

        width: 100% !important;
        height: 300px !important;

        order: -1 !important;
        
        outline: none  !important;
    }

    .svelte-container {
        position: relative !important;

        width: 100% !important;
        height: 300px !important;

        order: -1 !important;
        overflow: hidden !important;
        outline: none !important;
    }

    .orcrist-container {
        position: relative !important;

        width: 100% !important;
        height: 300px !important;

        order: -1 !important;
        overflow: hidden !important;
        outline: none !important;
        z-index: 1 !important;
    }

    
    .image-combat,
    .svelte-img {
        width: 100% !important;
        height: 300px !important;
        object-fit: contain !important;
    }

    .orcrist-img {
        position: relative !important;

        width: 100% !important;
        height: 300px !important;

        object-fit: contain !important;
        z-index: 1 !important;
    }

    .image-combat:hover, .svelte-img:hover, .orcrist-img:hover {
        transform: scale(1.04) !important;
    }

    /* Project headers and texts */
    .combat-H-text, .svelte-H-text, .orcrist-H-text {
        display: block !important;

        position: relative !important;
        top: auto !important;
        left:  auto !important;

        font-size: clamp(7rem, 5vw, 2.8rem) !important;
        letter-spacing: -0.1rem !important;
        padding: 18px 20px !important;
    }

    .combat-paragraph, .svelte-paragraph, .orcrist-paragraph {
        position: relative !important;
        top: auto !important;
        left: auto !important;

        width: auto !important;

        font-size: clamp(2.5rem, 2.5vw, 1.2rem) !important;
        padding: 10px 20px !important;
        display: block !important;
    }

    .LU-java, .LU-java-3 {
        position: relative !important;
        top: auto !important;
        left: auto !important;

        margin: 5px 20px !important;

        width: 110px !important;
        font-size: 3rem !important;
    }

    .LU-container {
        position: relative !important;
        top: auto !important;
        left: auto !important;

        margin: 5px 20px !important;
    }

    .LU-svelte, .LU-css, .LU-ts {
        font-size: 3rem !important;
    }

    .project-buttons, .project-buttons-3 {
        position: relative !important;
        top: auto !important;
        left: auto !important;

        padding: 14px 20px 20px !important;
        gap: 50px !important;
        flex-wrap: wrap !important;
    }

    .open-live-code-1, .open-live-code-2, .open-live-code-3 {
        font-size: 2.5rem !important;
        padding-right: 10px !important;
        padding: 10px 30px !important;
        justify-content: center !important;
        box-shadow: 10px 10px 0px 0px var(--border-color-dark) !important;
    } 

    .open-github-1, .open-github-2, .open-github-3 {
        font-size: 2.5rem !important;
        padding: 10px 16px !important;
        box-shadow: 10px 10px 0px 0px var(--border-color-dark) !important;
    }
    
    .open-live-code-1:active, .open-live-code-2:active, .open-live-code-3:active,
    .open-github-1:active, .open-github-2:active, .open-github-3:active {
        transform: translate(6px, 6px) !important;
        box-shadow: none !important;
    }

    .p1-tag, .p2-tag, .p3-tag {
        font-size: 0.9rem !important;
    }

    /*----- Contact ----- */
    #contact {
        display: flex !important;
        flex-direction: column !important;

        position: relative !important;
        left: 0 !important;
        top: 800px !important;

        width: 100% !important;
        height: auto !important;

        gap: 25px !important;
        padding: 40px 20px 60px !important;
        box-sizing: border-box !important;
    }

    .info-card {
        position: relative !important;
        top : auto !important;
        left: auto !important;

        width: 100% !important;
        height: auto !important;

        min-height: 280px !important;
        margin-bottom: 50px !important;

        transform: rotate(0deg) !important;
        box-sizing: border-box !important;
    }

    .info-card:hover {
        transform: translate(-6px, -6px) rotate(0deg) !important;
    }

    .top-card {
        position: absolute !important;
        top: 20px !important;
        left: 20px !important;

        font-size: 2rem !important;
    }

    .info-header {
        display: flex !important;
        flex-wrap: wrap !important;

        position: relative !important;
        top: 50% !important;
        left: auto !important;

        font-size: clamp(2.5rem, 8vw, 5rem) m !important;

        width: 100% !important;

        align-items: baseline !important;
        padding: 65px 20px 0 !important;
        box-sizing: border-box !important;
        line-height: 1 !important;
    }

    .info-H-build {
        display: inline !important;

        position: relative !important;;
        top: auto !important;
        left: 2% !important;
    }

    .info-H-it {
        display: inline !important;

        position: absolute !important;
        top: auto !important;
        left: 80% !important;

        margin-left: 12px !important;
    }

    .info-paragraph {
        position: absolute !important;
        bottom: 10px !important;
        top: auto !important;
        left: 20px !important;
        right: 20px !important;

        font-size: clamp(2.5rem, 2.5vw, 1.2rem) !important;
    }

    .mail-box {
        position: relative !important;
        top: auto !important;
        left: auto !important;

        width: 100% !important;
        height: 175px !important;
        margin-bottom: 50px !important;

        box-shadow: 10px 10px 0px 0px var(--border-color-dark);
        box-sizing: border-box !important;
    }

    .mail-box:hover {
        transform: translate(-4px, -4px) !important;
        box-shadow: 14px 14px 0px 0px var(--border-color-dark) !important;
    }

    .mail-box.windowDown:hover {
        box-shadow: 14px 14px 0px 0px var(--neo) !important;
    }

    .social-box {
        position: relative !important;
        top: auto !important;
        left: auto !important;

        width: 100% !important;
        height: 190px !important;

        margin-bottom: 50px !important;

        box-shadow: 10px 10px 0px 0px var(--border-color-dark);
    }

    .social-box:hover {
        transform: translate(-4px, -4px) !important;
        box-shadow: 14px 14px 0px 0px var(--border-color-dark) !important;
    }

    .send-icon {
        display: none !important;
    }

    .form-box {
        position: relative !important;
        top: auto !important;
        left: auto !important;

        width: 100% !important;
        height: auto !important;

        box-sizing: border-box !important;
        box-shadow: 10px 10px 0px 0px var(--border-color-dark);
    }

    form {
        padding: 28px 18px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    label {
        font-size: 2rem !important;
    }

    input[type="text"],
    input[type="email"],
    textarea {
        width: 100% !important;
        height: 55px !important;

        font-size: 2rem !important;
        box-sizing: border-box !important;
    }

    textarea {
        height: 130px !important;
    }

    .submit-button {
        width: 100% !important;
        height: 65px !important;

        font-size: 1.5rem !important;
        box-shadow: 8px 8px 0px 0px var(--border-color-dark) !important;
        box-sizing: border-box !important;
    }


    /* Dark theme for mobiles */
    body.windowDown .topheader::after,
    body.windowDown .bottom-header::after {
        color: var(--txt-white) !important;
    }

        body.windowDown .mid-header::after {
        color: transparent !important;
        -webkit-text-stroke: 3px white !important;
    }

    body.windowDown .projects-container::before {
        color: white !important;
    }

    /* Reduce animations so as to reduce loss of performance */
    @media (prefers-reduced-motion: no-preference) {
        .top-header::after {
            animation: fadeIn 1s ease-in-out;
        }
        .bottom-header::after {
            animation: fadeIn 1.2s ease-in-out;
        }
    }
}

/* More fine tuning */
@media screen and (max-width: 480px) {

    .nav-bar {
        padding: 10px 12px !important;
        gap: 8px !important;
        width: calc(100% - 28px) !important;
        left: 14px !important;
    }

    #blackout {
        font-size: 1.05rem !important;
    }

    .nav-links {
        font-size: 0.75rem !important;
        gap: 8px !important;
    }

    .nav-socials {
        gap: 8px !important;
    }

    .social-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .social-icon img {
        width: 22px !important;
        height: 22px !important;
    }

    .material-symbols-outlined {
        font-size: 32px !important;
        width: 32px !important;
        height: 32px !important;
    }

    #title {
        margin-top: 170px !important;
    }

    .top-box {
        font-size: 0.8rem !important;
    }

    .about-me {
        min-height: 420px !important;
    }

    .about-header {
        font-size: clamp(1.5rem, 5vw, 2.2rem) !important;
    }

    .about-paragraph {
        top: 140px !important;
        font-size: 0.95rem !important;
    }

    .git-repos, .git-followers {
        font-size: 1rem !important;
    }

    .combat-H-text, .svelte-H-text, .orcrist-H-text {
        font-size: clamp(1.5rem, 5vw, 2.2rem) !important;
    }

    .info-card {
        min-height: 260px !important;
    }

    .info-header {
        font-size: clamp(2rem, 7vw, 3.5rem) !important;
    }
}