/************ GLOBAL ****************/

:root {
    --main: #dde1e6;
    --highlight: #7d93ff;
    --dark_blue: rgb(14, 14, 70);
}

.background-gradient {
    background: linear-gradient(90deg, rgba(0,0,0,1) 15%, rgba(53,51,205,1) 100%);
    z-index: -1;
}

.hidden {
    display: none !important; 
}

.top {
    position: relative;
    z-index: 1;
}

body { 
    font-family: Arial, Helvetica, sans-serif;
    color: var(--main);
}

a { 
    color: var(--main);
}

/************** HOME PAGE ***************/

.triangle1 {
    width: 100%;
    height: 100%;
    background-color: grey;
    opacity: 0.08;
    clip-path: polygon(0 100%, 11% 0, 53% 100%);
    z-index: 0;
    position: fixed;
    left: 0;
    animation: triangle1Animation 2200ms; 
    animation-delay: 200ms;
    animation-fill-mode: backwards;
}

.triangle2 {
    width: 85%;
    height: 100%;
    background-color: grey;
    opacity: 0.08;
    clip-path: polygon(28% 0, 80% 0, 70% 100%);
    z-index: 0;
    position: fixed;
    top: 0;
    right: 18%;
    animation: triangle2Animation 2200ms; 
    animation-delay: 200ms;
    animation-fill-mode: backwards;
}

.logo {
    display: block;
    opacity: 0.5;
    width: 19%;
    height: auto;
    margin: 2% auto;
    z-index: 0;
    position: fixed;
    top: 0;
    right: 3%;
    animation: logoAnimation 2600ms ease-out;
    animation-delay: 200ms;
    animation-fill-mode: backwards;
}

.home-section {
    text-align: center;
    font-weight: normal
}

.home-section h1 {
    font-size: 5vw;
    letter-spacing: 3px;
    margin-top: 4%;
    margin-bottom: 0%;
    animation: fadeInTopToBottom 2200ms;
    animation-delay: 200ms;
    animation-fill-mode: backwards;
}

/***** Tagline *****/
.home-section h2 {
    font-size: 1.2vw;
    opacity: 0.6;
    font-weight: 1;
    margin-top: 1%;
    margin-bottom: 4%;
    animation: fadeInRotate 600ms;
    animation-delay: 1800ms;
    animation-fill-mode: backwards;
    animation-timing-function: ease-in;
}

/************* Links *************/
.home-section h3 {
    animation: fadeInLeftToRight 2200ms; 
    animation-delay: 200ms;
    animation-fill-mode: backwards;
}

.home-section a {
    font-size: 1.75vw;
    margin-top: 1%;
    margin-left: 1.8vi;
    margin-right: 1.8vi;
}

/************** Summary *************/
.home-section p {
    font-weight: 1;
    opacity: 0.7;
    font-size: 1.4vw;
    margin-top: 5%;
    margin-left: 23%;
    margin-right: 23%;
    line-height: 115%;
    animation: fadeInRightToLeft 2200ms;
    animation-delay: 200ms;
    animation-fill-mode: backwards;
}

#headshot {
    display: block;
    width: 15%;
    height: auto;
    margin: 2% auto;
    animation: fadeInBottomToTop 2000ms;
    animation-delay: 200ms;
    animation-fill-mode: backwards;
}

#badge-container {
    display: flex;
    height: auto;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 1vh;
    gap: 2vw;
    animation: fadeInLeftToRight 2000ms ease;
    animation-delay: 200ms;
    animation-fill-mode: backwards;;
}

.badge {
    display: block;
    height: auto;
    width: 6vw;
}

/************* PROJECT MENU 'PAGE' ***************/

#project-container {
    height: 80vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-content: flex-start;
    width: 100%;

    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-align: left;
}

.project-category {
    width: 16%;
    height: fit-content;
    line-height: 3.33vi;
    margin: 1%;
    padding: 1%;
    list-style: none;
    border: 1px solid var(--main);
    animation: fadeIn 1200ms ease; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project-category li {
    font-size: 1.5vw;
    transition: transform 0.1 ease;
}

.category-active {
    transform: scale(1.03);
    color: var(--highlight);
}

.project-list {
    width: 75%;
    height: 20vi;
    font-size: 1.2vw;
    line-height: 150%;
    margin: 1%;
    padding: 1%;
    position: relative; 
    display: none;
    list-style: inside;
    border: 1px solid var(--main);
}

.project-list li {
    transition: transform 0.1 ease;
    animation: fadeIn 700ms ease;
}

.list-active { 
    transform: scale(1.01);
    color: var(--highlight);
}

/*********** PROJECT DESCRIPTIONS *************/

#project-image-container {
    display: block;
    width: 18.17%;
    height: auto;
    margin-right: 0;
    margin-left: 1%;
}

.project-image {
    display: block;
    width: 100%;
    height: auto;
}

.project-image-animation {
    animation: fadeInLeftToRight 275ms ease;
}

#project-description-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: 2%;
    border: 1px solid var(--main);
    padding-left: 1%;
    padding-right: 2%;
}

.project-description {
    font-family: Arial;
}

.project-description h2 {
    white-space: nowrap;
    padding-left: 1%;
    padding-right: 1%; 
    font-size: 1.2vw;
    text-align: center;
    font-weight: normal;
}

.project-description a {
    text-align: center;
    font-weight: normal;
}

.project-description p {
    white-space: nowrap;
    font-size: 1vw;
    line-height: .7;
    text-align: left;
    font-weight: lighter;
    padding-right: 1%;
    padding-left: 1.2%;
}

.project-description ul {
    font-size: 1vw;
    line-height: 1.5;
    font-weight: lighter;
    list-style: inside;
    padding-left: 6%;
}

.project-description-animation {
    animation: fadeInScaleUp 275ms;
}


/**************** ABOUT MENU 'PAGE' ***************/

#about-container {
    font-family: Arial, Helvetica, sans-serif;
    margin: auto;
    margin-top: 2%;
    height: 55vh;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 90%;
    animation: fadeIn 1600ms ease;
}

.bio {
    display: block;
    width: 75%;
    height: auto;
    border: 1px solid var(--main);
    overflow-y: auto;
    scroll-behavior: smooth;
    padding: 1%;
}

.bio p {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 1;
    margin-top: 1%;
    margin-bottom: 3.5%;
}

.skills {
    display: block;
    width: 16%;
    height: auto;
    border: 1px solid var(--main);
    overflow-y: hidden;
    align-items: center;
}

.skills h2 {
    background-color: var(--dark_blue);
    border-bottom: 1px solid var(--main);
    position: sticky;
    top: 0;
    text-align: center;
    font-size: 1.4vw;
    font-weight: 1;
    margin: 0;
    padding: 8%;
    z-index: 2;
}
#outer-scroller {
    display: flex;
    mask: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 17vh, rgba(0,0,0,1) 35vh, rgba(0,0,0,0) 50vh);
    height: 100%;
    overflow-y: hidden;
    flex-direction: column;
    justify-content: flex-end;
}

#inner-scroller {
    display: flex;
    list-style: none;
    flex-wrap: nowrap;
    flex-direction: column;
    padding: 0;
    justify-content: flex-end;
    height: fit-content;
    position: relative;
    animation: scroll 34s linear infinite;
}

.skills span {
    background-color: var(--dark_blue);
    width: max-content;
    padding: 4%;
}
.skills li {
    text-align: center;
    font-size: .9vw;
    line-height: 4;
    font-weight: lighter;
}

/*************** ANIMATIONS *****************/

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeInScaleUp {
    0% {
        opacity: 0;
        transform: translateY(-75%) scale(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeInLeftToRight {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInTopToBottom {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeInBottomToTop {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRightToLeft {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 0.7;
        transform: translateX(0);
    }
}

@keyframes fadeInRotate {
    0% {
        opacity: 0;
        transform: rotateX(90deg);
        filter: blur(6px);
        
    }
    100% {
        opacity: .6;
        transform: rotateX(0deg);
        filter: blur(0px);
    }
}

@keyframes triangle1Animation {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 0.08;
        transform: translateY(0);
    }
}

@keyframes triangle2Animation {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 0.08;
        transform: translateY(0);
    }
}

@keyframes logoAnimation {
    0% {
        opacity: 0;
        transform: translateY(-150%) translateX(100%) rotateX(500deg) rotateY(80deg) scale(0);
    }
    100% {
        opacity: 0.5;
        transform: translateY(0) translateX(0) rotateX(0deg) rotateY(0deg) scale(1);
    }
}

@keyframes scroll {
    to {
        transform: translateY(calc(50% - .10vh))
    }
}
/******* MOUSE BEHAVIOR ********/
@media (hover: hover) {
    a:hover {
        color: var(--highlight);
        transform: scale(1.03);
    }
    .project-category li:hover {
        color: var(--highlight);
        transform: scale(1.03);
    }
    .project-list li:hover {
        color: var(--highlight);
        transform: scale(1.01);
    }
    .badge:hover {
        transform: scale(1.1);
    }
}

@media (hover: none) {
    a:active {
        color: var(--highlight);
    }
}


/********** MOBILE FORMATTING ************/

@media (max-width: 440px) {

    .triangle1 {
        display: none;
    }
    .triangle2 {
        display: none;
    }

    .logo {
        width: 96%;
        bottom: 0;
        left: 7%;
        right: 0;
        top: -1%;
        opacity: 0.3;
        animation: logoAnimation 3200ms ease;
    }

    @keyframes logoAnimation {
        0% {
            opacity: 0;
            transform: translateY(400%) scale(0);
        }
        100% {
            opacity: 0.3;
            transform: translateY(0) scale(1);
        }
    }

    .home-section h1 {
        font-size: 28px;
        letter-spacing: .5vw;
    }

    .home-section h2 {
        font-size: 11px;
        margin-top: 1%;
        margin-bottom: 3%;
    }

    .home-section h3 {
        margin-bottom: 0;
    }

    .home-section a {
        font-size: 14px;
        margin: .5vi;
    }

    .home-section p {
        font-size: 14px;
        margin-left: 5%;
        margin-right: 5%;
    }
    #headshot {
        width: 35%;
        margin: 10% auto;
    }

    #badge-container {
        width: 95dvw;
        justify-content: space-around;
        height: auto;
        position: absolute;
        margin-top: 30dvh;
    }

    .badge {
        /* display: none; */
        width: 14dvw;
    }

    /********* PROJECTS *********/

    #project-container {
        flex-direction: column;
        justify-content: flex-start;
        align-content: center;
        flex-wrap: nowrap;
        height: 80vh;
    }

    .project-category {
        margin-top: 3%;
        margin-bottom: 3%; 
        border: none;
        text-align: center;
        height: fit-content;
        width: 100%;
    }

    .project-category li {
        line-height: 150%;
        font-size: 16px;
    }

    .project-list {
        height: fit-content;
        width: 100%;
        font-size: 15px;
        line-height: 175%;
        align-self: center;
        animation: fadeIn 700ms ease;
    }

    #project-image-container {
        display: none;
    }

    #project-description-container {
        height: auto;
        overflow-y: auto;
        width: 99%;
        align-self: center;
        margin: 0;
    }

    .project-description h2 {
        font-size: 14px;
        white-space: wrap;
        margin-bottom: 6%;
        line-height: 150%;
    }


    .project-description p {
        font-size: 12px;
        white-space: wrap;
        line-height: 115%;
        margin-left: 2%;
    }

    .project-description p::first-letter {
        margin-left: -2%;
    }

    .project-description ul {
        font-size: 12px;
        line-height: 150%;
    }

    /****** ABOUT *******/

    #about-container {
        flex-direction: column;
        width: 100%;
        height: 83dvh;
        justify-content: flex-start;
    }
    
    .bio {
        justify-content: flex-start;
        width: 100%;
        flex-grow: 1;
        flex-shrink: 1;
        margin-bottom: 3%;
    }

    .bio p {
        font-size: 14px;
        line-height: 1.2;
        padding: 2%;
    }

    .skills span {
        background-color: rgb(30, 30, 30);
        display: inline-block;
        padding: 0.5rem;
        margin: 0.5rem;
    }

    .skills {
        padding-top: 1%;
        width: 100%;
        flex-grow: 0;
        flex-shrink: 0;
        height: 25px;
        margin-top: auto;
    }

    .skills h2 {
        display: none;
    }

    #outer-scroller {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        overflow: hidden;
        height: 84%;
        mask: none;
    }
    #inner-scroller {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        animation: scroll 45s linear infinite;
        flex-wrap: nowrap;
    } 

    .skills li {
        letter-spacing: .8px;
        white-space: nowrap;
        text-align: center;
        font-size: 14px;
        padding: 0;
    }

    @keyframes scroll {
        to {
            transform: translateX(50%)
        }
    }
}

@media (max-height: 700px) and (max-width: 440px) {

    .project-category li {
        font-size: 15px;
        line-height: 140%;
    }

    .project-list {
        font-size: 13px;
        max-height: 20vh;
        overflow-y: auto;
    }
}

@media (max-width: 440px) and (max-height: 820px) {
    #badge-container {
        margin-top: 12dvh;
    }
}

@media (min-width: 1300px) {

    .home-section h1 {
        margin-top: 2%;
        font-size: 4vw;
    }
    
    .home-section h2 {
        margin-bottom: 2%;
        font-size: 1.1vw;
    }

    .home-section a {
        font-size: 1.4vw;
    }

    #headshot {
        width: 12%;
    }

    .home-section p {
        font-size: 1.1vw;
    }
    
    .badge {
        width: 5vw;
    }
}