:root {
    --lightColor: hsla(178, 50%, 91%, .8);
    --brightLightColor: hsla(178, 50%, 91%, 1);
    --tableCaptions: hsla(35, 100%, 92%, 1);
    --darkShadow: hsla(178, 50%, 61%, .8);
    --primary: hsla(160, 30%, 44%, 1);
    --darkBorder: hsla(160, 30%, 30%, 1);
    --brightBorder: hsla(42, 50%, 50%, 1);
    --navTableShadow: hsla(42, 50%, 46%, 1);
    --h1ColorAhover: hsla(42, 50%, 55%, 1);
    --h1Shadow: gold;
    --hoverh4: hsla(25, 32%, 39%, 1);
    --primaryColor: hsla(25, 50%, 27%, 1);
    --black: #111;

    /* how to do fonts:
    --font-family-primary: "Caveat", cursive;
    --font-family-secondary: "Poppins", sans-serif; */
}

@media (width >=819px) {

    /* 
source for wrapper: https://css-tricks.com/best-way-implement-wrapper-css/ 
source for pallette: https://coolors.co/image-picker
*/
    .wrapper {
        padding-right: 20px;
        padding-left: 20px;
        background-color: var(--lightColor);
        margin: 0 auto;
        position: relative;
        box-sizing: border-box;
        /* margin-top: none; */
    }



    /*navigation  refresher found: https://www.w3schools.com/Css/css_navbar_horizontal.asp*/
    nav {
        width: 100%;
        left: 0;
        transform: none;
    }

    /* added x-index 10 so nav will always be on top */
    nav ul {
        list-style-type: none;
        margin: 0;
        margin-left: -20px;
        padding: 0;
        overflow: hidden;
        background-color: var(--primary);
        position: fixed;
        top: 0;
        width: 100%;
        min-width: 700px;
        box-sizing: border-box;
        z-index: 10;
    }

    nav li {
        float: left;
        font-size: 20px;
    }

    nav li a {
        display: block;
        color: var(--brightLightColor);
        text-shadow: 1px 1px 3px var(--navTableShadow);
        text-align: center;
        padding: 14px 16px;
    }

    /*change link on hover */
    nav li a:hover {
        background-color: var(--black);
        text-shadow: 1px 1px 3px var(--hoverh4);
        transition: background-color 0.3s ease-in, color 0.3s ease-in;
    }

    /* found imgs https://wallpaperaccess.com/teal-marble 
    AI free photo enhance https://www.upscale.media
*/
    body {
        background-image: url(img/backgroundS.png);
        background-repeat: no-repeat;
        background-size: cover;
        color: var(--primaryColor);
        text-decoration: none;
        font-family: Georgia, 'Times New Roman', Times, serif;
        padding-left: 5%;
        font-size: 1.2em;
    }

}

@media (width <=820px) {

    body {
        background-image: url(/img/backgroundP.png);
        background-repeat: no-repeat;
        background-size: cover;
        color: var(--primaryColor);
        text-decoration: none;
        font-family: Georgia, 'Times New Roman', Times, serif;

        /* padding-left: 5%; */
        /* margin-bottom: 5%; */
        /* min-width: 820px;   removed to give better flow*/
        background-color: var(--darkShadow);
        font-size: 1.2em;
    }

    /* source:https://www.youtube.com/watch?v=nTtUg8EuJ_8 */
    nav {
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            border-radius: 0 0 10px 10px;
        }

        /* added transition */
        a {
            display: block;
            padding: 10px;
            color: var(--brightLightColor);
            text-shadow: 1px 1px 3px var(--navTableShadow);
            background-color: var(--primary);

            &:hover {
                background-color: var(--black);
                text-shadow: 1px 1px 3px var(--hoverh4);
                transition: background-color 0.3s ease-in, color 0.3s ease-in;
            }
        }
    }

}

html {
    scroll-behavior: smooth;
}


@font-face {
    font-family: "handwriting";
    src:
        url("fonts/alex-brush/AlexBrush-Regular.ttf") format("ttf");
    font-weight: normal;
    font-style: normal;
}

body h1 {
    color: var(--darkBorder);
    text-transform: uppercase;
    font-size: 40px;
    text-align: center;
    text-shadow: 2px 2px 0px var(--brightLightColor);
    font-family: "handwriting", serif;
    padding-top: 1.6em;
}

#about {
    position: relative;
    top: 40px;
}

body h2 {
    color: var(--primary);
    font-size: 36px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--h1ColorAhover);
    padding-top: 70px;
    /* replaced the 2 brs before each h2 - anchor links */
}

/* combined a and a:hover w/ & */
a {
    text-decoration: none;
    font-weight: 600;
    color: var(--black);
    text-shadow: 2px 2px 5px var(--brightBorder);

    &:hover {
        color: var(--h1ColorAhover);
        text-shadow: 2px 2px 7px var(--hoverh4);
    }
}



/* about specific */

/* reference for box shadow https://www.w3schools.com/css/css3_shadows_box.asp */
#imgabout {
    width: 300px;
    float: left;
    /* border-radius: 50%; */
    border: var(--primary) 1px solid;
    box-shadow: 0 4px 28px 0 var(--brightBorder);
    margin: 20px;
}

#underConstruction {
    width: 100%;
    margin: 0;
    padding: 5px;
    text-align: center;
}

.about ul {
    font-weight: 700;
    list-style-type: none;
    /* float: right; */
    position: inherit;
}

/* frustrated with the denseness of bullet lists found solution at https://www.sitepoint.com/community/t/best-practices-for-list-spacing-both-ul-ol/6273 */
ul li,
ol li {
    line-height: 160%;
    /*or whatever height you like*/
}

/* divides edu into boxes
    -added flex display
    -wrap
    -min-width on boxes
*/
.edu {
    display: flex;
    min-width: 300px;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    list-style: url(img/scrollSmall.png);
}

/* icon from Illustration by <a href="https://unsplash.com/@roundicons?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Round Icons</a> on <a href="https://unsplash.com/illustrations/a-black-and-white-image-of-a-person-running-4rqUcSqpSus?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
       */
.work {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    margin-top: 30px;
    list-style: url(img/walkSmall.png);
}

/* link icon for employer's */
#webLink {
    width: 25px;
    height: 25px;
}

.work h3 {
    border-bottom: 1px var(--primary) solid;
}

/* edu and work divs */
.box {
    border: 3px var(--darkBorder) groove;
    box-shadow: 3px 3px 3px var(--darkShadow);
    width: 400px;
    margin: 5px 0;
    padding: 5px;
    margin-bottom: 15px;
    color: var(--primaryColor);
}

/* skill divs */
.skills {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    margin-top: 30px;
    list-style: url(img/skillsSmall.png);
}

/* modifier for h4 */
.boxS {
    border: 3px var(--darkShadow) groove;
    box-shadow: 3px 3px 3px var(--darkBorder);
    width: 200px;
    margin: 5px 0;
    padding: 5px;
    margin-bottom: 15px;
    color: var(--primaryColor);
}

h3 {
    margin-top: 2px;
}

h4 {
    color: var(--hoverh4);
    padding-left: 10px;
    margin-top: -10px;
    border-bottom: 1px var(--primary) solid;
}

.topPad {
    margin-top: 2px;
    margin-bottom: -15px;
    font-size: 21px;
}

/* table referenced https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Tables*/
table {
    table-layout: fixed;
    width: 80%;
    min-width: fit-content;
    margin: 0 auto;
    border-collapse: collapse;
    text-align: center;
}

table caption {
    font-size: 20px;
    font-weight: bold;
    text-shadow: 1px 1px 3px var(--tableCaptions);
    color: var(--navTableShadow);
}

th,
td {
    padding: 0.6em;
    border-bottom: 1px solid var(--navTableShadow);
}

article {
    padding-left: 10%;
    padding-bottom: 10%;
}

/* projects */
.tn {
    width: 50%;
    height: 40%;
}

section {
    margin: 50px 0;
}




input {
    background-color: var(--brightLightColor);
    color: var(--primaryColor);
    border: var(--primary) 2px solid;
    border-radius: 4px;
    font-size: 1em;
}


textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid var(--primary);
    border-radius: 4px;
    background-color: var(--brightLightColor);
    color: var(--primaryColor);
    resize: none;
    font-size: 1em;
}

select {
    border: 2px solid var(--primary);
    border-radius: 4px;
    background-color: var(--brightLightColor);
    color: var(--primaryColor);
}

input[type=radio] {
    padding: 4px;
}

.respond {
    padding-bottom: 20px;
    line-height: 20px;
}

button {
    font-family: inherit;
    font-size: 100%;
    color: var(--brightLightColor);
    background-color: var(--darkBorder);
    border: var(--primary) 6px;
    border-style: ridge;
    border-radius: 4px;
    margin: 14px;
}


input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: var(--primary) 2px solid;
    box-shadow: 0 2px 8px 0 var(--brightBorder), 0 2px 20px 0 var(--brightBorder);
}

/* source:https://stackoverflow.com/questions/63652860/how-do-i-add-space-between-my-radio-buttons-html */
.respond input[type="radio"] {
    margin: 15px;

}

footer {
    background-color: var(--primary);
    color: var(--brightLightColor);
    text-align: center;
    margin: -20px;
    padding: 5px 5px 10px 5px;
}

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

/* infinite carousel */
/* source: https://www.youtube.com/watch?v=KD1Yo8a_Qis

/* handles the overflow */
.carousel {
    margin: 100px auto;
    width: 90%;
    border: 3px var(--darkBorder) groove;
    box-shadow: 3px 3px 3px var(--darkShadow);
    display: flex;
    /* add animation */
    /* removes view of the over flow */
    /* adds scroll bar */
    overflow-x: auto;
    /* add gap - fills in between groups */
    gap: 1em;
    margin-top: 3px;
    margin-bottom: 3px;
}


/* removes scroll bar */
.carousel::-webkit-scrollbar {
    display: none;
}

/* handles the elements */
.carousel .group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    /* animation length rotations direction*/
    animation: spin 50s infinite linear;
}

.carousel .card {
    /* flex short hand: stop the shrink to fit */
    flex: 0 0 5em;
    height: 5em;
    /* padding: 1em; */
    font-size: 3rem;
    border-radius: .2rem;
    text-align: center;
    align-content: center;
    padding-top: .1em;
    padding-bottom: .1em;
}

.carousel .card img {
    height: 5em;
}

.carouselHeading {
    font-size: 30px;
    padding-top: 2rem;
}

/* add animation */
@keyframes spin {
    from {
        translate: 0;
    }

    to {
        translate: -100%;
    }
}