/* Navigation Bar for better Navigation of pages */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(135deg, #444349, #1e0f3f);;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    box-sizing: border-box;
    
    z-index: 1000;
    /* ensures navbar stays on top of everything */
}
.navbar-socials {
    display: flex;
    align-items: center;
    margin-right: 10px;
    gap: 25px;
}

.navbar-socials img {
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease;
}

.github,.itchio,.linkedin {
    filter: invert(40%) sepia(60%) saturate(300%) hue-rotate(900deg);
}

.navbar-socials img:hover {
    transform: scale(1.3);
}

.navbar-right {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    flex: 1;
}

.navbar-spacer {
    height: 80px;
    /* same height as navbar to prevent content overlap */
}
.active-page {
    background: rgb(38, 1, 46);
    color: white;
    border-radius: 10px;
}

.navbar-btn {
    background: none;
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
    transition: background 0.5s ease, transform 0.5s ease;
}

/* Hover effect */
.nav-btn:hover {
    background: rgb(38, 1, 46);;
    transform: scale(1.05);
}

/* button styling Section for example: the about me button */
.GamePJ-btn,
.CodingPJ-btn {
    color: white;
    padding: 12px 26px;
    border-radius: 10px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    transition: all 0.25s ease;
    text-shadow: 1px 1px 1px black;
}

.cv-btn:hover,
.AboutMe-btn:hover,
.MyExperience-btn:hover,
.MyProjects-btn:hover,
.Home-btn:hover,
.Contact-btn:hover {
    transform: translateY(-3px);
}

.arrow-btn:hover {
    background: silver;
    transform: translateX(-5px);
}

span {
    color: black;
    font-weight: bold;
}

body {
    background-image: url("images/BlackBG.jpg");
    background-size: cover;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100vh;
    margin: 0;
    padding-top: 30px;
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

body.loaded {
    opacity: 1;
}

h1,
h2 {
    color: white;
    text-align: center;
    margin-bottom: 50px;
    text-shadow: 1px 1px 1px white;
}

.arrow-btn-left {
    position: fixed;
    top: 20px;
    left: 25px;
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    z-index:1200;
    transition: color 0.3 ease, transform 0.2 ease;
    text-shadow: 2px 2px 2px black;

}

.arrow-btn-left:hover {
    background: rgba(255, 255, 255, 0.711);
    transform: translateX(-5px);
}

.flipped {
    display: inline-block;
    transform: scaleX(-1);
}

.arrow-btn-left span {
    color: white;
    font-weight: bold;
}

/* HTML Scroll functionality */
html {
    scroll-behavior: smooth;
}
footer{
    text-align: center;
    color: white;
    margin-top: 50px;
}

/* -------------------------------------GameLogo Container Placement-------------------------------------------- */
.section-header {
    text-align: center;
    font-size: 32px;
    color: white;
    margin-top: 60px;
    margin-bottom: 25px;
    text-shadow: 2px 2px 2px black;
}

.Projects-Section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 20px;
}

.section-divider,
.top-hr {
    width: 100%;
    height: 3px;
    border: none;
    border-radius: 5px;
   background: linear-gradient(135deg, #444349, #1e0f3f);
    margin: 60px auto 40px auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* -------------------------------------SpeedRacers LOGO----------------------------------------- */

/* SpeedRacers Card */
.SRlogo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 4px solid purple;
    background: rgb(200, 180, 59);
    border-radius: 20px;
    padding: 25px;
    width: 500px;
    height: 750px;
    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3 ease;
}

/* my SpeedRacers Video*/
.SRVideo {
    width: 100%;
    height: 350px;
    border: 2px solid purple;
    object-fit: cover;
    border-radius: 10px;
    margin-right: 5px;
}

/* Game Description Text */
.SRlogo-text {
    text-align: left;
    margin-bottom: 50px;
    color: purple;
    max-width: 600px;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
}

.SRlogo-text h2 {
    justify-content: center;
    color: yellow;
    margin-bottom: 20px;
    text-shadow: 4px 4px 4px purple;
}

.SRlogo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px yellow;
}

.SRitch-btn {

    padding: 10px 25px;
    text-decoration: none;
    font-weight: bold;
    color: purple;
    border-radius: 10px;
    border: 3px solid purple;
    transition: 0.3 ease;
    text-shadow: 2px 2px 2px yellow;
}

.SRitch-btn:hover {
    background: purple;
    border: 3px solid yellow;
    color: yellow;
    transform: scale(1.05);
    text-shadow: 2px 2px 2px purple;
}

.SRmoreinfo-btn {
    padding: 10px 25px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    color: purple;
    border: 3px solid purple;
    transition: 0.3 ease;
    text-shadow: 2px 2px 2px yellow;
    margin-left: 70px;
}

.SRmoreinfo-btn:hover {
    background: purple;
    color: yellow;
    border: 3px solid yellow;
    transform: scale(1.05);
    text-shadow: 1px 1px 1px purple;
}

/* -------------------------------------MYGLIDINGSIM-LOGO-------------------------------------------- */

/* MyGlidingSim Card */
.MGSlogo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 4px solid white;
    background: rgb(66, 66, 66);
    border-radius: 20px;
    padding: 25px;
    width: 500px;
    height: 750px;
    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3 ease;
}

/* my Game logo Image */
.MGSVideo {
    width: 100%;
    height: 350px;
    border: 2px solid white;
    object-fit: cover;
    border-radius: 10px;
    margin-right: 5px;
}

/* Game Description Text */
.MGSlogo-text {
    text-align: left;
    margin-bottom: 50px;
    color: white;
    max-width: 600px;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    text-shadow: 2px 2px 2px Grey;
}

.MGSlogo-text h2 {
    justify-content: center;
    color: grey;
    margin-bottom: 20px;
    text-shadow: 2px 2px 2px white;
}

.MGSlogo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px grey;
}

/* MyGlidingSim itch.io btn design */
.MGSitch-btn {

    padding: 10px 25px;
    text-decoration: none;
    font-weight: bold;
    color: grey;
    border: 3px solid grey;
    border-radius: 10px;
    transition: 0.3 ease;
    text-shadow: 2px 2px 2px white;
}

.MGSitch-btn:hover {
    background: white;
    color: grey;
    border: 3px solid grey;
    transform: scale(1.05);
    text-shadow: 2px 2px 2px grey;
}

.MGSmoreinfo-btn {
    padding: 10px 25px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    color: grey;
    border: 3px solid grey;
    transition: 0.3 ease;
    text-shadow: 2px 2px 2px white;
    margin-left: 70px;
}

.MGSmoreinfo-btn:hover {
    background: white;
    color: grey;
    border: 3px solid grey;
    transform: scale(1.05);
    text-shadow: 1px 1px 1px grey;
}

/* -------------------------------------InfiniteTrigger-LOGO----------------------------------------- */

/* InfiniteTrigger Card */
.IFTGlogo-card {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    border: 4px solid rgb(0, 0, 0);
    background: rgb(45, 78, 52);
    border-radius: 20px;
    padding: 25px;
    width: 500px;
    height: 750px;
    max-width: 1000px;
    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3 ease;
}

/* my Game logo Image */
.IFTGlogo {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border: 2px solid black;
    border-radius: 10px;
    margin-right: 5px;
}

/* Game Description Text */
.IFTGlogo-text {
    text-align: left;
    margin-bottom: 50px;
    color: black;
    max-width: 600px;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
    line-height: 1.5;
}

.IFTGlogo-text h2 {
    justify-content: center;
    text-align: center;
    color: black;
    margin-bottom: 20px;
    text-shadow: 2px 2px 2px black;
}

.IFTGlogo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px green;
}

/* Infinite Trigger Itch.io btn design */
.IFTGitch-btn {

    padding: 10px 25px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    color: black;
    border: 3px solid black;
    transition: 0.3 ease;
    text-shadow: 2px 2px 2px black;
}

.IFTGitch-btn:hover {
    background: black;
    color: rgb(45, 78, 52);
    border: 3px solid black;
    transform: scale(1.05);
    text-shadow: 1px 1px 1px rgb(45, 78, 52);
}

.IFTGmoreinfo-btn {
    padding: 10px 25px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    color: black;
    border: 3px solid black;
    transition: 0.3 ease;
    text-shadow: 2px 2px 2px black;
    margin-left: 70px;
}

.IFTGmoreinfo-btn:hover {
    background: black;
    color: rgb(45, 78, 52);
    border: 3px solid black;
    transform: scale(1.05);
    text-shadow: 1px 1px 1px rgb(45, 78, 52);
}
/* -------------------------------------LeapCity2 Project Logo----------------------------------------- */

/* LeapCity2 Card */
.LeapCity2Logo-card {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    border: 4px solid white;
    background: rgb(139, 7, 7);
    border-radius: 20px;
    padding: 25px;
    width: 550px;
    height: 750px;
    max-width: 1000px;
    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3 ease;
}

/* LeapCity2 logo Image */
.LC2Video {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border: 4px solid white;
    border-radius: 10px;
    margin-right: 5px;
}

/* LeapCity2 Description Text */
.LeapCity2Logo-text {
    text-align: left;
    margin-bottom: 50px;
    color: white;
    max-width: 600px;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 2px 2px 2px rgb(27, 19, 4);
    line-height: 1.5;
}

.LeapCity2Logo-text h2 {
    justify-content: center;
    text-align: center;
    color: white;
    margin-bottom: 20px;
    text-shadow: 2px 2px 2px rgb(27, 19, 4);
}

.LeapCity2Logo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 15px rgb(139, 7, 7);
}

/* LeapCity2 Github btn design */
.LeapCity2itch-btn {

    padding: 10px 25px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    color: white;
    border: 2px solid white;
    transition: 0.3 ease;
    text-shadow: 2px 2px 2px black;
}

.LeapCity2itch-btn:hover {
    background: rgb(209, 76, 83);
    color: white(45, 78, 52);
    border-radius: 10px;
    border: 2px solid white;
    transform: scale(1.05);
    text-shadow: 1px 1px 1px black;
}

.LeapCity2moreinfo-btn {
    padding: 10px 25px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    color: white;
    border: 2px solid white;
    transition: 0.3 ease;
    text-shadow: 2px 2px 2px black;
    margin-left: 70px;
}

.LeapCity2moreinfo-btn:hover {
    background: rgb(209, 76, 83);
    color: white;
    transform: scale(1.05);
    text-shadow: 1px 1px 1px black;
}

/* -------------------------------------GameLogo Container-------------------------------------------- */

/* -------------------------------------GUNGAME-LOGO----------------------------------------- */

/* GUNGAME Card */
.GunGamelogo-card {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    border: 4px solid rgb(58, 57, 57);
    background: rgb(30, 31, 30);
    border-radius: 20px;
    padding: 25px;
    width: 500px;
    height: 750px;
    max-width: 1000px;
    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3 ease;
}

/* my Game logo Image */
.GGVideo {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border: 2px solid grey;
    border-radius: 10px;
    margin-right: 5px;
}

/* GunGame Description Text */
.GunGamelogo-text {
    text-align: left;
    margin-bottom: 50px;
    color: white;
    max-width: 600px;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
    line-height: 1.5;
}

.GunGamelogo-text h2 {
    justify-content: center;
    text-align: center;
    color: white;
    margin-bottom: 20px;
    text-shadow: 2px 2px 2px black;
}

.GunGamelogo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgb(44, 44, 44);
}

/* GunGame Github btn design */
.GunGame-btn {

    padding: 10px 25px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    color: white;
    border: 2px solid white;
    transition: 0.3 ease;
    text-shadow: 2px 2px 2px black;
}

.GunGame-btn:hover {
    background: rgb(119, 118, 118);
    color: white(45, 78, 52);
    border-radius: 10px;
    border: 2px solid white;
    transform: scale(1.05);
    text-shadow: 1px 1px 1px rgb(45, 78, 52);
}

.GunGamemoreinfo-btn {
    padding: 10px 25px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    color: white;
    border: 2px solid white;
    transition: 0.3 ease;
    text-shadow: 2px 2px 2px black;
    margin-left: 70px;
}

.GunGamemoreinfo-btn:hover {
    background: rgb(119, 118, 118);
    color: white;
    transform: scale(1.05);
    text-shadow: 1px 1px 1px rgb(45, 78, 52);
}

/* -------------------------------------ShopSimulator-LOGO----------------------------------------- */

/* ShopSim Card */
.ShopSimlogo-card {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    border: 4px solid rgb(27, 19, 4);
    background: rgb(150, 126, 95);
    border-radius: 20px;
    padding: 25px;
    width: 750px;
    height: 750px;
    max-width: 1000px;
    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3 ease;
}

/* my Game logo Image */
.ShopSimlogo {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border: 4px solid rgb(27, 19, 4);
    border-radius: 10px;
    margin-right: 5px;
}

/* GunGame Description Text */
.ShopSimlogo-text {
    text-align: left;
    margin-bottom: 50px;
    color: white;
    max-width: 600px;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 2px 2px 2px rgb(27, 19, 4);
    line-height: 1.5;
}

.ShopSimlogo-text h2 {
    justify-content: center;
    text-align: center;
    color: white;
    margin-bottom: 20px;
    text-shadow: 2px 2px 2px rgb(27, 19, 4);
}

.ShopSimlogo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgb(44, 44, 44);
}

/* GunGame Github btn design */
.ShopSim-btn {

    padding: 10px 25px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    color: white;
    border: 2px solid white;
    transition: 0.3 ease;
    text-shadow: 2px 2px 2px black;
}

.ShopSim-btn:hover {
    background: rgb(36, 27, 14);
    color: white(45, 78, 52);
    border-radius: 10px;
    border: 2px solid white;
    transform: scale(1.05);
    text-shadow: 1px 1px 1px black;
}

.ShopSimmoreinfo-btn {
    padding: 10px 25px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    color: white;
    border: 2px solid white;
    transition: 0.3 ease;
    text-shadow: 2px 2px 2px black;
    margin-left: 70px;
}

.ShopSimmoreinfo-btn:hover {
    background: rgb(36, 27, 14);
    color: white;
    transform: scale(1.05);
    text-shadow: 1px 1px 1px black;
}



/* ---------------------------(Iphone 14 pro Max, Iphone 13,etc) SCREEN Responsive------------------------------------ */

/* MOBILE VERSION (iPhone 14 Pro Max & similar)*/
@media (max-width: 480px) {

    /* NAVBAR */
    .navbar {
        flex-direction: column;
        height: auto;
        padding: 12px 20px;
        gap: 50px;
        text-align: center;
    }

    .navbar-right {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .nav-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    /* PAGE TITLES */
    h1,
    h2 {
        font-size: 26px !important;
        margin-bottom: 20px;
        text-align: center;
    }

    /* PROJECTS GRID */
    .Projects-Section {
        flex-direction: column;
        gap: 25px;
        padding: 10px;
    }

    /* ALL PROJECT CARDS */
    .SRlogo-card,
    .MGSlogo-card,
    .IFTGlogo-card,
    .GunGamelogo-card,
    .ShopSimlogo-card {
        width: 95%;
        height: auto;
        padding: 20px;
    }

    /* ALL PROJECT IMAGES */
    .SRlogo,
    .MGSVideo,
    .IFTGlogo,
    .GunGamelogo,
    .ShopSimlogo {
        width: 100%;
        height: auto;
        max-height: 250px;
        margin: 0;
        object-fit: cover;
    }

    /* ALL PROJECT TEXT */
    .SRlogo-text,
    .MGSlogo-text,
    .IFTGlogo-text,
    .GunGamelogo-text,
    .ShopSimlogo-text {
        font-size: 16px;
        margin-bottom: 25px;
        line-height: 1.4;
    }

    /* BUTTONS */
    .SRitch-btn,
    .SRmoreinfo-btn,
    .MGSitch-btn,
    .MGSmoreinfo-btn,
    .IFTGitch-btn,
    .IFTGmoreinfo-btn,
    .GunGame-btn,
    .GunGamemoreinfo-btn,
    .ShopSim-btn,
    .ShopSimmoreinfo-btn {
        padding: 8px 18px;
        font-size: 14px;
        margin: 5px auto;
        display: block;
        text-align: center;
    }

    /* Removes Forced Left margins */
    .SRmoreinfo-btn,
    .MGSmoreinfo-btn,
    .IFTGmoreinfo-btn,
    .GunGamemoreinfo-btn,
    .ShopSimmoreinfo-btn {
        margin-left: 0;
    }
}

/* -----------------------------------(Desktop) Screen Responsive --------------------------------------------- */
@media (max-width: 900px) {

    /* NAVBAR */
    .navbar {
        flex-direction: column;
        padding: 15px 20px;
        gap: 15px;
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: center;
    }
    .arrow-btn-left{
        top: -5px;
        margin-right: 100px;
    }
    .navbar-left {
        width: 100%;
        text-align: center;
    }

    .navbar-right {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .navbar-socials {
        margin-right: 0;
        justify-content: center;
        width: 100%;
    }

    .navbar-socials img {
        width: 32px;
        height: 32px;
    }

    .navbar-spacer {
        height: 180px;
    }

    /* PROJECT SECTION */
    .Projects-Section {
        gap: 30px;
        padding: 15px;
    }

    /* Reduce card width for medium screens */
    .SRlogo-card,
    .MGSlogo-card,
    .IFTGlogo-card,
    .GunGamelogo-card,
    .ShopSimlogo-card,
    .LeapCity2Logo-card {
        width: 80%;
        height: auto;
    }

    /* Resize videos */
    .SRVideo,
    .MGSVideo,
    .IFTGlogo,
    .GGVideo,
    .LC2Video,
    .ShopSimlogo {
        height: 280px;
    }
}


/* ------------------ RESPONSIVE to Iphone (768px) ----------------------- */

@media (max-width: 768px) {

    /* Navbar tighter */
    .navbar {
        padding: 10px 10px;
        gap: 15px;
    }

    .nav-btn {
        padding: 6px 12px;
        font-size: 13px;
        border-radius: 8px;
    }

    /* Projects */
    .Projects-Section {
        flex-direction: column;
        gap: 20px;
    }

    /* Cards smaller */
    .SRlogo-card,
    .MGSlogo-card,
    .IFTGlogo-card,
    .GunGamelogo-card,
    .ShopSimlogo-card,
    .LeapCity2Logo-card {
        width: 90%;
    }

    /* Images smaller */
    .SRVideo,
    .MGSVideo,
    .IFTGlogo,
    .GGVideo,
    .LC2Video,
    .ShopSimlogo {
        height: 240px;
    }

    /* Text smaller */
    .SRlogo-text,
    .MGSlogo-text,
    .IFTGlogo-text,
    .GunGamelogo-text,
    .ShopSimlogo-text {
        font-size: 17px;
        text-align: left;
    }

    /* Center buttons */
    .SRitch-btn,
    .MGSitch-btn,
    .IFTGitch-btn,
    .GunGame-btn,
    .ShopSim-btn,
    .LeapCity2itch-btn {
        display: block;
        width: fit-content;
        margin: 10px auto;
    }

    .SRmoreinfo-btn,
    .MGSmoreinfo-btn,
    .IFTGmoreinfo-btn,
    .GunGamemoreinfo-btn,
    .ShopSimmoreinfo-btn,
    .LeapCity2moreinfo-btn {
        margin-left: 0 ;
        margin-top: 5px;
    }
    /* This Fixes The buttons inside my Cards from looking weird */
    .SRitch-btn,.SRmoreinfo-btn,.MGSitch-btn,.MGSmoreinfo-btn,.IFTGitch-btn,.IFTGmoreinfo-btn,
    .LeapCity2itch-btn,.LeapCity2moreinfo-btn,.GunGame-btn,.GunGamemoreinfo-btn,.ShopSim-btn,
    .ShopSimmoreinfo-btn {
        display: inline-block;
        margin: 10px auto; /* centers automatically */
        text-align: left;
    }
    
    .SRmoreinfo-btn,.MGSmoreinfo-btn,.IFTGmoreinfo-btn,.GunGamemoreinfo-btn,.ShopSimmoreinfo-btn,
    .LeapCity2moreinfo-btn {
        margin-left: 0; 
    }
}