ul li {
    word-break: break-all;
}



/*Index ///////////////////*/

.project_welc {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin: 20px;
    font-family: Arial, Helvetica, sans-serif;
}

#project_cards_container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 20px;
    margin: 20px 300px;
    min-height: 100vh;
    padding: 0;
}


@media only screen and (max-width: 1100px) {
    #project_cards_container {margin: 20px;}
    .details {margin: 20px 20px !important; line-break: anywhere;}
    
}



.details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
    grid-gap: 20px;
    margin: 20px 300px;
    padding: 0;
}


.detail {
    background: var(--black);
    color: var(--white);
}



.project_card {
    transition: transform 0.3s ease;
    transition-duration: 2500ms;
    /* background-color: var(--black); */
    display: flex;
    flex-direction: column;
    color: var(--white);
        box-shadow: 0 -10px 10px rgba(0, 0, 0, 1);

}

.project_card:hover {
    transform: scale(1.05);
}

.project_card a {
    text-decoration: none;
    color: inherit;
    display: grid;
}

.project_artwork_container {
    width: 100%;  
    overflow: hidden;
}


.project_card img {
    width: 100%;
    height: 150px; 
    object-fit: cover;
    background-color: var(--black);
    filter: contrast(200%);
    -webkit-filter: contrast(200%); 
    /* Adjusts the contrast of the input image. A value of 0% makes the image grey, 100% has no effect, and values over 100% create a contrast. */
}



.project_artwork_index {
    height: auto; 
    width: 100%;  
    object-fit: cover;
    background-color: var(--black);
    transition: transform 0.8s ease; 
}

.project_artwork_index:hover {
    transform: rotate(10deg) scale(1.4); 
    filter: contrast(100%);
    -webkit-filter: contrast(100%); 
}

/*Project Pages //////////////////////////*/

.prj-tit-fnl {
   font-size: 18px;
    margin: 10px;    
    padding-left: 10px;
    font-weight: bolder;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
}

.prj-dmn-fnl {
    margin-left: 10px; 
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--white);
    padding-left: 10px;
    font-weight: bold;
    font-style: italic;
    text-align: left;
}

.detail-cap {
    text-align: left;
    padding: 20px;
    margin: 0px;
    width: -moz-available;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 22px; 
}

/*//////////////////////////*/
/*//////////////////////////*/
/*//////////////////////////*/
/*//////////////////////////*/
/*//////////////////////////*/
/*//////////////////////////*/
/*//////////////////////////*/
/*//////////////////////////*/
/*//////////////////////////*/
/*//////////////////////////*/
/*//////////////////////////*/




.item3 {
    background-color: #552189;
}





/*.tg = True CSS Grid -- 1st used with WTWTA*/

.tg_details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 180px);
    grid-gap: 20px;
    margin: 50px;
}

.tg_detail {
    background: var(--black);
    color: var(--white);
    overflow: hidden;
}


.tg_prj_art {
    width: 100%;
    object-fit: contain;
    height: 100%;
}


.item1 {
    grid-row: 1 / 4;
}

.item2 {
    grid-row: 1 / 3;
}







/* project pages  */

.detail-cap-one {
    text-align: left;
    padding: 5px 20px 20px;
    margin: 0px;
    width: -moz-available;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 15px; 
}

.detail-cap-one-hl {
    text-align: left;
    padding: 5px 20px 20px;
    margin: 0px;
    width: -moz-available;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 20px; 
    font-weight: bold;
}


.details-one-link {
  text-decoration: underline;
    font-style: italic;


}

.details-one {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 20px auto 50px;
    width: 300px;
}







.prj-btn {
    text-align: center;
    display: grid;
    width: 100%;
    align-content: center;
    font-size: 12px;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--orange3);
    border: 2px solid var(--orange3);
    cursor: pointer;
    height: 100%;
    min-height: 80px;

    background-size: 10px 10px;
    background-image: repeating-linear-gradient(45deg, var(--orange2) 0, var(--orange2) 1px, var(--orange1) 0, var(--orange1) 50%);
    background-color: var(--orange1);
    transition: background-color 1s ease; /* Smooth transition effect */
  }

.prj-btn:hover {
    color: var(--white);
    border: 2px solid var(--white);
    background: radial-gradient(circle at bottom left,transparent 25%,var(--black) 25.5%, var(--black) 36%, transparent 37%, transparent 100%),radial-gradient(circle at top right,transparent 34%,var(--black) 34.5%, var(--black) 45.5%, transparent 46%, transparent 100%);
    background-size: 2em 2em;
    opacity: 1;
    background-color: var(--black27);
    transition-delay: 0s; /* 1-second delay on hover */
}







.prj-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    margin: 0px;
    padding: 0px;
}











.project__artwork {
    height: auto;
    width: 100%;  
    object-fit: contain;
    background-color: var(--black);
}


.imgcover {
    object-fit: cover;
    height: 300px;
}



/* Little Bees */
.imgcoverwidth {
    object-fit: cover;
    width: 100%;
}





.detail iframe {
    width: 100%; /* Set iframe width to fill the entire space */
    height: 300px;
    object-fit: cover; /* Ensure the content fills the entire iframe */
    border: 0;
}

.project__artwork__btm {
    height: auto;
    width: 100%;  
    object-fit: contain;
    background-color: var(--black);
}









.project-image {
    max-width: 300px;
}




















/* index.php */











.prj-tit-index {
   font-size: 16px;
    margin: 5px 10px;    
    padding-left: 10px;
    font-weight: bolder;
    font-family: Arial, Helvetica, sans-serif;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    overflow: hidden;

}

.prj-dmn-index {
    margin-left: 10px; 
    margin-top: 5px;
    margin-bottom: 0px;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 10px;
    font-weight: bold;
    font-style: italic;
    display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    overflow: hidden;



        /* background-color: var(--orange1); */

}







.prj-cap-index {
    margin: 5px 10px; 
    font-size: 12px;
    display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 20px; 
    height: 64px;
    color: var(--black121);
    padding: 0px 10px;
    mix-blend-mode: luminosity;

}



/* Navigation */

.navbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    box-shadow: 0 -10px 20px rgba(0, 0, 0, 1);
    padding: 0px;
    border-top: 4px solid var(--orange3);
    background: linear-gradient(45deg , var(--orange3) 10%,transparent 11%, transparent 89% , var(--orange3) 90%),linear-gradient(135deg , var(--orange3) 10%,transparent 11%, transparent 89% , var(--orange3) 90%),radial-gradient(circle, transparent 25%, var(--orange1)  26%),linear-gradient(45deg, transparent 46%, var(--orange3) 47%, var(--orange3) 52%, transparent 53%), linear-gradient(135deg, transparent 46%, var(--orange3) 47%, var(--orange3) 52%, transparent 53%);
    background-size: 2em 2em;
    background-color: var(--orange1);
    opacity: 1;
}

.navlink {
    text-align: center;
    display: grid;
    margin: 8px 4px;
    height: 20px;
    min-width: 70px;
    padding: 10px;
    align-content: center;
    font-size: 8px;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--orange3);
    border: 2px solid var(--orange3);
    background-size: 10px 10px;
    background-image: repeating-linear-gradient(45deg, var(--orange2) 0, var(--orange2) 1px, var(--orange1) 0, var(--orange1) 50%);
    background-color: var(--orange1);
    transition: background-color 1s ease; /* Smooth transition effect */
  }

.navlink:hover {
    color: var(--white);
    border: 2px solid var(--white);
    background: radial-gradient(circle at bottom left,transparent 25%,var(--black) 25.5%, var(--black) 36%, transparent 37%, transparent 100%),radial-gradient(circle at top right,transparent 34%,var(--black) 34.5%, var(--black) 45.5%, transparent 46%, transparent 100%);
    background-size: 2em 2em;
    opacity: 1;
    background-color: var(--black27);
    transition-delay: 0s; /* 1-second delay on hover */
}

.active {
    color: var(--white);
    border: 2px solid var(--white);
    background-size: 10px 10px;
    background-image: repeating-linear-gradient(45deg, var(--black) 0, var(--black) 1px, var(--black27) 0, var(--black27) 50%);
}

/* General  */

a {
  text-decoration: none;
  color: white;
}

body {
    /* border-box box model allows us to add padding and border to our elements without increasing their size */
    box-sizing: border-box;
    color: var(--white);
    margin-bottom: 150px;
    background:
        radial-gradient(30% 50% at 30% 100%,var(--g)),
        radial-gradient(30% 50% at 70%   0%,var(--g)) var(--s) 0,
        repeating-linear-gradient(90deg,var(--black27) 0 10%,var(--black) 0 50%);
    background-size: calc(10*var(--s)) calc(6*var(--s));
    animation: g17 5.5s infinite linear;
}


@keyframes g17 {
  to {
    background-position:
      0 calc(-6*var(--s)), 
      var(--s) calc(6*var(--s)),
      0 0;
  }

}

:root {
    --g:#0000 66%,var(--black27) 67% 98%,#0000;
    --s: 2px; /* control the size */
    --orange1: rgb(184, 80, 0);
    --orange2: rgb(110, 48, 0);
    --orange3: rgb(72, 31, 0);
    --black: rgb(0, 0, 0);
    --black27: rgb(27, 27, 27);
    --black121: rgb(121, 121, 121);
    --white176: rgb(176, 176, 176);
    --white: rgb(255, 255, 255);
}