* {
    box-sizing: border-box;
}

/* NO NOT REORDER !!! JS is expecting ':root {}' to be at cssRules[1] */
/* These colors must remain hexadecimal colors for JS */

/* Accent colors */
:root {
    --primary: #c1b1ff;
    --secondary: #c4d69c;
    --green: #acd0c2;
    --yellow: #FFD913;
    --orange: #f8b281;
    --red: #f191bb;
    --purple: #9e91f1;
}

/* accent and base colors are separated for easier ease of JS access to accent colours 
/* Base colors */
:root {
    --main: #3c5bce;
    --background: #fdf6f1;

    --mainText: #000000;
}

body {
    font-family: 'Work Sans', sans-serif;
    font-size: 1rem;
    margin: 0 5%;
    background-color: var(--background);
    color: var(--mainText);
}

header {
    height: 6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: column, wrap;
    font-family: 'Sansita', sans-serif;
    border-bottom: 2px solid var(--mainText);
}

#headerTitle {
    font-family: 'Sansita', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    padding: 20px;
}

h1 {
    font-family: 'Yeseva One', Serif;
    font-family: 'Sansita', sans-serif;
    font-size: 2rem;
    color: var(--mainText);
}

h2 {
    font-family: 'Sansita', sans-serif;
    font-size: 2rem;
    color: var(--mainText);
    margin: 0;
    text-align: center;
}

nav {
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    display: inline-flex;
    justify-content: space-between;
    color: var(--mainText);
}

a {
    text-decoration: none;
    cursor: pointer;
    /* color: #000000; */
    color: var(--mainText);
}

nav a {
    padding: 0 0.75em 0 0.75em;
    color: var(--mainText);
}

nav a:visited,
a#headerTitle:visited {
    color: var(--mainText);
}

nav a:hover,
a#headerTitle:hover {
    color: var(--main);
    transition: color 1s ease-in-out;
    /* Add a smooth transition effect for color changes */
    animation: textRainbow 7s linear infinite;
}


aside {
    font-size: smaller;
    font-style: italic;
}


main {
    height: fit-content;
    width: 98%;
    border-radius: 30px;
    padding: 2em 1em;
    margin: 10px;
    border: 3px solid var(--mainText);
    display: flex;
    /* justify-content: center; */
    align-items: center;
    flex-flow: column;
}



#tumbleStarContainer {
    height: 3%;
    width: 90%;
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    margin: 1% 5%;
    letter-spacing: 0.5em;
    /* border: 1px solid rgb(78, 68, 218); */
}

#tumbleStars {
    color: var(--main);
}

.tumbleStar {
    transition: color 0.25s ease;
    /* Add a smooth transition effect for color changes */
}

/* THIS STYLES THE STARS IN TUMBLE-STARS <p>>
THAT <p> IS REPLACED WITH INDIVIDUAL SPANS FOR EACH STAR EACH WITH THE CLASS tumbleStar 
THEY HAVE INDIVIDUAL NUMBERED IDs SUCH AS STAR1  */
.tumbleStar {
    /* color: var(--primary); */
    font-size: 1.5rem;
}



/* ----------main section heading-------------- */
/* THESE ARE USED ACROSS : HOME; CONTACT; ABOUT; */
/* -------for wider screens : pill heading ------ */

.pillHeadingContainer {
    width: 40%;
    height: 60px;
    text-align: center;
    justify-content: center;
    margin: auto;
    display: flex;
    flex-flow: wrap;
    position: relative;
    bottom: 55px;
}

.pillHeadingWrapper {
    z-index: 9;
    width: 75%;
    border: 3px solid var(--mainText);
    background-color: var(--main);
    background-color: var(--background);
    flex-flow: column wrap;
    border-radius: 20px;
    position: absolute;
}

.pillHeading {
    font-family: 'Sansita', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.02em;
    font-weight: bold;
    margin: 0 auto 5px auto;
}

/* -------for narrower screens : pill heading ------ */

.sectionTitle {
    display: none;
    margin: 0 auto 5% auto;
}

/* ----------------------------------------------- */



/* -----------------------FOR THE MOCK BROWSER WINDOWS------------------------ */
/* these are the styles for the inside of the 'mock browser windows' */
/* these apply across the homepage and projects page, they are relative to the respective size of window */
/* I'm sure there is a better way to make these mock windows, 
    but i honestly just a lots of fun making and figuring out how to do it. 
    I wanted to make them 100% css ans HTML.  */
.tabBarContainer {
    height: 3rem;
    width: 100%;
    /* background-color: #cf2ade; */
    border-radius: 14px 14px 0 0;
    display: inline-flex;
    justify-content: space-between;
}

.starsTabBarContainer {
    background-color: var(--background);
    /* border-radius: 13px 0 13px 0;  */
    border-radius: 13px 0 0 0;
    width: 80px;
    z-index: 10;
}

.headingTabBarContainer {
    background-color: var(--orange);
    width: 100%;
    z-index: 10;
}

.negSpaceTabBarContainer {
    /* background-color: #fff3ea; */
    border-radius: 0 13px 0 0;
    width: 340px;
    z-index: 10;
}

.starsTabBar {
    background-color: var(--orange);
    border-radius: 12px 0 13px 0;
    width: 80px;
    height: 100%;
    z-index: 10;
}

.headingTabBar {
    background-color: var(--background);
    width: 100%;
    height: 85%;
    z-index: 10;
    position: relative;
    top: 11px;
    ;
    border-radius: 13px 13px 0 0;
}

.negSpaceTabBar {
    background-color: var(--orange);
    border-radius: 0 13px 0 13px;
    width: 340px;
    height: 100%;
    z-index: 10;
}

.tabStars {
    display: inline-flex;
    position: relative;
    top: 0.4em;
    left: 0.3em;
    align-items: center;
    height: auto;
    width: auto;
    font-size: 1.25em;
}

.tabStar {
    margin: 0.15em;
}

.tabStar1 {
    color: hsl(295, 74%, 61%);
}

.tabStar2 {
    color: var(--yellow);
}

.tabStar3 {
    color: #44aa6d;
}

.tabHeadingWrapper {
    display: inline-flex;
    flex-flow: nowrap;
    position: relative;
    top: 0.5em;
    left: 1em;
    align-items: center;
    height: auto;
    width: auto;
    font-size: 1em;
}

.tabHeading {
    font-family: 'Sansita', sans-serif;
    font-size: 1.5em;
    letter-spacing: .05em;
    position: relative;
    top: 31x;
    color: var(--orange);
}

.windowContentContainer {
    display: flex;
    justify-content: center;
}

.windowImgWrapper {
    margin: 3%;
    height: 80%;
    width: 95%;
    position: relative;
    object-fit: cover;
    z-index: 100;
}

/* image inside of mock browser window */
.windowImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: auto;
    z-index: 1;
    border: 3px solid var(--orange);
    border-radius: 10px;
}






/* This is for all all buttons site-wide, the wrappers have the specifics for the different buttons in their section css  */
.buttonContainer {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin: 15px;
    padding: 0.8em;
    height: 3em;
}

/* FOR BUTTONS : 
    Home 'see more projects' -> projects  
    &&  
    About 'get in touch' -> contact */
.buttonWrapper {
    color: var(--background);
    padding: 1rem;
    border-radius: 0.75em;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--primary);
    background-color: var(--main);
    position: relative;
    box-shadow: 2px 2px var(--primary), 4px 4px var(--green), 6px 6px var(--yellow), 8px 8px var(--orange), 10px 10px var(--red), 12px 12px var(--main);
    transition: all 300ms;
}
.buttonText {
    color: var(--background);
}
.buttonWrapper:hover {
    animation: boxShadowWave 1s linear infinite;
    /* background-color: #6582e9; */
    background-color: var(--purple);
    transition: background-color 1s linear;
}
.buttonWrapper:active {
    font-size: 0.9em;
    padding: 0.9em;
    border-radius: 0.75em;
    transition: all 300ms linear;
}


/* ---------------------------------------MEDIA QUERIES---------------------------------------------*/

@media screen and (min-width: 1500px) {

    main {
        width: 82.63375rem;
        margin: auto;
    }
}

@media screen and (max-width: 900px) {
    body {
        margin: 1rem;
    }
    main {
        /* width: 98vw; */
        padding: 0;
        margin: auto;
        border: 0px;
    }
    .pillHeadingContainer,
    .pillHeadingWrapper,
    .pillHeading {
        display: none;
    }
    .sectionTitle {
        display: block;
    }
    .negSpaceTabBarContainer {
        width: 25%;
    }
    .negSpaceTabBar {
        width: 100%;
    }
}

@media screen and (max-width: 700px) {
    nav {
        display: block;
        justify-content: center;
    }
    nav a {
        margin-top: 0.75em;
        color: var(--mainText);
    }
    .navLeft {
        text-align: left;
    }
    .navRight {
        text-align: right;
    }
    .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;
    }
    .tabHeading {
        display: none;
        font-size: 1.5em;
        letter-spacing: .05em;
        position: relative;
        top: 3px;
    }
    .negSpaceTabBarContainer {
        width: 100%;
    }
    .narrowProjHeader {
        display: inline;
        color: var(--primary);
    }
}


@media screen and (max-width: 500px) {
    .navLeft,
    .navRight {
        font-size: 1em;
    }
    .sectionTitle {
        margin: 0;
        margin-bottom: 2rem;
        text-align: center;
        font-size: 2.5em;
    }
    
}


@media screen and (max-width: 350px) {
    html{
        width: 280px;
        overflow-x: hidden;
        margin: auto;
    }
    body{
        width: 280px;
        margin: auto;
        padding: 0;
    }
    main{
        width: 280px;
        margin: 0;
        padding: 0;
    }
    header{
        width: 250px;
        display: block;
        height: 150px;
        margin: auto;
    }
    #headerTitle{
        padding: 1rem;
        text-align: center;
        display: block;
    }
    nav{
        display: flex;
    }
}

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



@keyframes stackShadowWave {
    0% {
        border: 3px solid var(--primary);
        box-shadow: 10px -10px 0 -3px var(--main), 10px -10px var(--green),
            20px -20px 0 -3px var(--main), 20px -20px var(--yellow),
            30px -30px 0 -3px var(--main), 30px -30px var(--orange),
            40px -40px 0 -3px var(--main), 40px -40px var(--red);
    }

    20% {
        border: 3px solid var(--red);
        box-shadow: 10px -10px 0 -3px var(--main), 10px -10px var(--primary),
            20px -20px 0 -3px var(--main), 20px -20px var(--green),
            30px -30px 0 -3px var(--main), 30px -30px var(--yellow),
            40px -40px 0 -3px var(--main), 40px -40px var(--orange);
    }

    40% {
        border: 3px solid var(--orange);
        box-shadow: 10px -10px 0 -3px var(--main), 10px -10px var(--red),
            20px -20px 0 -3px var(--main), 20px -20px var(--primary),
            30px -30px 0 -3px var(--main), 30px -30px var(--green),
            40px -40px 0 -3px var(--main), 40px -40px var(--yellow);
    }

    60% {
        border: 3px solid var(--yellow);
        box-shadow: 10px -10px 0 -3px var(--main), 10px -10px var(--orange),
            20px -20px 0 -3px var(--main), 20px -20px var(--red),
            30px -30px 0 -3px var(--main), 30px -30px var(--primary),
            40px -40px 0 -3px var(--main), 40px -40px var(--green);
    }

    80% {
        border: 3px solid var(--green);
        box-shadow: 10px -10px 0 -3px var(--main), 10px -10px var(--yellow),
            20px -20px 0 -3px var(--main), 20px -20px var(--orange),
            30px -30px 0 -3px var(--main), 30px -30px var(--red),
            40px -40px 0 -3px var(--main), 40px -40px var(--primary);
    }

    100% {
        border: 3px solid var(--primary);
        box-shadow: 10px -10px 0 -3px var(--main), 10px -10px var(--green),
            20px -20px 0 -3px var(--main), 20px -20px var(--yellow),
            30px -30px 0 -3px var(--main), 30px -30px var(--orange),
            40px -40px 0 -3px var(--main), 40px -40px var(--red);
    }

}


@keyframes boxShadowWave {
    0% {

        box-shadow: 2px 2px var(--red), 4px 4px var(--primary), 6px 6px var(--green), 8px 8px var(--yellow), 10px 10px var(--orange), 12px 12px var(--purple);
    }

    20% {

        box-shadow: 2px 2px var(--orange), 4px 4px var(--red), 6px 6px var(--primary), 8px 8px var(--green), 10px 10px var(--yellow), 12px 12px var(--purple);
    }

    40% {
        box-shadow: 2px 2px var(--yellow), 4px 4px var(--orange), 6px 6px var(--red), 8px 8px var(--primary), 10px 10px var(--green), 12px 12px var(--purple);
    }

    60% {
        box-shadow: 2px 2px var(--green), 4px 4px var(--yellow), 6px 6px var(--orange), 8px 8px var(--red), 10px 10px var(--primary), 12px 12px var(--purple);
    }

    80% {
        box-shadow: 2px 2px var(--primary), 4px 4px var(--green), 6px 6px var(--yellow), 8px 8px var(--orange), 10px 10px var(--red), 12px 12px var(--purple);
    }

    100% {
        box-shadow: 2px 2px var(--red), 4px 4px var(--primary), 6px 6px var(--green), 8px 8px var(--yellow), 10px 10px var(--orange), 12px 12px var(--purple);
    }
}


@keyframes textRainbow {
    0% {
        color: var(--mainText);
    }

    10% {
        color: var(--main);
    }

    20% {
        color: var(--purple);
    }

    30% {
        color: var(--primary);
    }

    40% {
        color: var(--red);
    }

    50% {
        color: var(--orange);
    }

    60% {
        color: var(--yellow);
    }

    70% {
        color: var(--secondary);
    }

    80% {
        color: var(--green);
    }

    90% {
        color: var(--main);
    }

    100% {
        color: var(--mainText);
    }



    100% {
        color: var(--yellow);
    }
}