.allProjectsContainer {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: 100%;
    height: min-content;
    border-radius: 20px;
    padding: 0.5em;
    margin: auto;
    background-color: var(--main);
    border: none;
}

.projContainer {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: 100%;
    margin: 1% 0 1% 0;
    margin: auto;
}

.narrowProjTopLine {
    color: var(--background);
    display: none;
    margin: 0.2em;
    text-align: center;
}

.projWindowContainer {
    width: 60%;
    margin: 1em;
}

.projInfoContainer {
    margin: 0.25em;
    width: 30%;
    color: var(--background);
}

/* this class is basically windowContainer in home but edited for project page */
.projWindow {
    margin: 1em;
    width: 100%;
    background-color: var(--background);
    border: 3px solid var(--primary);
    border-radius: 18px;
    border-collapse: separate;
    margin: auto;
    position: relative;
    top: 1%;
    display: flex;
    flex-flow: column;
}


.narrowProjHeader {
    display: none;
    padding: 0.25em;
    text-align: center;
    color: var(--primary);
}

/*--------making the depth of the tab bar in the window container shallower.---------*/
.rainbowStackContainer {
    height: 95%;
    width: 90%;
}

/* ---account for shortening the tab height because moving title. ---*/
.tabBarContainer {
    height: 2rem;
}
.starsTabBarContainer,
.starsTabBar {
    width: 70px;
}
.headingTabBar {
    top: 5px;
}
.tabStars {
    top: 0.3em;
    left: 0.5em;
    font-size: 1em;
}
.negSpaceTabBarContainer {
    width: 100%;
}
.negSpaceTabBar {
    width: 100%;
    margin: 0;
}



/* these className selectors are all for styling the color-coordinated project windows.  */
/* this is all super repetitive and i really need to find a better way to do this, but as i want to remake in react, this is shelves and will be sorted when i get to that */
.purpleColor {
    color: var(--primary);
}
.purpleBorder {
    border: 2px solid var(--purple);
}
.purpleBackground {
    background-color: var(--purple);
}
.purpleBoxShad {
    box-shadow: 8px 8px var(--purple);
}


.secondaryColor {
    color: var(--secondary);
}
.secondaryBorder {
    border: 2px solid var(--secondary);
}
.secondaryBackground {
    background-color: var(--secondary);
}
.secondaryBoxShad {
    box-shadow: 8px 8px var(--secondary);
}


.greenColor {
    color: var(--green);
}
.greenBorder {
    border: 2px solid var(--green);
}
.greenBackground {
    background-color: var(--green);
}
.greenBoxShad {
    box-shadow: 8px 8px var(--green);
}



.primaryColor {
    color: var(--primary);
}
.primaryBorder {
    border: 2px solid var(--primary);
}
.primaryBackground {
    background-color: var(--primary);
}
.primaryBoxShad {
    box-shadow: 8px 8px var(--primary);
}


.yellowColor {
    color: var(--yellow);
}
.yellowBorder {
    border: 2px solid var(--yellow);
}

.yellowBackground {
    background-color: var(--yellow);
}
.yellowBoxShad {
    box-shadow: 8px 8px var(--yellow);
}


.orangeColor {
    color: var(--orange);
}
.orangeBorder {
    border: 2px solid var(--orange);
}
.orangeBackground {
    background-color: var(--orange);
}
.orangeBoxShad {
    box-shadow: 8px 8px var(--orange);
}



.redColor {
    color: var(--red);
}
.redBorder {
    border: 2px solid var(--red);
}
.redBackground {
    background-color: var(--red);
}
.redBoxShad {
    box-shadow: 8px 8px var(--red);
}


/* -------FOR BUTTON: 'open project'----------*/
/* these buttons all have additional styling with the color-specific styles */

.projButtonWrapper {
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row nowrap;
    font-size: 0.9em;
    background-color: var(--main);
    color: var(--background);
    padding: 1rem;
    width: 180px;
    border-radius: 0.75rem;
    transition: all 300ms;

}
.projButtonWrapper:hover {
    animation: none;
    background-color: var(--main);
}
.projButtonWrapper:active {
    box-shadow: 1px 1px var(--purple);
    margin: 13px 0 0 8px;
    transition: all 100ms linear;
}

.projFavIcon{
    width: 24px; 
    height: 24px;
    display: inline;
    background-color: var(--background);
    border-radius: 50%;
}

/* ---------------------------------------MEDIA QUERIES---------------------------------------------*/
/* NOTE : I have not structuyred my media queires to be mobile-first. I SHOULD HAVE DONE THIS- TO BE CHANGED */


@media screen and (max-width: 800px) {
/* 
    .projContainer {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        width: 100%;
        margin: auto;
    } */

    /* make window fill 98% of main, center with margin, p bottom margin is 0 so add to window */
    .projWindowContainer {
        width: 95%;
        margin: auto;
        margin-top: 1rem;
    }

    /* hide/reveal the wide/narrow info */
    .narrowProjTopLine {
        display: inline;
    }
    .wideProjTopLine {
        display: none;
    }


    .projContainer {
        display: flex;
        flex-flow: column wrap;
        width: 100%;
        justify-content: center;
    }

    .narrowProjBtn {
        display: inline;
    }

    .narrowProjHeader {
        display: block;
        margin: auto;
    }

    .wideProjHeader {
        display: none;
    }

    .projInfoContainer {
        display: flex;
        justify-content: space-between;
        flex-flow: column;
        margin: 0.25em;
        width: 90%;
        color: var(--background);
    }
    .projInfoContainer{
        margin: auto;
        display: flex;
        justify-content: center;
    }
    p{
        margin-bottom: 0.5rem;
    }
    .buttonContainer {
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;
        margin-top: 0.5rem;
    }
    .projContainer{
        display: flex;
        justify-content: center;
    }
}

@media screen and (max-width: 550px) {
    body {
        margin: 0;
    }
    main {
        padding: 0;
        margin: auto;
        overflow-y: hidden;
    }
    .allProjectsContainer {
        border: none;
    }
}




/* ---------------------------------------KEYFRAME ANIMATIONS---------------------------------------------*/



@keyframes borderRainbowWave {
    0% {
        border: 3px solid var(--primary);
      }

    20% {
        border: 3px solid var(--red);
        }

    40% {
        border: 3px solid var(--orange);
         }

    60% {
        border: 3px solid var(--yellow);
        }

    80% {
        border: 3px solid var(--green);
        }

    100% {
        border: 3px solid var(--primary);
        }

}