:root {
    --white: #D9D9D9;
    --black: #252525;
    --duckyellow: #FEB601;
}
body{
    background-color: var(--black);

    font-family: 'Inter', sans-serif;
    font-size: 1.5em;
	margin: 0;
}

/*global classes*/
.light{
    background-color: var(--white);
    color: var(--black);
    button{
        background-color: var(--black);
        color: var(--white);

        &:hover {
            text-decoration: underline;
            font-weight: bold;
        }
    }
}
.dark{
    background-color: var(--black);
    color: var(--white);
    button{
        background-color: var(--white);
        color: var(--black);
        
        &:hover {
            text-decoration: underline;
            font-weight: bold;
        }
    }
}
.bold{
    font-weight: bold;
}
   
a {
    color: inherit;
    text-decoration: none;
    /* font-size: 24px; change to em */
    font-size: 1em;



    &.button {
        padding: 8px 16px;
        border: none;
        cursor: pointer;
        font-size: 1em;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        display: block;
        transition: 0.3s;
        width: max-content;
        margin: auto;
    }

    /*keep on the bottom of the link css!!!*/
    /*make links in nav underlines when hovered over them*/
    &:hover {
        text-decoration: underline;
    }
}

/** Header */
header{
    padding: 32px;

    /*putting the content in it's place*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    img{
        max-width: 100%;
        height: 32px;
    }

    /*cleaning up text style*/
    text-decoration: none;

    
    nav{
        display: flex;
        justify-content: flex-end;
        align-items: center;

        a{
            margin-left: 64px;
            transition: 0.3s;
        }
    }
}


/** Main */
main{
    #top-image{
        /* background: linear-gradient(to top, var(--black), transparent), url('/src/images/Portfolio/Bee_LucysFarm.gif'); */
        background-size: cover;
        background-position: center;
        padding: 175px 0;
        h1 {
            font-family: 'Instrument Serif', 'Times New Roman', Times, serif;
            /* font-size: 128px; change to em */
            font-size: 5em;
            color: var(--white);
            text-align: center;
            margin: 0;
        }
    }

    #arrowDown{
        padding: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;


    }

    #portfolioSimplified h2{
        font-weight: bold;
        margin: 0;
        text-align: center;
    }

    #portfolioSimplified section{
        padding: 32px 0;
        a p{
            /* font-size: 18px; change to em */
            font-size: 0.8em;
            font-weight: lighter;
            font-style: italic;
            margin: 0;
            padding: 0;
        }

        .buttons
        {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 16px 8px;
            .button{
                margin:  8px;
                font-size: 0.8em;
            }
        }
    }

    #tag-selector{
        display: flex;
        /* put underneath eachother and center */
        flex-direction: column;
        align-items: center;
        div{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /*keep the last 2 items on their own line*/
        /* 8px gap vertically and horizontally between buttons*/
        /* gap: 8px 16px; */
        transition: 0.3s;

        
        margin: 16px 8px;
        .button{
            margin:  8px;
            font-size: 0.8em;
        }

        .activeBtn{
            /* add the duck yellow color box-shadow: */
                box-shadow: 6px 6px 0 var(--duckyellow);
                transition: transform 0.3s, box-shadow 0.3s;
                &:hover {
                    transform: scale(1.05);
                    box-shadow: 6px 6px 0 var(--duckyellow);
                }
        }
    }

    .shortAboutMe,.timelineStory{
        padding: 32px 20%;
        margin: auto;
        display: flex;
        /*order sideways*/
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        
        p{
            width: 100%;
            text-align: center;
        }
        img{
            width: 256px;
            height: auto;    
        }
    }

    #portfolioSimplified section .timelineStory{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: auto;
        .timeLine{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
             p{
                margin: 0 32px;
                width: fit-content;
                text-align: center;
            }

            .verticalLine{
                border-left: 4px solid var(--duckyellow);
                width: 4px;
                height: 100%;
            }
        }
    }

    .image-scroller{
        /** space between is 80px*/
        display: flex;
        /**show elements even when they are outside the container, */
        overflow-x: auto;
        padding: 32px 0;
        scroll-behavior: smooth;

    }
    .portfolioPiece{
        display: inline-block;
        margin: 16px;
        img{
            width: 250px;
            height: 250px;
            object-fit: cover;
            border: 6px solid var(--black);
            box-shadow: 6px 6px 0 var(--duckyellow);
            transition: transform 0.3s, box-shadow 0.3s;
            &:hover {
                transform: scale(1.05);
                box-shadow: 6px 6px 0 var(--duckyellow);
            }
        }
        /*make p overlap img, put it at the bottom of the image, but keep inside the image container*/
        p{
            text-align: center;
            margin-top: 8px;
        }


    }



    .portfolioPiecePage{
        background-color: var(--white);
        background-image: url('../images/portfolio-background.png');
        padding: 32px 10%;
        margin: 32px auto;
        img{
            display: block;
            margin: 32px auto;
            max-width: 40%;
            height: auto;
            box-shadow: 6px 6px 0 var(--duckyellow);
            border: 6px solid var(--black);
        }

        section{
            margin-bottom: 32px;
            h2{
                text-align: center;
                font-weight: bold;
            }
            div{
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: row;
                gap: 10%;
            }
            ul{
                    list-style-type: square;
                    /*center the ul*/
                    margin: auto;
                    padding: 0;
            }
            .TLDR{
                text-align: auto;
                justify-content: space-around;
                margin: 0 10%;
            }
            .column
            {
                width: 150%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                img{
                    max-width: 100%;
                    height: auto;
                    margin: 16px 0;
                }
            }
        }

    }
}

/** Footer */
footer{
    #footerLightLine{
        background-color: var(--white);
        height: 16px;
        margin-top: 32px;
    }
    #copyright{
        text-align: center;
        margin: 32px;
    }
}



/***-------------***/
/***Media Queries***/
/***-------------***/

/* at 1200px */
@media (max-width: 1200px) {
    /*decrease header fontsize*/
     main {
        #top-image {
            h1 {
                font-size: 3em;
            }
        }
    }
}

/* At 840px */
@media (max-width: 850px) {
    main {
        #top-image {
            h1 {
                font-size: 2em;
            }
        }
    }
}