/* Reset some default styles for better cross-browser consistency */
body, h1, h2, p, ul {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

p{
    font-family: 'El Messiri', sans-serif;
    font-weight: 400;
}

/* Ensure the body takes up the full height of the viewport */
body {
    height: 100vh;
    padding: 1%;
    overflow-y: auto;

}

/* Responsive styles for the header */
header {
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
}

/* Responsive styles for the main content */
main {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* Responsive styles for the footer */
footer {
    background-color: rgba(0, 0, 0, 0);
    color: white;
    padding: 10px;
    text-align: center;
}

/* Responsive styles for navigation menu (if applicable) */
nav {
    background-color: black;
    color: white;
    padding: 10px;
}

/* Index - Styles */
.nav-div1{
    transform: translateY(0%);
    width: 100%;
    height: auto;
    border: 2px solid rgba(0, 0, 0, 0.5);
    /* border-bottom-left-radius: 55px; */
    /* border-bottom-right-radius: 55px; */
    padding: 1%;
    background-color: rgba(255, 255, 255, 0.15);
    color: rgba(0, 0, 0, 0.5);
    margin: 0 auto;
    backdrop-filter: blur(25px);

    transition: all 1s ease-in-out, height 1s ease-in-out;
    z-index: 1000;
    /* overflow-y: auto; */
}

.nav-heading{
    color: rgba(0, 0, 0, 0.5);
    text-align: center;
    margin: 0 auto;
    font-size: 72pt;
    font-family: 'El Messiri', sans-serif;
    padding-left: 20px;
}

.nav-table{
    width: fit-content;
    margin: 0 auto;
    border: 2px solid rgba(0, 0, 0, 0.5);
    border-radius: 25px;
    backdrop-filter: blur(25px);
    transition: all .25s ease-in-out;
}

.nav-table a{
    text-align: center;
    /* margin: 0 auto; */
    padding: 5px;
    color: rgba(0, 0, 0, 0.5);
    font-family: 'El Messiri', sans-serif;
    font-weight: 500;
    text-decoration: none;
    font-size: 12pt;
    transition: all .25s ease-in-out;
}

.nav-table a:hover{
    text-align: center;
    /* margin: 0 auto; */
    padding: 5px;
    color: rgba(0, 0, 0, 0.5);
    font-size: 15pt;
    /* text-decoration:overline; */
    font-weight: 700;
}

.nav-table td{
    text-align: center;
    /* margin: 0 auto; */
    padding: 5px;
}

#background-video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    filter: invert(100%) grayscale(100%) blur(50px) contrast(1500%) opacity(75%);
    margin: 0 auto;
    scale: 110%;
}



.nav-div1.full-height {
    height: auto;
    transform: translateY(0%);
}

/* .nav-div1.full-height .nav-table {

    transform: translateY(-300%);
} */

.content-display {
    display: none;
    background-color: rgba(255, 0, 0, 0);
    margin: 0 auto;
    width: auto;
}

.content-display.active {
    display: block;
    /* scale: 75%; */
    margin: 0 auto;
    overflow: hidden;
}

.content-display.active iframe {
    display: block;
    scale: 70%;
    transform: translateX(-22%) translateY(-15%);
    margin: 0 auto;
    overflow: hidden;
}

.projects-div1{
    transform: translateY(0%);
    width: 100%;
    height: 100%;
    border: 2px solid rgba(0, 0, 0, 0.5);
    /* border-bottom-left-radius: 55px; */
    /* border-bottom-right-radius: 55px; */
    padding: 1%;
    background-color: rgba(255, 255, 255, 0.15);
    color: rgba(0, 0, 0, 0.5);
    margin: 0 auto;
    backdrop-filter: blur(25px);

    transition: all .5s ease-in-out;
    z-index: 1000;
    /* overflow-y: scroll; */
}

.projects-table1{
    overflow-x: auto;
    transition: all .5s ease-in-out;
    width: 100%;
}

.projects-table1 table{
    margin: 0 auto;
    overflow-x: auto;
}

#projects-item{
    width: 250px; height: 250px; background-color: black;
    transition: all .5s ease-in-out;
    overflow: hidden;


}

#projects-item h1{
    color: rgba(255, 255, 255, 0.5);
    padding: 2%;
    font-family: 'El Messiri', sans-serif;
    z-index: 150;
    font-weight: 400;
}

#projects-item:hover{
    width: 300px; height: 300px;
    padding: 5px;
}

#projects-item #proj-img{
    overflow: hidden;
    margin: 0 auto;
    scale: 110%;
    z-index: 0;
    transition: all .5s ease-in-out;

}

#projects-item:hover img{
    overflow: hidden;
    margin: 0 auto;
    translate: 0 10% 0;
    scale: 115%;
}

.projects-heading{
    font-family: 'El Messiri', sans-serif;
    font-weight: 700;
    font-size: 72pt;
    text-align: center;
}

.inspired-div{
    text-align: center;
    width: fit-content;
    height: fit-content;
    font-family: 'El Messiri', sans-serif;
    border: 5px solid rgba(0, 0, 0, 0);
    scale: 110%;
    margin: 0 auto;
    translate: 0% 5% 0;
    filter: grayscale(25%) opacity(50%);
}

#p-inspired{
    color: black;
    font-size: 48pt;
}

#p-Christ-inspired{
    color: red;
    font-size: 72pt;
    translate: 0 -50% 0;
}

.contact-heading{
    font-family: 'El Messiri', sans-serif;
    font-weight: 700;
    font-size: 72pt;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);

}

.contact-form-div{
    width: fit-content; height: auto;
    scale: 200%;
    border: 2px rgba(0, 0, 0, 0) solid;
    margin: 0 auto;
    translate: 0 45% 0;
    padding: 5px;
}

.form-contact {
    display: grid;
    gap: 10px;
    width: 100%;
    margin: 0 auto;
}

.form-contact label {
    font-weight: bold;
}

.form-contact input {
    padding: 8px;
    border: 2px solid rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    width: fit-content;
    margin: 0 auto;
}

.form-contact button {
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
}

#resultMessage {
    width: auto;
    margin-top: 20px;
    font-weight: bold;
}

.about-heading{
    color: rgba(0, 0, 0, 0.5); 
    text-align: center; 
    font-family: 'El Messiri', sans-serif; 
    font-weight: 700; 
    font-size: 58pt;
}

.about-row {
    display: flex;
}
  
.about-row td{
    margin-right: 15px;

}

.about-column {
    flex: 25%;
    height: 500px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 5px solid rgba(0, 0, 0, 0);
    outline: 15px solid rgba(255, 0, 0, 0);
    backdrop-filter: blur(25px);
    padding: 0%;
    border-bottom-left-radius: 55px;
    border-bottom-right-radius: 55px;
}

.about-column h1 {
 text-align: center;
 translate: 0 5% 0;
}


.skill_icon{
    /* scale: 150%; */
    margin: 0 auto;
    text-align: center;
    background-color: rgba(255, 0, 0, 0);
    width: 425px;height: 425px;
    position: relative;
    translate: 0 -95% 0;
}

.skill_icon img{
    /* scale: 150%; */
    margin: 0 auto;
    overflow: hidden;
    width: 75%;
}

/* Media query for smaller screens */
@media only screen and (max-width: 800px) {
    main {
        padding: 10px;
    }



    .content-display.active {
        display: block;
        /* height: 100%; */
        /* scale: 75%; */
        margin: 0 auto;
        overflow: hidden;
        background-color: rgba(255, 0, 0, 0)(0, 0, 0);
    }
    
    .content-display.active iframe {
        /* height: 150%; */
        display: block;
        scale: 50%;
        transform: translateX(-79%) translateY(-45%);
        margin: 0 auto;
        overflow: visible;
    }

.projects-div1{
    margin:  0 auto;
}

    .projects-div1 #pj-table{
        margin: 0 auto;
        scale: 50%;
        overflow: scroll;
    }

    #content-contact{
        overflow: visible;
    }

    #content-contact button{
        scale: 50%;
        margin: 0 auto;
        padding-bottom: 25px;

    }

    #content-about{
        scale: 40%;
        overflow: visible;
        translate: 0 -25% 0;
    }


}