.bg-dust{
    background-color: #E8ECEF;;
}

.td-wrap{
    word-wrap: break-word;
    min-width: 160px;
    max-width: 160px;
}

 .midnight-dark{
     background-color: #252635;
 }
 .midnight-dust{
     background-color: #2B2C38;
     color: white;
 }

 .content-wrapper{
     display: flex;
     gap: 1rem;
 }

 .left{
     color: papayawhip;
     width: 65%;
 }

 .right {
     width: 35%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     min-width: 150px;
     position: relative;
 }

 .box-container {
     position: relative;
     padding-top: 100%; /* 1:1 aspect ratio placeholder */
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .ripple {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
     overflow: hidden;
     animation: ripple 3s linear infinite
 }

 .ripple:hover{
     cursor: auto;
 }

 .ripple img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     border-radius: 50%;
 }

 .ripple::before,
 .ripple::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     border-radius: 50%;
     animation: ripple 3s linear infinite 1s
 }

 .ripple::after {
     animation: ripple 3s linear infinite 2s
 }

 @keyframes ripple {
     0% {
         box-shadow: 0 0 0 .05rem rgba(255, 239, 213, 0.2)
     }

     100% {
         box-shadow: 0 0 0 5rem rgba(255, 255, 255, 0)
     }
 }

 .intro-text{
     max-width: 512px;
 }
 .intro-text a{
     color: #9b9a99;
 }

 @media only screen and (max-width: 767px) {
     .content-wrapper {
         flex-wrap: wrap-reverse;
         justify-content: center;
     }
     .project-container {
         flex-wrap: wrap;
     }
     @keyframes ripple {
         0% {
             box-shadow: 0 0 0 .05rem rgba(255, 255, 255, 0.2)
         }
         100% {
             box-shadow: 0 0 0 2rem rgba(255, 255, 255, 0)
         }
     }
 }

.project-container{
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

 ::-webkit-scrollbar {
     width: 20px;
     height: 20px;
 }
 ::-webkit-scrollbar-track {
     background-color: transparent;
 }
 ::-webkit-scrollbar-thumb {
     background-color: #ffefd5a8;
     border-radius: 20px;
     border: 6px solid transparent;
     background-clip: content-box;
 }
 ::-webkit-scrollbar-thumb:hover {
     background-color: #c5b5a5;
 }

.le-card{
    display: flex;
    flex-direction: column;
    background-color: #222330d4;
    margin-bottom: 1rem;
    padding: 2rem;
    width: 25rem;
    min-width: 20rem;
    height: auto;
    border-radius: 18px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    color: #c7cbd1;
    scroll-snap-align: start;
}

 @media only screen and (min-width: 767px) {
     .le-card{
         max-height: 75vh;
         overflow-y: auto;
     }
 }

.le-card h4{
    color: papayawhip;
}

 .le-card h6{
    color: #9b9a99;
}

 .le-card a{
     color: #9b9a99;
 }

 .le-card::-webkit-scrollbar-track {
    margin-top: 32px;
    margin-bottom: 32px;
 }

 .le-card::-webkit-scrollbar-thumb {
    background-color: #9b99992e;
    border: 7px solid transparent;
 }

 .card-head{
     display: flex;
     justify-content: space-between;
 }

 .card-head > *{
     display: inline-block;
 }

 .card-head> i:hover{
     cursor: pointer;
 }

 .text-papaya{
     color: papayawhip;
 }

 .unselectable{
     pointer-events: none !important;
     user-select: none !important;
 }

 /* For SWAL2 */
 .swal2-styled.swal2-confirm:focus {
     outline: 0;
     box-shadow: 0 0 0 .2rem rgb(137 120 92 / 26%) !important;
 }
 #swal-msg-body, #swal-sender-name, #swal-sender-email{
     background-color: #F2F2F2;
 }
 #swal-msg-body, #swal-sender-name, #swal-sender-email:focus {
     background-color: #EDEDED;
 }