html
{
    scroll-behavior: smooth;
}

body
{
    font: 16px Roboto Mono, Roboto, Helvetica, sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'Roboto Mono', monospace;

    margin: 0;
    padding: 0;
}

/* * {
  border: 1px solid red;
} */
/* Global formating */
h1
{
    font-family: 'Roboto Mono', sans-serif;
    font-size: 32px;

    color: #000;
}

h2
{
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: lighter;
    font-style: italic;

    color: #ccc;
}

p
{
    font-family: 'Roboto', sans-serif;

    color: #000;
}

a
{
    font-family: 'Roboto', sans-serif;

    text-decoration: none;

    color: #000;
}

/* Landing page */
#landing
{
    position: relative;

    width: 100%;
    height: 100vh;
    margin: auto;

    text-align: center;

    background-color: #fff;
    /* background-image: url("https://source.unsplash.com/random/1920x1080"); */
    background-repeat: no-repeat;
    background-size: cover;
}

#logo
{
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    /* may not need this: max-width: 100vw;  */

    transform: translate(-30%, -50%);
}

#logo a
{
    cursor: default;
}

.squigly
{
    animation: squiglyAnm 5s linear forwards 2s;

    stroke-dasharray: 974.4383544921875;
    stroke-dashoffset: 974.4383544921875;
}

.squiglyArrow
{
    animation: squiglyArrowAnm 7s step-end normal;
}

@keyframes squiglyAnm
{
    from
    {
        stroke-dashoffset: 974.4383544921875;
    }

    to
    {
        stroke-dashoffset: 0;
    }
}

@keyframes squiglyArrowAnm
{
    from
    {
        fill: transparent;
        stroke: transparent;
    }

    to
    {
        fill: #000;
        stroke: #000;
    }
}

/* use for text rather than svg
#landing h1
{
    font-size: 64px;

    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;

    overflow: hidden;

    transform: translate(-50%, -50%);
}

#landing p
{
    position: absolute;
    z-index: 1;
    right: 5%;
    bottom: 10vh;

    overflow: hidden;
} */
/* initial navigation bar*/
#navBar
{
    /* font-weight: bold; */
    /* REVIEW: don't need */
    position: absolute;
    z-index: 1;
    /* top: 0; */
    top: 85vh;

    width: 100%;
    margin: 0;

    height: 12.5vh;

    text-align: center;
}

#navBar li
{
    display: inline;

    padding: 0 10px 0 10px;
}

#navBar a:hover
{
    color: gray;
}

.dancingScroll
{
    font-family: 'Roboto', sans-serif;

    position: absolute;
    bottom: 0;

    visibility: hidden;

    width: 100%;
    margin: auto;
    padding-top: 5px;

    color: lightgray;
}

.dancingScroll span
{
    font-size: 12px;

    position: relative;

    display: inline-block;

    animation: dancingLetters 3s ease-in-out infinite;
}

.dancingScroll span:nth-child(1)
{
    animation-delay: calc(7.75s + 0s);
}

.dancingScroll span:nth-child(2)
{
    animation-delay: calc(7.75s + .25s);
}

.dancingScroll span:nth-child(3)
{
    animation-delay: calc(7.75s + .5s);
}

.dancingScroll span:nth-child(4)
{
    animation-delay: calc(7.75s + .75s);
}

.dancingScroll span:nth-child(5)
{
    animation-delay: calc(7.75s + 1s);
}

.dancingScroll span:nth-child(6)
{
    animation-delay: calc(7.75s + 1.25s);
}

.dancingScroll span:nth-child(7)
{
    animation-delay: calc(7.75s + 1.5s);
}

.dancingScroll span:nth-child(8)
{
    animation-delay: calc(7.75s + 1.75s);
}

@keyframes dancingLetters
{
    0%
    {
        visibility: visible;

        transform: translateY(0px);
    }

    20%
    {
        visibility: visible;

        transform: translateY(-5px);

        color: gray;
    }

    40%,
    100%
    {
        visibility: visible;

        transform: translateY(0px);
    }
}

/* header, condensed navigation */
#miniNav
{
    position: sticky;
    z-index: 100;
    top: 0;

    display: flex;

    height: 10vh;
    /* border: 1px solid red; */
    padding-top: 0;

    text-align: left;

    justify-content: space-around;
}

#miniNav a
{
    font-family: 'Roboto Mono', sans-serif;

    color: gray;
}

#miniNav a:hover
{
    color: gray;
}

#initials
{
    position: absolute;
    top: 1vh;
    left: 5%;
}

#menuDropdown:hover > #quickNav
{
    display: flex;
    flex-direction: column;

    border-radius: 30px 0 0 30px;

    justify-content: center;
    filter: drop-shadow(0 0 8px gray);
}

#menuDropdown:hover > #quickNav > li
{
    font-size: 18px;

    margin: 5% 0;
}

#menuDropdown:hover h1
{
    /* font-weight: 600; */

    color: gray;
    /*change to appropriate color */
}

#menuDropdown:hover a:hover
{
    color: black;
}

#quickNav
{
    position: absolute;
    top: 0;
    right: 0;
    /* border: 1px solid green; */

    display: none;

    width: 30%;
    height: 100vh;
    /* not showing the last list item */
    margin: 0;

    background-color: #fff;
}

#quickNav li
{
    list-style: none;
}

#quickNav ul
{
    font-style: italic;
}

.star
{
    position: absolute;
    top: 5vh;

    font-size: 16px;
    font-style: italic;
    font-weight: normal;

    right: .5vw;
    transform: translateX(-50%);

    /* animation: starAnm 60s linear 3; */
}

@keyframes starAnm
{
    48%
    {
        transform: rotate(0turn);
    }

    49%
    {
        transform: rotate(.25turn);
    }

    50%
    {
        transform: rotate(.5turn);
    }

    51%
    {
        transform: rotate(.75turn);
    }

    52%
    {
        transform: rotate(1turn);
    }

    100%
    {
        transform: scale(100%, 100%);
    }
}

/* main page text */
#projects,
#experiences,
#aboutMe,
#Contact
{
    max-width: 95vw;
    /*  REVIEW:edit out if needed   */
    margin: 20px 5%;
}

#projectsMain,
#experiencesMain,
#aboutMe
{
    display: flex;

    justify-content: center;
}

.title h1
{
  font-style: italic;

}

.projectsNames h1:hover,
.experiencesNames h1:hover
{
    /* font-style: italic; */
    color: #ccc;
}

.projectsNames,
.experiencesNames,
#aboutMeText,
.contactText,
.contactSocial
{
    margin: 0 20px;

    flex: 50%;
}

/* project and example list style */
.projectsNames li,
.experiencesNames li
{
    display: table;

    margin: 0;

    list-style-type: none;

    border: 0;
}

.keyWords
{
    font-family: Roboto Mono;
    font-size: 12px;

    display: inline-block;

    margin: 2.5px;

    color: gray;
    border: 1px solid lightgray;
}

#skillsContact
{
    display: flex;

    width: 100%;

    justify-content: flex-start;
}

.contactSocial a,
#aboutMeText a
{
    font-style: italic;

    color: gray;
}

.contactSocial a:hover,
#aboutMeText a:hover
{
    font-style: italic;

    color: blue;
}

footer
{
    position: relative;

    display: flex;

    width: 100%;

    justify-content: space-evenly;
}

footer h1:hover
{
    color: gray;
}

.forFun
{
    position: relative;
}

.forFun a
{
    cursor: cell;
    cursor: url(../images/global/upsideDownSmiley-16x16.png), pointer;
}

#siteInformation
{
    position: absolute;
    bottom: 0;

    margin: 0;
}

#siteInformation p
{
    font-family: Roboto Mono;
    font-size: 12px;

    margin: 0;
    padding: 0;
}

#siteInformation span
{
    font-family: Roboto Mono;
    font-size: 12px;

    display: inline-block;

    margin: 0;
    padding: 0;

    animation: dancingLetters 2.5s cubic-bezier(.46,.03,.52,.96) infinite;
}

#siteInformation a:hover
{
    color: blue;
}

#siteInformation span:nth-child(1)
{
    animation-delay: calc(1s + 0s);
}

#siteInformation span:nth-child(2)
{
    animation-delay: calc(1s + .25s);
}

#siteInformation span:nth-child(3)
{
    animation-delay: calc(1s + .5s);
}

#siteInformation span:nth-child(4)
{
    animation-delay: calc(1s + .75s);
}

#siteInformation span:nth-child(5)
{
    animation-delay: calc(1s + 1s);
}

#siteInformation span:nth-child(6)
{
    animation-delay: calc(1s + 1.25s);
}

#siteInformation span:nth-child(7)
{
    animation-delay: calc(1s + 1.5s);
}

#siteInformation span:nth-child(9)
{
    animation-delay: calc(1s + 1.75s);
}

#siteInformation span:nth-child(10)
{
    animation-delay: calc(1s + 2s);
}

#siteInformation span:nth-child(11)
{
    animation-delay: calc(1s + 2.25s);
}

#siteInformation span:nth-child(12)
{
    animation-delay: calc(1s + 2.5s);
}

#siteInformation span:nth-child(13)
{
    animation-delay: calc(1s + 2.75s);
}

#siteInformation span:nth-child(14)
{
    animation-delay: calc(1s + 3s);
}

#siteInformation span:nth-child(15)
{
    animation-delay: calc(1s + 3.25s);
}

#siteInformation span:nth-child(16)
{
    animation-delay: calc(1s + 3.5s);
}

/* #siteInformation span:nth-child(16)
{
    animation-delay: calc(1s + 3.75s);
} */





/* project and experiences content brief*/


.show strong
{
    font-style: italic;
}

.show h2:hover
{
  color: #717171;
}

.show
{
    /* display: none;
    overflow: auto;
    min-height: 50vh; */
    overflow: hidden;

    height: 0;

    transition: all 1s;
    /* min-height: 0; */
    /* height: 0; */
}

/* only applied when show is a child of grow */
.grow:hover > .show
{
    /* display: block; */
    overflow: hidden;
    /* min-height: 50vh; */

    height: 50vh;

    transition: all 1s;
    /* background: red; */
}

.seeMoreButton
{
    font-family: Roboto Mono, sans-serif;
    font-size: 12px;

    margin-bottom: 10px;
    padding: 5px;

    cursor: pointer;

    color: gray;
    border: 1px solid #ccc;
    background: transparent;
}

.seeMoreButton:hover
{
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
}

/* images */
.mainImg
{
    text-align: center;

    flex: 50%;
}

/* .mainImg img
{
    position: -webkit-sticky;
    position:         sticky;
    top: 0;

    max-width: 100%;
    max-height: 100vh;

    object-fit: contain;
} */
.image
{
    position: -webkit-sticky;
    position:         sticky;
    top: 0;

    max-width: 100%;
    max-height: 100vh;

    object-fit: contain;
}

/* Projects and Experiences*/
#projectsTemplateSection,
#experiencesTemplateSection
{
    width: 100vw;
    height: 100vh;
}

.projectsGrid
{
    /* border: 1px solid black; */
    display: grid;

    width: 100%;
    height: 100%;
    /* width: 100vw;
    height: 100vh; */

    grid-template-columns: 5fr 25fr 10fr 45fr 5fr;
    grid-template-rows: 5fr 45fr 35fr 5fr;
}

.experiencesGrid
{
    /* border: 1px solid black; */
    display: grid;

    width: 100%;
    height: 100%;
    /* width: 100vw;
    height: 100vh; */

    grid-template-columns: 5fr 45fr 10fr 25fr 5fr;
    grid-template-rows: 5fr 45fr 35fr 5fr;
}

.projectsTopText
{
    /* background: gold; */
    /* overflow: auto; */
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    font-style: italic;
}

.projectsTopText h1, .experiencesTopText h1
{

  font-size: 24px;
}

.experiencesTopText
{
    overflow: auto;

    max-height: 20vh;

    grid-column: 4 / 5;
    grid-row: 2 / 3;
}

.learning,
.similarProjects
{
    /* list-style: none; */
    list-style-type: '-';

    color: gray;
}

.projectsHero
{
    overflow: hidden;

    grid-column: 3 / 5;
    grid-row: 2 / 4;
}

.experiencesHero
{
    overflow: hidden;

    grid-column: 2 / 4;
    grid-row: 2 / 4;
}

.projectsHero img,
.experiencesHero img
{
    width: 100%;
    height: 100%;

    object-fit: contain;
    /* REVIEW:  */
}

.projectsInfoCard
{
    position: relative;
    z-index: 1;

    overflow: hidden;
    /* hide extra content */
    /* REVIEW:  */

    height: 100%;
    margin: 0;

    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
    /* old box shadow */
    /* box-shadow: -6px -6px 15px rgba(0, 0, 0, .25), 6px 6px 15px rgba(0, 0, 0, .25); */

    grid-column: 2 / 4;
    grid-row: 3 / 4;
    /* overflow: auto; */
}

.infoTextWrapper
{
    height: 100%;

    transition: transform 500ms ease-in;
}

/* REVIEW:  */
.experiencesInfoCard
{
    position: relative;
    z-index: 1;
    top: 20vh;

    overflow: hidden;

    height: 70vh;
    /* height: 100%; */
    margin: 0;

    border-radius: 10px;
    background: #fff;
    box-shadow: -6px -6px 15px rgba(0, 0, 0, .25), 6px 6px 15px rgba(0, 0, 0, .25);

    grid-column: 3 / 5;
    grid-row: 2 / 4;
}

.infoText
{
    height: 100%;
}

.infoText p,
.infoText h1
{
    padding-top: 5%;
}

.experiencesInfoCard .infoText p
{
    height: 60%;
}

.infoText p
{
    overflow: auto;

    height: 45%; /* REVIEW: adjust the heigh to keep all content on the screen. I suspect the title height needs to be fixed and the bounding box can be fixed too. */
    /* background: red; */
}



.infoText h1,
.infoText p,
.infoText a
{
    font-family: Roboto Mono;

    margin: 0 5%;
}

.return
{
    font-family: Roboto Mono, sans-serif;
    font-size: 12px;

    position: absolute;
    bottom: 10%;
    left: 5%;

    padding: 5px;

    cursor: pointer;

    color: gray;
    border: 1px solid #ccc;
    background: transparent;
}



.returnExp
{
    font-family: Roboto Mono, sans-serif;
    font-size: 12px;

    position: absolute;
    right: 5%;
    bottom: 10%;

    padding: 5px;

    cursor: pointer;

    color: gray;
    border: 1px solid #ccc;
    background: transparent;
}

.return:hover,
.returnExp:hover
{
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
}

.extSiteLink
{
    position: absolute;
    bottom: 10%;
    left: 5%;

    padding: 5px 2.5px;

    border-radius: 5px;
    background: none;
}

.extSiteLink:hover
{
    color: blue;
}

.scrollIcon
{
    position: absolute;
    top: 10%;
    right: 5%;
}

.scrollIcon ul
{
    list-style: none;
}

.scrollIcon li:hover
{
    color: red;
}

/* carousel */
.carouselHero
{
    position: relative;
}

.carouselSlide
{
    width: 100%;
    height: 100%;
    max-height: 100%;

    object-fit: cover;
}

.carouselTrackContainer
{
    position: relative;

    overflow: hidden;

    height: 100%;
}

.carouselImage
{
    position: absolute;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.carouselTrack
{
    height: 100%;
    margin: 0;
    padding: 0;

    list-style: none;

    transition: transform 500ms ease-in;
}

.carouselButton
{
    position: absolute;

    cursor: pointer;

    fill: #777;
}

/* nav buttons top and bottom */
.navOverImages
{
    display: flex;
    flex-direction: column;
}

.carouselUp,
.carouselDown
{
    box-sizing: border-box;
    width: 80px;
    height: 80px;

    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
    /* box-shadow: -5px 10px 20px rgba(0, 0, 0, .25); */
    /* REVIEW: fine turn drop shadow */
}

.carouselUp
{
    position: absolute;
    top: 5%;
    right: 5%;
}

.carouselDown
{
    position: absolute;
    right: 5%;
    bottom: 5%;
}

.expCarouselUp,
.expCarouselDown
{
    box-sizing: border-box;
    width: 80px;
    height: 80px;

    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 50%;
    background: #fff;
    box-shadow: -5px 10px 20px rgba(0, 0, 0, .25);
    /* REVIEW: fine turn drop shadow */
}

.expCarouselUp
{
    position: absolute;
    top: 5%;
    left: 95%;
}

.expCarouselDown
{
    position: absolute;
    z-index: 2;
    bottom: 5%;
    left: 95%;
}

.carouselNavigation
{
    /* controls the position of the nav elements reletive to parent div (body)*/
    position: absolute;
    top: 10%;
    right: 10px;

    display: flex;
    flex-direction: column;

    height: 80%;
    /* change to height of index card */

    justify-content: space-between;
}

.expCarouselNavigation
{
    /* controls the position of the nav elements reletive to parent div (body)*/
    position: absolute;
    top: 10%;
    left: 10px;

    display: flex;
    flex-direction: column;

    height: 80%;
    /* change to height of index card */

    justify-content: space-between;
}

.carouselIndicator
{
    width: 10px;
    height: 10px;
    padding: 0;

    cursor: pointer;

    border: 0;
    border-radius: 50%;
    background: #ddd;
}

.carouselIndicator.currentSlide
{
    background: #777;
}

.isHidden
{
    visibility: hidden;
    /* display: none; */
}

/* Image hover css */
.hiddenImg,
.hiddenImgExp
{
    display: none;
}

.elevenLogo
{
    animation: elevenLogoAnm 5s linear forwards;
    text-align: center;

    stroke-dasharray: 3110.771484375;
    stroke-dashoffset: 3110.771484375;
}

.elevenLogoPath
{
    animation: elevenLogoFillAnm 1s linear forwards 3.1s;
}

@keyframes elevenLogoAnm
{
    from
    {
        stroke-dashoffset: 3110.771484375;
    }

    to
    {
        stroke-dashoffset: 0;
    }
}

@keyframes elevenLogoFillAnm
{
    from
    {
        fill: transparent;
    }

    to
    {
        fill: black;
    }
}

.generateCMELogo .blade,
.generateCMELogo .dot,
.ring
{
    animation: generateCMELogoAnm 7s ease forwards;
}

@keyframes generateCMELogoAnm
{
    from
    {
        fill: transparent;
        stroke: transparent;
    }
    to
    {
        fill: #231f20;
        stroke: #231f20;
    }
}

.generateBSELogo .blade,
.generateBSELogo .dot
{
    animation: generateBSELogoAnm 7s ease forwards;
}

@keyframes generateBSELogoAnm
{
    from
    {
        fill: transparent;
        stroke: transparent;
    }
    to
    {
        fill: #26a9e0;
        stroke: #26a9e0;
    }
}

/* forFun Page */

.forFunTitle
{
    position: relative;
    bottom: 0;

    display: flex;

    width: 90vw;
    height: 10vh;
    margin: 0;
    padding-left: 5vw;

    vertical-align: bottom;

    justify-content: space-between;
}

#forFunSection span
{
    text-align: right;
}

.forFunWrapper
{
    display: flex;
    overflow-x: auto;

    height: 40vh;

    align-items: center;
}

.forFunContent
{
    max-height: 100%;
}

.forFunContent img
{
    width: auto;
    max-width: 53vw;
    height: auto;
    max-height: 35vh;
    margin: 0 5vw;
}



/* #projFeatured
{

} */
/* media queries */
#mobileWarning
{
    display: none;
}

/* 550 was determined from testing, but would likely suit mobile site better */
@media(max-width: 550px)
{
    #mobileWarning
    {
        display: block;

        height: 100vh;
        padding: 0 5%;

        background: #fff;
    }

    #mobileWarning h1
    {
        font-size: 24px;
    }


    #navBar
    {
        display: none;
    }
}