* {
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: 'Josefin Sans';
    font-weight: 300;
}

body {
    background: rgb(234,219,200);
    background: linear-gradient(180deg, rgba(234,219,200,0.75) 0%, rgba(157,178,108,0.75) 100%);
    margin: 0; /* Add this to remove default margin */
    transition: filter 1s ease-in-out, backdrop-filter 1s ease-in-out;
}

#theport_title{
     width: 100%; text-align: center; position: relative; margin-top: -2%;z-index: auto;
     color: rgb(82, 76, 95);
}

body.inverted{
backdrop-filter: invert(50%); 
filter: invert(100%);
}

body.grayed{
    backdrop-filter: invert(50%); 
    filter: invert(95%)  grayscale(85%);
    color: rgb(0, 0, 0);
    }

body.greened{
    backdrop-filter: hue-rotate(70deg); 
    filter: hue-rotate(70deg);
    color: rgb(0, 0, 0);
    }

/* Default button styles */
#darkToggle {
    font-size: 5pt;
    background-color: #7c603a36;
    color: #ffffff;
    width: 25px; height: 25px;
    border-radius: 100%;
    border: rgba(0, 0, 0, 0.2) solid 1px;
    transition: all .5s ease-in-out;
    /* Other default styles... */
}

/* Clicked button styles */
#darkToggle.clicked {
    background-color: #ffffff;
    color: #3498db;
    border: rgba(255, 0, 204, 0) solid 1px; 
    /* Other clicked styles... */
}

/* Default button styles */
#grayToggle {
    font-size: 5pt;
    background-color: #7c603a36;
    color: #ffffff;
    width: 25px; height: 25px;
    border-radius: 100%;
    border: rgba(0, 0, 0, 0.2) solid 1px;
    transition: all .5s ease-in-out;
    /* Other default styles... */
}

/* Clicked button styles */
#grayToggle.clicked {
    background-color: #ffffff;
    color: #3498db;
    border: rgba(0, 0, 0, 0) solid 1px; 
    /* Other clicked styles... */
}

/* Default button styles */
#greenToggle {
    font-size: 5pt;
    background-color: #67e25436;
    color: #ffffff;
    width: 25px; height: 25px;
    border-radius: 100%;
    border: rgba(0, 0, 0, 0.2) solid 1px;
    transition: all .5s ease-in-out;
    /* Other default styles... */
}

/* Clicked button styles */
#greenToggle.clicked {
    background-color: #ffffff;
    color: #3498db;
    border: rgba(0, 0, 0, 0) solid 1px; 
    /* Other clicked styles... */
}


#bgvid1 {
    position: fixed;
    top: 0;
    left: 0;
    /* width: 100%;
    height: 100%; */
    object-fit: cover;
    z-index: -1;
}

em {
    background-color: rgba(141, 117, 167, 0.25);
    backdrop-filter: blur(15px);
}

.nav1 {
    background-color:rgba(99, 89, 133, 0.05);; /* gray - #494949 */
    padding: 20px;
    width: 100%;
    height: 50px;
    position: relative; /* Ensure the container is relatively positioned */
    color: rgb(82, 76, 95);
    z-index: 1001;
    position: sticky;
    top: 0;
    border-bottom: 1px rgba(0, 0, 0, 0.1) solid;
    
}

#Pem{
padding: 5px; background-color: rgba(130, 115, 151, 0.25); 
font-style: normal; 
border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;
backdrop-filter: blur(5px);
transition: border-radius .25s ease-in-out;
}

.nav1:hover #Pem{
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    
}

#nav1_content {
    color: rgb(82, 76, 95);
    display: none;
    background-color: rgba(99, 89, 133, 0.05);; /* Remove or reduce opacity */
    padding: 20px;
    position: absolute;
    width: 0;
    height: 0px;
    top: 100%;
    left: 35%;
    transition: width 1s ease-in-out, height 1s ease-in-out, border-radius 1s ease-in-out, display .5s ease-in-out, border 1s ease-in-out;
    backdrop-filter: blur(10px);
    z-index: 2000; /* Set a higher z-index value */
}

.nav1:hover #nav1_content {
    display: block;
    width: fit-content;
    height: 125px;
    backdrop-filter: blur(15px);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    z-index: 2002; /* Ensure it's above other content */
    
    border-bottom: 1px rgba(0, 0, 0, 0.05) solid; border-left: 1px rgba(0, 0, 0, 0.05) solid; border-right: 1px rgba(0, 0, 0, 0.05) solid;
}


#nav1_buttons {
    text-align: center; /* Center the buttons horizontally */
}

/* #nav1_buttons a {
text-decoration: none;  Remove underlines from links 
color: #494949;
}  */

#nav1_buttons a {
    text-decoration: none; /* Remove underlines from links */
    color: rgba(233, 213, 218, 0.25);
    display: inline-block; /* Make the links inline-block elements */
    padding: 10px 20px; /* Adjust the padding to create spacing */
    margin: 5px; /* Add margin to separate the buttons */
    text-decoration: none; /* Remove underlines from links */
    scale: 85%;
    background-color: rgba(130, 115, 151, 0.5); /* Button background color */
    border: 1px solid rgba(233, 213, 218, 0.25); /* Add a border to the buttons */
    border-radius: 25px; /* Add rounded corners to the buttons */
    }

#nav1_buttons a:hover {
    text-decoration: none; /* Remove underlines from links */
    color: rgba(233, 213, 218, .5);
    display: inline-block; /* Make the links inline-block elements */
    padding: 10px 20px; /* Adjust the padding to create spacing */
    margin: 5px; /* Add margin to separate the buttons */
    text-decoration: none; /* Remove underlines from links */
    scale: 85%;
    background-color: rgba(130, 115, 151, 0.15); /* Button background color */
    border: 1px solid rgba(233, 213, 218, .5); /* Add a border to the buttons */
    border-radius: 25px; /* Add rounded corners to the buttons */
    transition: background-color .5s ease-in-out, border .5s ease-in-out, color .5s ease-in-out;

}


.nav1blur {
    position: sticky;
    top: 0;
    background-color: rgba(24, 18, 43, 0.05);
    z-index: 998;
    backdrop-filter: blur(2px);
    width: 100%;
    height: 55px;
    margin-top: -10%;
    cursor: pointer; /* Add cursor style to indicate it's clickable */
    border-bottom: 1px rgba(0, 0, 0, 0.05) solid;
    transition: all .25s ease-in-out, border-bottom 1s ease-in-out, background-color 1s ease-in-out; 
}

.nav1blurclicked {
    position: sticky;
    /* top: 0; */
    background-color: rgba(30, 19, 52, 0.1);
    z-index: 1998;
    backdrop-filter: blur(2px);
    width: 100%;
    height: 100px;
    cursor: pointer; /* Add cursor style to indicate it's clickable */
    border-bottom: 1px rgba(0, 0, 0, 0.05) solid;
}
  



.c1 {
    overflow: hidden;
     background-color: rgba(99, 89, 133, 0.05); /* lime - #d9ecd9;  */
    padding: 20px;
    width: 100%;
    height: 500px; /* Remove fixed height for responsiveness */
    scale: 100%;
    backdrop-filter: blur(10px);
    color: rgb(122, 112, 145);
    transition: color 1s ease-in-out, background-color 1s ease-in-out, scale .5s ease-in-out, border-radius .5s ease-in-out, transform .5s ease-in-out, box-shadow .5s ease-in-out;
}

.c2 {
    background-color: rgba(99, 89, 133, 0.05); /* creme - #ece8d9;  */
    padding: 20px;
    width: 100%;
    backdrop-filter: blur(10px);
    color: rgb(122, 112, 145);
    transition: color 1s ease-in-out, background-color 1s ease-in-out, scale .25s ease-in-out, border-radius .5s ease-in-out, transform .25s ease-in-out, box-shadow .5s ease-in-out;
     height: 500px;/* Remove fixed height for responsiveness */
}

.c1:hover, .c2:hover {
    cursor:crosshair;
    transform: scale(98%);
    border-radius: 15px;
    background-color: rgba(35, 19, 61, 0.25);
    color: rgb(122, 112, 145);
    box-shadow: 0px 0px 20px 2px rgba(233, 213, 218, 0.25);
}

.c1 p{
    color: rgb(122, 112, 145);
    transition: all 1s ease-in-out;
}

.c2 p{
    color: rgb(122, 112, 145);
    transition: all 1s ease-in-out;
}

.c1:hover p{
    color: rgb(152, 136, 176);
}

.c2:hover p{
    color: rgb(152, 136, 176);
}


.first-color {
    background: #faf6e9;
}

.second-color {
    background: #ece8d9;
}

.third-color {
    background: #fffdf6;
}

.fourth-color {
    background: #494949;
}


.img-container {
    position: relative;
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next row */
}

.proj-container {
    position: relative;
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next row */
    overflow-y: hidden;
    overflow-x: scroll;
}

.img_div1 {
    flex: 1; /* Distribute available space evenly among items */
    width: 400px; /* Adjust the width to fit two divs side by side with margin */
    height: 450px;
    background-color: black;
    margin: 15px; /* Add margin to separate the divs */
    transition: scale .25s ease-in-out, border-radius .25s ease-in-out;
}

.img_div1:hover{
    scale: 105%;
    cursor: pointer;
    border-radius: 5px;
}

    .img_div1 img{
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    }

.proj_div1 {
    flex: 1; /* Distribute available space evenly among items */
    width: 250px; /* Adjust the width to fit two divs side by side with margin */
    height: 250px;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(2px);
    margin: 15px; /* Add margin to separate the divs */
    transition: scale .25s ease-in-out, border-radius .25s ease-in-out,
     background-color 1s ease-in-out, backdrop-filter 1s ease-in-out,
     transform .25s ease-in-out;
    z-index: 1000;
    overflow: hidden;
}

.proj_div1.active {
    transform: scale(2.5) translateY(-50%); /* 250% scale */
    background-color: rgba(0, 0, 0, 0.5);
    cursor: copy;
    z-index: 5;
    backdrop-filter: blur(15px);
    border-radius: 5px;
    
}

.proj_div1 h1{
    color: rgba(255, 255, 255, 0.507);
    font-size: x-large;
    padding-top: 85%;
    padding-left: 5%;
    }

    .proj_div1.active h1{
        color: rgba(255, 255, 255, 0.507);
        font-size: x-large;
        padding-top: 5%;
        padding-left: 5%;
        }
    
    .proj_div1 h1 a {
        text-decoration: none;
        color: rgba(255, 255, 255, 0.507);
        font-weight: 500;
    }

    .proj_div1 h1 a:hover {
        text-decoration: none;
        color: rgba(255, 255, 255, 0.75);
        font-weight: 500;
    }

    .proj_div1 img{
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    }

    .proj_div1.active img{
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    }

.proj_div1:hover{
    scale: 105%;
    cursor: pointer;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
}

.centered {
    position: fixed;
    top: 50%;
    left: 40%;
    /* transform: translate(-50%, -50%); */
}


body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Hide scrollbars */
}

.video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Place the video behind other content */
}

#background-video {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the video */
}

.video_filter1, #background-video {
    filter:hue-rotate(-25deg) blur(5px) contrast(100%);
}



/* Add media queries for responsiveness */
@media screen and (max-width: 880px) {
    .c1, .c2 {
        padding: 10px; /* Adjust padding for smaller screens */
        overflow-x: auto;
    }

    .c1{
        height: fit-content;
    }

.nav1{
    padding: 5px;
    top: -0%;
}

.nav1blur{
transform: translateY(-10%);
top: 0%;
}
.nav1blurclicked{
    transform: translateY(-10%);
    }

.nav1  h1{
    color: #ffffff;
}

#nav1_content{
left: -5%;
top: 50%;
scale: 70%;
}

.img-container{
    margin-top: 5%;
    float: left;
    position: relative;
    scale: 125%;
    margin-bottom: 5%;
    /* width: 500px; */
}

    .img_div1 {
        overflow: auto;
        width: 200px;
        height: 200px;
        /* gap: 5%; */ 
        animation: imgdiv-anim1 ease infinite;
        animation-duration: 10s;
    }



@keyframes imgtext-anim1 {
    0% {
        top: 0%;
        transform: translateY(-500%) scale(1); /* 100% scale */
    }
    50% {
        top: 150%;
        transform: translateY(-550%) scale(1.05); /* 105% scale */
    }
    100% {
        top: 0%;
        transform: translateY(-500%) scale(1); /* Back to 100% scale */
    }
}

@keyframes imgdiv-anim1 {
    0% {
        transform: scale(1); /* 100% scale */
    }
    50% {
        transform: scale(1.05); /* 105% scale */
    }
    100% {
        transform: scale(1); /* Back to 100% scale */
    }
}

#table_home_abt{
scale: 75%;
margin-left: -15%;  
margin-top: -5%;
margin-bottom: -10%;  
}

.proj_div1 {
    flex: 1; /* Distribute available space evenly among items */
    scale: 80%;
    background-color: black;
    margin: 1px; /* Add margin to separate the divs */
    transition: scale .25s ease-in-out, border-radius .25s ease-in-out;
    
}

.proj_div1:hover{
    scale: 80%;
    cursor: pointer;
    border-radius: 5px;
}

.proj_div1.active {
    transform: scale(2.5) translateY(-50%); /* 250% scale */
    background-color: rgba(0, 0, 0, 0.5);
    cursor: copy;
    z-index: 2000;
    backdrop-filter: blur(15px);
    border-radius: 5px;
    scale: 70%;
}

.centered {
    position: fixed;
    /* top: 25%; */
    left: 25%;
    /* transform: translate(-50%, -50%); */
}

div[id="img-container1"]{
    background-color: rgba(0, 0, 0, 0);
    scale: 110%;
    transform: translateY(-35%);
    margin-bottom: -25%;
    margin-top: 2%;
    margin-left: -10%;
    height: fit-content;
}

div[id="tyGod"]{
top: 5%;
transform: translateY(-50%) translateX(-48%);
scale: 50%;

}

#timediv{
    transform: translateY(-10%);
    scale: 80%;
}

#verse-of-the-day{
    margin-top: -20%;
}

}

::selection{
    background-color:  rgba(113, 91, 144, 0.5);
    backdrop-filter: blur(55px);
    color: rgb(245, 245, 245);
}

#projects_table{
    width: fit-content;
    padding: 25px;
    float: left;
}




#table_home_abt{
    margin-bottom: -5%;  
    }

/* 

colors
off white - rgb(245, 245, 245) (primary)

creme light - rgb(242, 234, 211) (secondary)

creme mid - rgb(223, 215, 191) (tertiary)

wood - rgb(63, 35, 5) (tone)


*/

/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: rgba(241, 241, 241, 0); 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgba(136, 136, 136, 0.5); 
    transition: border-radius .5s ease-in-out;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
    border-radius: 15px;
  }