body.nighted{
    background: rgb(24,18,43);
    background: -moz-linear-gradient(0deg, rgba(24,18,43,1) 22%, rgba(77,76,125,1) 59%, rgba(99,89,133,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(24,18,43,1) 22%, rgba(77,76,125,1) 59%, rgba(99,89,133,1) 100%);
    background: linear-gradient(0deg, rgba(24,18,43,1) 22%, rgba(77,76,125,1) 59%, rgba(99,89,133,1) 100%);
    filter: blur(20px) progid:DXImageTransform.Microsoft.gradient(startColorstr="#18122b",endColorstr="#635985",GradientType=1);
    transition: brightness(50%) background-color 1s ease-in-out, all 1s ease-in-out;
    }

    em.nighted {
        background-color: rgba(233, 213, 218, 0.5);
        backdrop-filter: blur(15px);
    }

/* Default button styles */
#nightToggle {
    font-size: 5pt;
    background: rgb(24,18,43);
background: -moz-linear-gradient(0deg, rgba(24,18,43,1) 6%, rgba(99,89,133,1) 66%, rgba(130,115,151,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(24,18,43,1) 6%, rgba(99,89,133,1) 66%, rgba(130,115,151,1) 100%);
background: linear-gradient(0deg, rgba(24,18,43,1) 6%, rgba(99,89,133,1) 66%, rgba(130,115,151,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#18122b",endColorstr="#827397",GradientType=1);
    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 */
#nightToggle.clicked {
    background-color: #ffffff;
    color: #3498db;
    border: rgba(0, 0, 0, 0) solid 1px; 
    /* Other clicked styles... */
}

.moon{
    width: 5px;
    height: 5px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Center the white circle precisely */
    transition: all .5s ease-in-out;
    visibility: hidden;
}

/* Add this style for the white circle */
#nightToggle .moon {
    width: 5px;
    height: 5px;
    scale: 120%;
    visibility: visible;
    transition: all .5s ease-in-out;
}

/* Adjust the white circle styles for the clicked state */
#nightToggle.clicked .moon {
    width: 15px;
    height: 15px;
    scale: 150%;
}

/* nav bar */
.nav1.nighted {
    background-color:rgba(233, 213, 218, 0.35); /* gray - #494949 */
    padding: 20px;
    width: 100%;
    height: 50px;
    position: relative; /* Ensure the container is relatively positioned */
    color: #ffffff;
    z-index: 1001;
    position: sticky;
    top: 0;   
    transition: background-color 1s ease-in-out, all 1s ease-in-out;
    box-shadow: 5px 5px 20px 5px rgba(233, 213, 218, 0.15);
}

#nav1_content.nighted {
    display: none;
    background-color: rgba(233, 213, 218, 0.25); /* 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, all 1s ease-in-out;
    backdrop-filter: blur(10px);
    z-index: 1001; /* Set a higher z-index value */
    box-shadow: 5px 5px 20px 5px rgba(233, 213, 218, 0.15);
}



/*  */
#Pem.nighted {
    padding: 5px; background-color: rgba(233, 213, 218, 0.5) ; 
    font-style: normal; 
    border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;
    backdrop-filter: blur(5px);
    transition: border-radius .25s ease-in-out, background-color 1s ease-in-out;
    }


/* content divs */
.c1.nighted {
    background-color: rgba(68, 60, 104, 1); /* lime - #d9ecd9;  */
    transition: background-color 1s ease-in-out, scale .5s ease-in-out, border-radius .5s ease-in-out;
    color: rgb(45, 28, 75);
    backdrop-filter: blur(5px);
    box-shadow: 5px 5px 20px 5px rgba(233, 213, 218, 0.15);
}

.c2.nighted {
    background-color: rgba(68, 60, 104, 1); /* creme - #ece8d9;  */
     height: 500px;/* Remove fixed height for responsiveness */
     color: rgba(233, 213, 218, 0.435);
     box-shadow: 5px 5px 20px 5px rgba(233, 213, 218, 0.15);
     transition: background-color 1s ease-in-out, scale .5s ease-in-out, border-radius .5s ease-in-out;
}

.c1.nighted:hover, .c2.nighted:hover {
    cursor:crosshair;
    scale: 98%;
    border-radius: 15px;
    background-color: rgba(77, 76, 125, 0.75);
}


/* project items */

.proj_div1.nighted {
    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: black;
    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;
}

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

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

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

.proj_div1.nighted:hover{
    scale: 105%;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 5px 5px 20px 5px rgba(233, 213, 218, 0.15);
    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, box-shadow 1s ease-in-out;;
}