:root {
    /* Colors */
    --color-text-primary: #000;
    --color-text-secondary: #ccc;
    /* light gray for subtitles */
    --color-text-hover: gray;
    --color-bg-white: #fff;
    --color-link-hover: blue;
    --color-border: lightgray;
    --color-shadow: rgba(0, 0, 0, .26);

    /* Fonts */
    --font-primary: 'Roboto', sans-serif;
    --font-mono: 'Roboto Mono', monospace;
}

html {
    scroll-behavior: smooth;
}

body {
    font: 16px var(--font-primary);
    font-family: var(--font-primary);
    font-family: var(--font-mono);

    margin: 0;
    padding: 0;
}

/* Global formating */
h1 {
    font-family: var(--font-mono);
    font-size: 32px;

    color: var(--color-text-primary);
}

h2 {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: lighter;
    font-style: italic;

    color: var(--color-text-secondary);
}

p {
    font-family: var(--font-primary);

    color: var(--color-text-primary);
}

a {
    font-family: var(--font-primary);

    text-decoration: none;

    color: var(--color-text-primary);
}

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

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

    text-align: center;

    background-color: var(--color-bg-white);
    /* 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 4s linear forwards 1s;

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

.squiglyArrow {
    animation: squiglyArrowAnm 5s 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: var(--color-text-hover);
}

.dancingScroll {
    font-family: var(--font-primary);

    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: var(--color-text-hover);
    }

    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: var(--font-mono);

    color: var(--color-text-hover);
}

#miniNav a:hover {
    color: var(--color-text-hover);
}

#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 var(--color-text-hover));
}

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

    margin: 5% 0;
}

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

    color: var(--color-text-hover);
    /*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: var(--color-bg-white);
}

#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: var(--color-text-secondary);
}

.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: var(--font-mono);
    font-size: 12px;

    display: inline-block;

    margin: 2.5px;

    color: var(--color-text-hover);
    border: 1px solid lightgray;
}

#skillsContact {
    display: flex;

    width: 100%;

    justify-content: flex-start;
}

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

    color: var(--color-text-hover);
}

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

    color: var(--color-link-hover);
}

footer {
    position: relative;

    display: flex;

    width: 100%;

    justify-content: space-evenly;
}

footer h1:hover {
    color: var(--color-text-hover);
}

.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: var(--font-mono);
    font-size: 12px;

    margin: 0;
    padding: 0;
}

#siteInformation span {
    font-family: var(--font-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: var(--color-link-hover);
}

#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 1.25s;
    /*speed with which the drop down returns */
    /* 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 1.75;
    /*speed with which the drop down drops */
    /* background: red; */
}

.unreleasedProduct {
    /* display: block; */
    overflow: hidden;
    /* min-height: 50vh; */

    height: 50vh;

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

.noShow {
    display: none;
    overflow: hidden;

    height: 0;

    transition: all 1.25s;
    /*speed with which the drop down returns */
    /* min-height: 0; */
    /* height: 0; */
}

.seeMoreButton {
    font-family: var(--font-mono);
    font-size: 12px;

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

    cursor: pointer;

    color: var(--color-text-hover);
    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: var(--color-text-hover);
}

.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: var(--color-bg-white);
    box-shadow: 0 2px 5px 0 var(--color-shadow);
    /* 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: var(--font-mono);

    margin: 0 5%;
}

.return {
    font-family: var(--font-mono);
    font-size: 12px;

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

    padding: 5px;

    cursor: pointer;

    color: var(--color-text-hover);
    border: 1px solid #ccc;
    background: transparent;
}

.returnExp {
    font-family: var(--font-mono);
    font-size: 12px;

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

    padding: 5px;

    cursor: pointer;

    color: var(--color-text-hover);
    border: 1px solid #ccc;
    background: transparent;
}

.nextButton {
    font-family: var(--font-mono);
    font-size: 12px;

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

    padding: 5px;

    cursor: pointer;

    color: var(--color-text-hover);
    border: 1px solid #ccc;
    background: transparent;
}

.prevButton {
    font-family: var(--font-mono);
    font-size: 12px;

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

    margin: 0;
    padding: 5px;

    cursor: pointer;

    color: var(--color-text-hover);
    border: 1px solid #ccc;
    background: transparent;
}

.nextButton p,
.prevButton p {
    margin: 0;
    font-family: var(--font-mono);
    color: var(--color-text-hover);

}

.return:hover,
.returnExp:hover,
.prevButton:hover,
.nextButton: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: var(--color-link-hover);
}

.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: var(--color-text-hover);
}

/* 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: var(--color-text-hover);
}

.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: var(--color-bg-white);
    }

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


    #navBar {
        display: none;
    }
}

/* Hide Mobile Overlay on Desktop */
.mobile-project-info {
    display: none;
}