@import url('https://fonts.googleapis.com/css2?family=Handjet&display=swap');

*{
    scroll-behavior: smooth;
    margin:0;
    padding:0;
    box-sizing: border-box;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

body{
    background-color:rgb(3, 21, 51);


}    

header{
    display:flex;
    justify-content:space-between;
    
}


.Buttons{
    display:flex;
    justify-content:space-between;

    margin-top: 2rem;
    margin-inline-start: 2rem  ;

    .Content{
        color:rgb(103, 204, 171);
        background-color:rgb(3, 21, 51);
        font-family:'Handjet';
        font-size :2rem;

        border:1rem;
        border-radius:25px;
        border-style: solid;
        border-color:rgb(3, 21, 51);

        text-decoration: none;
        

        transition: .1s ease;
    }
    .Content:hover{
        scale: 1.2;

        background-color:rgb(13, 36, 76);
        border-color:rgb(13, 36, 76);
        box-shadow:5px 5px 20px rgb(13, 36, 76), -5px -5px 20px rgb(69, 140, 116);
    }
    .Content:active{
        scale: .7;
    }


    .MyWorks{
        color:rgb(103, 204, 171);
        background-color:rgb(3, 21, 51);
        font-family:'Handjet';
        font-size :2rem;

        border:1rem;
        border-radius:25px;
        border-style: solid;
        border-color:rgb(3, 21, 51);
        
        text-decoration: none;
        margin-inline-start: 4rem ;

        transition: .1s ease;
    }
    .MyWorks:hover{
        scale: 1.2;

        background-color:rgb(13, 36, 76);
        border-color:rgb(13, 36, 76);
        box-shadow:5px 5px 20px rgb(13, 36, 76), -5px -5px 20px rgb(69, 140, 116);
    }
    .MyWorks:active{
        scale: .7;
    }


    .Contact{
        color:rgb(103, 204, 171);
        background-color:rgb(3, 21, 51);
        font-family:'Handjet';
        font-size :2rem;

        border:1rem;
        border-radius:25px;
        border-style: solid;
        border-color:rgb(3, 21, 51);

        text-decoration: none;
        margin-inline-start:4rem;

        transition: .1s ease;
    }
    .Contact:hover{
        scale: 1.2;

        background-color:rgb(13, 36, 76);
        border-color:rgb(13, 36, 76);
        box-shadow:5px 5px 20px rgb(13, 36, 76), -5px -5px 20px rgb(69, 140, 116);

    }
    .Contact:active{
        scale: .7;
    }
}


.Em1d0Icon{
    width:5rem;
    height:5rem;
    margin-top:1rem;
    margin-inline-end:1rem;

    border:7px;
    border-radius:50%;
    border-color:rgb(13, 36, 76);
    border-style:solid;

    box-shadow: 5px 5px 20px rgb(90, 6, 70), -5px -5px 20px rgb(9, 29, 89);

}


nav{
    border-top-style:solid;
    border-color:rgb(103, 204, 171);
    opacity:20%;
    margin-top:3rem;

    text-align:center;
}

.BGS{
    background-image: url(em1d0.html/background.DarkBlue.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

.Info{
    justify-content:space-between;

    .BGE{
        text-align: center; 

        border-radius: 25px;
        border: 25px;
        border-style: solid;
        border-color:rgb(13, 36, 76);
        background-color:rgb(13, 36, 76);

        margin-inline-start: 10rem;
        margin-inline-end: 10rem;
        margin-top: 5rem;
    }

    .Emad{
        text-align: center;
        
        color:rgb(103, 204, 171);
        font-family:'Handjet';
        font-size:4rem;
        
    }

    
    .IS{
        text-align: center;

        color: rgb(69, 140, 116);
        font-family: 'Handjet';
        font-size:2rem;

        text-decoration: none;

        transition: .1s ease;
    }
    .IS:hover{
        scale: 1.2;
        color: rgb(103, 204, 171);
       
    }
    .IS:active{
        scale: .7;
    }

    .Center{
        display: flex;

    }

    .AboutEmad {
        margin-inline-start: 10rem;
        margin-top: 5rem;

        flex: 1;
        
        border-radius: 25px;
        border: 25px;
        border-style: solid;
        border-color:rgb(13, 36, 76);
        background-color:rgb(13, 36, 76);

        color: rgb(103, 204, 171);
        font-family: 'Handjet';
        font-size: 2rem;
    }


    .Skills{
        margin-inline-start: 5rem;
        margin-inline-end: 10rem;
        margin-top: 5rem;

        padding-bottom: 2rem;

        gap:2rem;
        

        flex: 2;

        border-radius: 25px;
        border: 25px;
        border-style: solid;
        border-color:rgb(13, 36, 76);
        background-color:rgb(13, 36, 76);

        

        color: rgb(103, 204, 171);
        font-family: 'Handjet';
        font-size: 2rem;
    }

    .Skills .SkillsTitle{
        list-style: none;
        text-align: start;
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .Contacts{
        
        border: 1rem;
        border-style: solid;
        border-radius:25px;
        border-color:rgb(13, 36, 76);
        background-color: rgb(13, 36, 76);

        margin-inline-start: 10rem;
        margin-inline-end: 10rem;
        margin-top: 5rem;

        .MyNumber{
            display:flex;
            margin: 2rem;

            color:rgb(103, 204, 171);
            font-family:'Handjet';
            font-size:1rem;

            .TheNumber{
                color:rgb(255, 0, 255);
                text-decoration:none;
                text-align:center;
                font-size: 2rem;

                margin-inline-start: 1rem;
                transition: .1s ease;
            }
            .TheNumber:hover{
                color:rgb(150, 0, 150);
                text-decoration:underline;
            }
            .TheNumber:active{
                scale: .9;
            }
        }
        .MyEmail{
            display:flex;
            margin: 2rem;
            
            color:rgb(103, 204, 171);
            font-family:'Handjet';
            font-size:1rem;

            .TheEmail{
                color:rgb(255, 0, 255);
                text-decoration:none;
                text-align:center;
                font-size: 2rem;

                margin-inline-start: 1rem;
                transition: .1s ease;
            }
            .TheEmail:hover{
                color:rgb(150, 0, 150);
                text-decoration:underline;
            }
            .TheEmail:active{
                scale: .9;
            }
        }
    }
}



/* ===================== Language button ===================== */

.LangBar{
    margin-top: 1rem;
    margin-inline-start: 2rem;
}

#LangToggle{
    color:rgb(103, 204, 171);
    background-color: rgb(13, 36, 76);
    font-family:'Handjet';
    font-size:2rem;

    border:none;
    border-radius:25px;
    padding: .2rem 1.5rem;

    cursor:pointer;
    transition: .1s ease;
}
#LangToggle:hover{
    scale: 1.1;
    box-shadow:5px 5px 20px rgb(22, 52, 103), -5px -5px 20px rgb(69, 140, 116);
}
#LangToggle:active{
    scale: .9;
}

/* Phone number and email always read left-to-right, even in Arabic */
.Info .Contacts .TheNumber,
.Info .Contacts .TheEmail{
    direction: ltr;
}

/* ===================== Collapsible Panels (JS-toggled, smooth animation) ===================== */

.PanelSection{
    display:flex;
    justify-content:center;
}

.collapsible{
    display:grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .5s ease;
    overflow:hidden;

    width:100%;
    max-width: 1400px;
}

.collapsible.open{
    grid-template-rows: 1fr;
}

.collapsible-inner{
    overflow:hidden;
    min-height:0;

    opacity:0;
    transform: translateY(-10px);
    transition: opacity .4s ease, transform .4s ease;

    text-align:center;
    padding: 0 2rem;
}

.collapsible.open > .collapsible-inner{
    opacity:1;
    transform: translateY(0);
    padding: 2rem;
}

.sub-collapsible{
    margin-top: 1rem;
}

.PanelTitle{
    color:rgb(103, 204, 171);
    font-family:'Handjet';
    font-size:3rem;
    margin-bottom: 1.5rem;
}

.ProjectsTitle{
    color:rgb(103, 204, 171);
    font-family:'Handjet';
    font-size:2rem;
    margin-bottom: 1rem;
}

/* Account links (YouTube / IG / X / Itch.io / GitHub) */
.AccountButtons{
    display:flex;
    justify-content:center;
    flex-wrap: wrap;
    gap: 2rem;
}

.AccountButtons a{
    display:flex;
    align-items:center;
    gap: .5rem;

    color:rgb(103, 204, 171);
    background-color: rgb(13, 36, 76);
    text-decoration:none;

    font-family:'Handjet';
    font-size:1.5rem;

    border:1rem;
    border-style:solid;
    border-radius:25px;
    border-color:rgb(13, 36, 76);

    padding: .5rem 1.5rem;

    transition: .1s ease;
}

.AccountButtons a svg,
.AccountButtons a img{
    width:1.5rem;
    height:1.5rem;
}

.AccountButtons a:hover{
    scale: 1.1;
    box-shadow:5px 5px 20px rgb(22, 52, 103), -5px -5px 20px rgb(69, 140, 116);
}

.AccountButtons a:active{
    scale: .9;
}

/* Web Dev / Games Dev / AI category buttons */
.ProjectCategoryButtons{
    display:flex;
    justify-content:center;
    flex-wrap: wrap;
    margin-top: 3rem;
    gap: 2rem;
}

.ProjectCategoryButtons a{
    display:block;

    color:rgb(103, 204, 171);
    background-color: rgb(13, 36, 76);
    text-decoration:none;
    text-align:center;

    font-family:'Handjet';
    font-size:1.8rem;

    border-radius:25px;
    border-style: solid;
    border-color: rgb(13, 36, 76);

    padding: 1.5rem 2rem;

    transition: .15s ease;
}

.ProjectCategoryButtons a:hover{
    font-size: 2.1rem;
    box-shadow:5px 5px 20px rgb(13, 36, 76), -5px -5px 20px rgb(69, 140, 116);
}

.ProjectCategoryButtons a:active{
    scale: .95;
}

.ProjectsList{
    color:rgb(103, 204, 171);
    font-family:'Handjet';
    font-size:1.5rem;

    background-color: rgb(13, 36, 76);
    border-radius:25px;
    margin-top:1.5rem;
    padding: 1.5rem;

    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.ProjectsList .EmptyNote{
    opacity:.6;
}

.ProjectCard{
    text-align:start;

    background-color: rgb(3, 21, 51);
    border: 2px solid rgb(69, 140, 116);
    border-radius:25px;
    padding: 2rem;
}

.ProjectName{
    color:rgb(103, 204, 171);
    font-family:'Handjet';
    font-size:2.5rem;
    margin-bottom: .5rem;
}

.ProjectDescription{
    color:rgb(103, 204, 171);
    font-family:'Handjet';
    font-size:1.3rem;
    opacity:.85;

    margin-bottom: 1.5rem;
}

.SkillTags{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    list-style:none;
    margin-bottom: 1.5rem;
}

.SkillTags li{
    color:rgb(103, 204, 171);
    background-color: rgb(13, 36, 76);
    font-size:1.3rem;

    border: 2px solid rgb(69, 140, 116);
    border-radius:999px;
    padding: .2rem 1.1rem;
}

.ProjectLinks{
    display:flex;
    flex-wrap:wrap;
    gap:1.5rem;
}

.ProjectLinks a{
    color:rgb(103, 204, 171);
    text-decoration:none;
    font-size:1.8rem;
    transition: .1s ease;
}
.ProjectLinks a::after{ content:" →"; }
[dir="rtl"] .ProjectLinks a::after{ content:" ←"; }
.ProjectLinks a:hover{ text-decoration:underline; }
.ProjectLinks a:active{ opacity:.7; }

/* Small clickable tile (icon + name); click reveals the game's info panel */
.ProjectTiles{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1.5rem;
}

.ProjectTile{
    display:flex;
    align-items:center;
    gap:1rem;

    background-color: rgb(3, 21, 51);
    border-radius:15px;
    padding: .75rem 1.5rem;

    cursor:pointer;
    transition: .15s ease;
}

.ProjectTile:hover{
    scale: 1.05;
    box-shadow:5px 5px 20px rgb(22, 52, 103), -5px -5px 20px rgb(69, 140, 116);
}

.ProjectTile:active{
    scale: .95;
}

.ProjectIcon{
    display:block;
    width:64px;
    height:64px;
    max-width:64px;

    border-radius:10px;
    object-fit:contain;
    background-color: rgb(255,255,255);
}

.ProjectIcon.pixel-icon{
    image-rendering: pixelated;
}

.ProjectTileName{
    color:rgb(103, 204, 171);
    font-family:'Handjet';
    font-size:2rem;
}

/* ===================== Mobile / Tablet ===================== */
@media (max-width: 1023px) {
    header{
        flex-direction: column-reverse;
        align-items: center;
    }
    .Buttons{
        justify-content: center;
        flex-wrap: wrap;
        gap: .5rem;
        margin: 1rem 1rem 0;
    }
    .Buttons a[class]{
        margin-inline-start: 0;
        font-size: 1.5rem;
        border-width: .4rem;
    }
    .Em1d0Icon{
        width: 4rem;
        height: 4rem;
        margin: 1rem 0 0;
    }
    nav{ margin-top: 1rem; }
    .LangBar{ margin-inline-start: 1rem; }

    .Info .BGE{
        margin: 2rem 1rem 0;
        border-width: 1rem;
    }
    .Info .Emad{ font-size: 2.5rem; }
    .Info .IS{ font-size: 1.5rem; }
    .Info .Center{ flex-direction: column; }
    .Info .AboutEmad,
    .Info .Skills{
        flex: none;
        margin: 1.5rem 1rem 0;
        border-width: 1.5rem;
        font-size: 1.4rem;
    }
    .Info .Skills{ padding-bottom: 0; }
    .Info .Skills .SkillsTitle{ font-size: 2.2rem; }

    .Info .Contacts{ margin: 2rem 1rem; }
    .Info .Contacts .MyNumber,
    .Info .Contacts .MyEmail{
        flex-direction: column;
        margin: 1rem;
    }
    .Info .Contacts h1{ font-size: 1.5rem; }
    .Info .Contacts .TheNumber,
    .Info .Contacts .TheEmail{
        margin-inline-start: 0;
        font-size: 1.4rem;
        overflow-wrap: anywhere;
    }

    .collapsible.open > .collapsible-inner{ padding: 1.5rem .75rem; }
    .PanelTitle{ font-size: 2.2rem; }
    .ProjectsTitle{ font-size: 1.6rem; }
    .AccountButtons{ gap: 1rem; }
    .AccountButtons a{
        font-size: 1.3rem;
        border-width: .4rem;
        padding: .3rem 1rem;
    }
    .ProjectCategoryButtons{ gap: 1rem; margin-top: 2rem; }
    .ProjectCategoryButtons a,
    .ProjectCategoryButtons a:hover{
        font-size: 1.4rem;
        padding: 1rem 1.5rem;
    }
    .ProjectsList{ font-size: 1.2rem; padding: 1rem; }
    .ProjectCard{ padding: 1.25rem; }
    .ProjectName{ font-size: 1.8rem; }
    .SkillTags li{ font-size: 1.1rem; }
    .ProjectLinks a{ font-size: 1.5rem; }
    .ProjectDescription{ font-size: 1.1rem; }
    /* No sticky "hover" zoom on touch screens */
@media (hover: none) {
    #LangToggle:hover,
    .Buttons a[class]:hover,
    .AccountButtons a:hover,
    .ProjectTile:hover,
    .Info .IS:hover{
        scale: 1;
        box-shadow: none;
    }
}
}

/* ===================== Project grid: always-visible square cards ===================== */
.ProjectGrid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 360px));
    justify-content:center;
    gap:1.5rem;
}

.ProjectGrid .ProjectCard{
    aspect-ratio: 1 / 1;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(69, 140, 116) transparent;
    padding: 1.25rem;
}

.ProjectGrid .ProjectCard .ProjectIcon{
    width:48px;
    height:48px;
    max-width:48px;
    margin-bottom:.5rem;
    flex-shrink:0;
}

.ProjectGrid .ProjectName{ font-size:1.9rem; line-height:1; }
.ProjectGrid .ProjectDescription{ font-size:1.15rem; line-height:1.1; margin-bottom:.75rem; }
.ProjectGrid .SkillTags{ gap:.4rem; margin-bottom:.75rem; }
.ProjectGrid .SkillTags li{ font-size:1rem; padding:.1rem .8rem; }
.ProjectGrid .ProjectLinks{ gap:.5rem 1.25rem; margin-top:auto; }
.ProjectGrid .ProjectLinks a{ font-size:1.4rem; }

@media (max-width: 1023px){
    .ProjectGrid{ gap:1rem; }
    .ProjectGrid .ProjectCard{ padding:.9rem; }
    .ProjectGrid .ProjectCard .ProjectIcon{ width:40px; height:40px; max-width:40px; margin-bottom:.3rem; }
    .ProjectGrid .ProjectDescription{ margin-bottom:.5rem; }
    .ProjectGrid .SkillTags{ margin-bottom:.5rem; }
    .ProjectGrid .ProjectName{ font-size:1.6rem; }
    .ProjectGrid .ProjectDescription{ font-size:1.05rem; }
    .ProjectGrid .ProjectLinks a{ font-size:1.25rem; }
}