@font-face {
    font-family: 'LexendDeca';
    src: url('Fonts/LexendDeca-VariableFont_wght.ttf') format('truetype');
}

html{
    scroll-behavior: smooth;
}
#HeaderButton{
    display:none;
}
#DropDownContent{
    display:none;
}

body{
    background-color: rgb(6, 23, 40);
    margin: 0px;
    color:white;
    }
    .currentPage{
        text-decoration:underline;
        text-decoration-color: rgba(96, 255, 84, 1);
        text-decoration-thickness: 4px;
    }
    .Header{
        position:sticky;
        top:0;
        z-index: 1000;
    }
    .Navigation{
        height: 60px;
        background-color: rgb(10, 37, 70);
        font-size: 17px;
        font-family: LexendDeca;
        font-weight: bold;
        color:white;
        display:flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        z-index: 100;
        position: sticky;
    }

        /*Navigation Links*/
        .Navlinks{
            display:flex;
            gap:50px;
        }

        /*Header link styling*/
        .Header a:link, :visited{
            font-size: 16px;
            text-align: center;
            color:white;
            text-decoration: none;
            transition: 0.5s;
        }
        .Header a:hover{
            font-size: 16px;
            text-align: center;
            color: rgba(96, 255, 84, 1);
            text-decoration: none;
            transition: 0.5s;
        }


    /*HomePage Area*/
    #HomePageArea{
        display:flex;
        flex-direction: column;
        align-items: center;
        background-color: rgb(6, 23, 40);
        z-index: 2;
    }
        #HomeSection {
            font-family: Arial, Helvetica, sans-serif;
            display:grid;
            grid-template-columns: 1fr 1fr;
            font-size: 30px;;
            margin-top:100px;
            justify-content: center;
            gap:50px;
            max-width: 80%;
            justify-self: center;
            justify-items: center;
        }

    /*About Me*/
    #AboutSection{
        max-width:50%;
        justify-self: center;
        align-self: center;
        justify-self: center;
        padding:100px;
    }
        .AboutMe {
            font-family: Arial, Helvetica, sans-serif;
            display:flex;
            flex-wrap: wrap;
            align-items: center;
            text-align: center;
            justify-content: center;
            font-size: 25px;
        }

    .Title{
        font-weight: bold;
        font-size: 30px;
    }
    p{
        margin: 8px;
    }
    .Line{
        width:410px;
        border: solid;
        border-color: white;
    }
    .me img{
        border-radius:140px;
        height: 200px;
        width: 200px;
    }
    .button{
        color:white;
        width:200px;
        border-radius:10px;
        border: solid;
        border-color: rgba(96, 255, 84, 1);
        padding: 8px;
    }

    /*Skills*/
    #SkillSection{
        min-width: 375px;;
        align-self: center;
        justify-self: center;
        max-width: 450px;
        padding:100px;
    }
        .Skills{
            display:grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            justify-items: center;
            justify-content: center ;
            gap:50px;
            max-width:450px;
            max-height: 300px;
            min-width: 375px;
        }
            .Skills img{
                filter: brightness(0) saturate(100%) invert(100%) sepia(100%) 
                saturate(0%) hue-rotate(162deg) brightness(101%) contrast(104%);

                max-height: 75px;
                transition: 0.5s;
                cursor:pointer;
            }
            .Skills img:hover{
                filter: brightness(0) saturate(100%) invert(77%) sepia(57%) 
                saturate(564%) hue-rotate(58deg) brightness(102%) contrast(102%) 
                drop-shadow(0px 0px 15px green);
            }

    .testing{
        display:flex;
        justify-content: center;
        gap:50px;
    }
    .subTitle{
        margin: 50px;
        text-align: center;
        font-size: 30px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        color:white;
    }
    #ProjectTitle{
        align-self: center;
        justify-self: center;
        font-family: Arial, Helvetica, sans-serif;
    }

    /*All Projects*/
    #projectSection{
        padding:100px;
    }
        .ProjectContainer{
            display:flex;
            flex-wrap: wrap;
            justify-content: center;
            font-family: LexendDeca;
            gap:150px;
        }
            /*Project Element*/
            .ProjectElement{
                border-radius: 5px;
                background-color: rgb(10, 37, 70);
                min-width:300px;
                max-width:320px;
                transition: 0.5s;
                box-shadow: 0px 0px rgb(5, 19, 37);
                display:flex;
                flex-direction: column;
                align-items: center;
                flex-wrap: wrap;
            }

            .ProjectElement:hover{
                box-shadow: 10px 10px rgb(0, 0, 0);
                min-width:340px;
                max-width:340px;
                cursor:pointer;
            }

            .ProjectElement img{
                border-radius: 5px 5px 0px 0px;
                height: 150px;
                transition: 0.5s;
                width:100%;
                object-fit: cover;
            }

                .ProjectInfo{
                    display:flex;
                    align-items: center;
                    flex-wrap: wrap;
                    justify-content: space-around;
                    flex-direction: column;
                    align-items: flex-start;
                    min-height: 250px;
                    padding:20px;
                }

                    /*Project Tags*/
                    .ProjectTags{
                        width:280px;
                        gap:10px;
                        display:flex;
                        flex-wrap: wrap ;
                    }
                    .ProjectTags div{
                        font-weight: bold;
                        padding:4px 7px;
                        border:solid;
                        border-width: 2px;
                        border-radius: 10px;
                        font-size: 14px;
                    }

                    /* Project Title */
                    .ProjectTitle{
                        margin:10px;
                        max-width:280px;
                        font-size: 20px;
                        font-weight: bold;
                    }

                    /*Project Text*/
                    .ProjectText{
                        margin:10px;
                        width:260px;
                    }

                    /*Project Links*/
                    .ProjectLinks{
                        display:flex;
                        align-items: center;
                        justify-content:space-between;
                        width:100%;
                    }
                    .ProjectLinks a:link, .ProjectLinks a:visited{
                        text-decoration: none;
                        transition: 0.5s;
                    }
                    /* Button Links */
                    .Projectbutton:link, .Projectbutton:visited{
                        padding:4px 7px;
                        background-color:white;
                        color: rgb(10, 37, 70);;
                        border-radius: 10px;
                        font-size: 14px;
                        font-weight: bold;
                    }
                    .Projectbutton:hover{
                        padding:4px 7px;
                        background-color:rgba(96, 255, 84, 1);;
                        color: rgb(10, 37, 70);
                        border-radius: 10px;
                        font-size: 14px;
                        font-weight: bold;
                    }
                    /* Github Links */
                    .GithubButton:link, .GithubButton:visited{
                        color: white;
                        font-size: 30px;
                        font-weight: bold;
                    }
                    .GithubButton:hover{
                        color: rgba(96, 255, 84, 1);
                        font-size: 30px;
                        font-weight: bold;
                    }

    /*Footer*/
    .footer{
        text-align: center;
        background-color: rgb(10, 37, 70);
        height:50px;
        width:100%;
        margin-top: 35px;
        font-size: 25px;
    }
        .footer a:link, :visited{
            font-size: 40px;
            text-decoration: none;
        }
        .footer a:hover{
            font-size: 40px;
            text-decoration: none;
            color:rgba(96, 255, 84, 1);;
        }
    /*Responsive design*/
    @media screen and (max-width: 500px) {

    /*Header*/
    .Navlinks{
        display:none;
    }
    #DropDownContent {
        font-size: 11px;
        height:30px;
        display: flex;
        background-color: rgb(10, 37, 70);
        z-index: 1;
        position: fixed;
        top: 5px;
        width: 100%;
        justify-content: center;
        font-family: LexendDeca;
        font-weight: bold;
        gap:30px;
    }
    #HeaderButton{
        display:flex;
        height:40px;
        width:40px;
        display:flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color:white;
        background-color: rgb(10, 37, 70);
        border:none;
    }

    /*Header link styling*/
        .Header a:link, :visited{
            font-size: 12px;
            text-align: center;
            color:white;
            text-decoration: none;
            transition: 0.5s;
        }
        .Header a:hover{
            font-size: 12px;
            text-align: center;
            color: rgba(96, 255, 84, 1);
            text-decoration: none;
            transition: 0.5s;
        }

    .Title{
        font-weight: bold;
        font-size: 25px;
    }

    #HomePageArea{
        display:flex;
        flex-direction: column;
        align-items: center;
        background-color: rgb(6, 23, 40);
        z-index: 2;
    }

    /* Home Section */
    #HomeSection {
            font-family: Arial, Helvetica, sans-serif;
            display:grid;
            grid-template-columns: 1fr 1fr;
            font-size: 17px;
            margin-top:100px;
            gap:0px;
            max-width: 100%;
            align-items: center;
        }
        .me img{
            border-radius:140px;
            height: 100px;
            width: 100px;
        }

    /* About Me */
    #AboutSection{
        max-width:80%;
        justify-self: center;
        align-self: center;
        justify-self: center;
        padding:0px;
        padding-top: 100px;
    }

    /*Skills*/
    #SkillSection{
        padding:0px;
        padding-top: 100px;
    }
        .Skills{
            display:grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            justify-items: center;
            justify-content: center ;
            gap:30px;
            width:100%;
        }
            .Skills img{
                filter: brightness(0) saturate(100%) invert(100%) sepia(100%) 
                saturate(0%) hue-rotate(162deg) brightness(101%) contrast(104%);

                max-height: 40px;
                max-width: 40px;
                transition: 0.5s;
                cursor:pointer;
            }
            .Skills img:hover{
                filter: brightness(0) saturate(100%) invert(77%) sepia(57%) 
                saturate(564%) hue-rotate(58deg) brightness(102%) contrast(102%) 
                drop-shadow(0px 0px 15px green);
            }
    #projectSection{
        padding:0px;
        padding-top: 100px;
        padding-bottom: 100px;
    }
    }