.project-card {
    margin: 5px 0%;
                        min-width: 200px;
                        max-width: 350px;
    padding: 10px;
}

.project-card:hover {
    cursor: pointer;
}

.project-card:hover .project-clipboard .featured-img {
    box-shadow: 
        3px 3px 5px rgba(0, 0, 0, 0.5), 
        -3px -3px 5px rgba(0, 0, 0, 0.5), 
        -3px 3px 5px rgba(0, 0, 0, 0.5), 
        3px -3px 5px rgba(0, 0, 0, 0.5);
    transition: 0.5s;
}

.project-card:hover .project-status {
    opacity: 1;
}

.project-clipboard {
    text-align: center;
    border-radius: 20px;
    background-color: rgb(139, 90, 43);
    padding-bottom: 5px;
}

.project-clipboard .clipboard-mechanism {
    height: 0px;
}

.project-clipboard .clipboard-mechanism-circle {
    position: relative;
    margin: auto;
    top: -15px;
    height: 50px;
    width: 50px;
    background-color: grey;
    outline: 2px solid #616161;
    border-radius: 50%;
}

.project-clipboard .clipboard-mechanism-body {
    position: relative;
    margin: auto;
    top: -40px;
    height: 30px;
    width: 90px;
    background-color: grey;
}

.project-clipboard .clipboard-paper {
    background-color: white;
    margin: 20px 10px 10px 10px;
    max-height: 100%;
}

.project-clipboard .featured-img {
    max-width: 200px;
    width: 80%;
    height: 200px;
    margin: 10px;
}

.project-clipboard h3 {
    font-size: 20px;
    margin: 0px 0px;
    /* min-height: 2em; */

    font-family: 'monospace';
}

.project-clipboard h3::before, .project-clipboard h3::after {
    content: "";
    transition: content 0.5s ease;
}

.project-card:hover .project-clipboard h3::before {
    content: "-   ";
}

.project-card:hover .project-clipboard h3::after {
    content: "   -";
}

.project-status {
                                                                /* opacity: 0; */
                                                                opacity: 1;
    padding-top: 10px;
    transition: 0.5s;

    display: flex;
    justify-content: space-around;

    padding-bottom: 10px;
}















.circular-progress {
                            /* background: conic-gradient(green 75%, transparent 75%, transparent 100%); */
    height: 50px;
    width: 50px;
    border-radius: 100%;
    display: flex;
}

.inner-circle {
    /* background-color: red; */
    height: 80%;
    width: 80%;
    border-radius: 100%;
    margin: auto;
    text-align: center;



    /* align-content: ; */
    /* text-align: center; */
    background-color: white;
    /* align-items: ; */
    display: flex;
    justify-content: center;
    align-items: center;


}

.inner-circle img {
    /* TO DO: replace with radial progress bar */
    /* https://stackoverflow.com/questions/14222138/css-progress-circle */
    /* width: 10%; */
    /* height: 32px; */
                                    /* background-color: green; */
    /* border-radius: 50%; */
    /* padding: 3px; */
                                    /* opacity: 0.5; */

    height: 60%;
    width: 60%;
}


















.project-clipboard p {
    font-size: 15px;
    text-align: left;
    padding: 5px 5px;
    margin: 0px 10px;
    height: 150px;
    overflow: hidden;

    font-family: 'monospace';
}








.wrapper {
    width: 100px; /* Set the size of the progress bar */
    height: 100px;
    position: absolute; /* Enable clipping */
    clip: rect(0px, 100px, 100px, 50px); /* Hide half of the progress bar */
}

/* Set the sizes of the elements that make up the progress bar */
.circle {
    width: 80px;
    height: 80px;
    border: 10px solid green;
    border-radius: 50px;
    position: absolute;
    clip: rect(0px, 50px, 100px, 0px);
}

/* Using the data attributes for the animation selectors. */
/* Base settings for all animated elements */
div[data-anim~=base] {
    -webkit-animation-iteration-count: 1;  /* Only run once */
    -webkit-animation-fill-mode: forwards; /* Hold the last keyframe */
    -webkit-animation-timing-function:linear; /* Linear animation */
}

.wrapper[data-anim~=wrapper] {
    -webkit-animation-duration: 0.01s; /* Complete keyframes asap */
    -webkit-animation-delay: 3s; /* Wait half of the animation */
    -webkit-animation-name: close-wrapper; /* Keyframes name */
}

.circle[data-anim~=left] {
    -webkit-animation-duration: 6s; /* Full animation time */
    -webkit-animation-name: left-spin;
}

.circle[data-anim~=right] {
    -webkit-animation-duration: 3s; /* Half animation time */
    -webkit-animation-name: right-spin;
}
/* Rotate the right side of the progress bar from 0 to 180 degrees */
@-webkit-keyframes right-spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(180deg);
    }
}
/* Rotate the left side of the progress bar from 0 to 360 degrees */
@-webkit-keyframes left-spin {
from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
/* Set the wrapper clip to auto, effectively removing the clip */
@-webkit-keyframes close-wrapper {
    to {
        clip: rect(auto, auto, auto, auto);
    }
}