@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');


:root{
    --heading-font-family: 'Inter', sans-serif;
    --text-font-family: 'Plus Jakarta Sans', sans-serif;

    --secondary-text-color: #757575;
    --resume-text-color: #7BC200;
}

.page-width{
    max-width: 1200px;
    width: 100%;

    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 2rem;

    overflow-x: hidden;
}

#main-content{
    width: 100vw;
    flex: 1;
    box-sizing: border-box;
}

main{
    font-family: var(--heading-font-family);
}

#hero{
    font-family: var(--heading-font-family);
}

/* header */

.header-nav{
    border-bottom: solid 1px #E5E6EB;
}

.navbar{
    display: flex;
    justify-content: space-between;
    align-items: center ;
}

.jad{
    font-family: var(--heading-font-family);
    display: flex;
    align-items: center;

    text-decoration: none;
    span{
        font-weight: bolder;
    }
}:visited{
    text-decoration: none;
    color: black;
}

.logo{
    padding: 0 1em 0 1em;
    width: 40px;
    height: 40px;
}

.nav-links{
    font-family: var(--heading-font-family);
    color: var(--secondary-text-color);
    text-decoration: none;

    display: flex;
    align-items: center;
    gap: 1em;
    
    list-style: none;
    margin: 0 1em 0 0;
    padding: 0;
    margin-right: 1em;

    a{
        text-decoration: none;
    }:visited{
        color: var(--secondary-text-color);
        text-decoration: none;
    }

    li.active a{
        color: black;
    }
}

/* hero */

.main-page-hero{
    display:flex;
    align-items: center;
    justify-content: center;

    min-height: 50vh;    
}

.hero-text{
    align-items: flex-start;

    h1{
        font-size: xxx-large;
        margin-top: 0;
        margin-bottom: 0;
    }
    h2{
        margin-bottom: .5em;
        font-family: var(--heading-font-family);
        color: var(--secondary-text-color);
        font-weight: 300;
    }
}

.home-svg-container img{
   width: 30em;
   height: auto;
   display: block;

   margin: 2em 0 0 1em;
}

/* home */
.word-create:hover{
    background-image: linear-gradient(to right, #10417b, #74aef2, #fef2b1, #fed600);
    background-clip: text;

    color: transparent;

    cursor: default;
}

.word-vision{}

.word-create{

}
/* resume page */

.download-resume{
    padding-top: 2em;

    display: flex;
    justify-content: center;
}

.resume-button{
    color: #000;
    font-family: var(--heading-font-family);
    text-decoration: none;

    position: relative;
    font-weight: bolder;
}

.resume-button::after{
    content: "";
    display: block;
    width: 40%;
    height: .15em;

    background-color: #000;
    margin: .5rem auto 1rem;
}

.resume-button:hover{
    color: #7BC200;
}

.resume-container{
    width: 100%;
    /* height: 100vh; */

    h1,h2{
        color: #7BC200;
    }

    h3{
        span{
            color:#757575;
        }
    }

    ul{
        margin-top: 0;
    }

    .flex-row h4,
    .flex-row p{
        margin: 0;
    }

    .tech-skills{
        padding-left: 0;
    }

    .data-projects{
        li{
            padding-left: .5em;
        }
    }
}

.tech-skills-section{
    list-style-type: none;
    padding-left: 0;
}


.tech-skills{
    gap: 1em;
}

/* home projects */

.projects-section{
    width: 100%;
}

.projects{
    display: block;
    text-decoration: none;
    list-style-type: none;

    width: min(100%, 850px);
    margin: 0 auto;

    margin-top: 3em;
}:visited{
    text-decoration: none;
}

.projects img{
    width: 100%;
    height: auto;
    display: block;
}

.projects-header{
    text-transform: uppercase;
    font-weight: bolder;
    font-size: x-large;
    text-align: center;
    margin-bottom: 2em;
}

.projects-header::after{
    content: "";
    display: block;
    width: 15%;
    height: .05em;

    background-color: #000;
    margin: .5rem auto 0;
}


.project{
    display: block;
    text-decoration: none;
}

.project-org{
    color: var(--secondary-text-color);
    font-family: var(--text-font-family);
    font-weight: bolder;
    font-size: smaller;

    margin-bottom: 0;
}

.project-title{
    font-family: var(--heading-font-family);
    font-weight: 500;
    font-size: x-large;
    margin: .5em 0 .75em 0;
    color: black;
}

.project-title:visited{
    color:black;
    font-style: none;
}

.project-tags
{
    font-size: smaller;
    display: flex;
    gap: 1em;
}

.project-tags span{
    color: var(--secondary-text-color);
    
    padding: .5em;
    border-radius: 999px;
    background-color: #f2f2f2;
}


.text-font{
    p{
        font-family: var(--text-font-family);
    }
}


.proj-tools{
    font-weight: bolder;

    display: flex;
    flex-wrap: wrap;
    gap: 1em;

    list-style-type: none;
}

.proj-tool{
    font-weight: bolder;

    gap: 1em;
}

/* about */
.about-jad:hover{
    color: #7BC200;
    cursor: default;
}

.about-wave{
    color: inherit;

    display: inline-block;
    mouse: default;
}

.about-wave:hover{
    animation: wave 0.3s ease-in-out infinite alternate;   
}

@keyframes wave{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(40deg);
    }
}

.about-wave{
    animation: wave .5s ease-in-out 4 alternate;   
}

@keyframes wave{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(40deg);
    }
}

.blurb{
    font-family: var(--heading-font-family);
    color: #757575;
}

.about-section{
    display: flex;
    align-items: center;

    margin-top: 4rem;
    gap: 3rem;
}

.about-text{
    /* flex: 1; */
    flex: 0 1 70%;
    font-family: var(--text-font-family);

    p{
        margin-bottom: 1rem;
    }
    h1{
        margin-top: 0;
        margin-bottom: 1rem;
    }
}

.about-image-container{
    /* flex: 0 0 300px; */
    flex: 0 1 30%;

    img{
        width: 100%;
        height: auto;
        display: block;
    }
}

.about-hi{
    font-family: var(--text-font-family);
    margin-bottom: 0;
}

.about-KH{
    background-image: linear-gradient(to right, #0e0e52, #531CB3, #000000);
    background-clip: text;

    color: transparent;

    cursor: default;
}

.inline-link{
    font-weight: bolder;
}



/* footer */

.footer-nav{
    margin-bottom: 2em;
}

.footer-bar{
    font-weight:bold;
}

.footer-header{
    padding-top: 0;
    margin-top: 0;
    font-family: var(--heading-font-family);
    text-align: center;
}

/* .footer-header::before{
    content: "";
    display: block;
    width: 40%;
    height: .095em;

    background-color: #000;
    margin: 1rem auto 1rem;
} */

/* udoit interface page */
.old-udoit-img{
    width: 40%;
}


.udoit-quality-banner{
    border-top: solid 1px #178448;
    border-bottom: solid .5px #178448;
    background-color: #E8F3ED;
    color: #178448;
}

.udoit-product-header{
    font-family: var(--text-font-family);
}



/* udoit website page */
.udoit-page-header{
    margin-top: 3rem;
}

.udoit-study{
    width: 100%;

    margin-top: 2em;
    p{
        font-family: var(--text-font-family);
    }
    li{
        font-family: var(--text-font-family);
    }
}

.udoit-summ{
    font-family: var(--text-font-family);
    margin-bottom: 0;
}


.udoit-btn-contain{
    padding-top: 1em;
}

.udoit-figma-button{
    text-align: center;
    width: 25%;

    padding: .5em;
    margin: 0 auto;

    background-color: #F2F2F2;
    border: 1px solid #E5E6EB;
    border-radius: .75em;

    a{
        text-decoration: none;
        color: var(--resume-text-color);
    }
}

.nosquiggle-arrow-graphic{
    text-align: center;
}

.colours-iterates img{
    width: 30%;
}

.udoit-prod-img{
    width: 35%;
}

.udoit-text{
    width: 45%;
}


.udoit-img-text{
    text-align: center;
    justify-content: center;
    width: 45%;
}

.video-header{
    width: 80%;
}

.udoit-img-text img{
    width: 100%;
}

.udoit-img-text video{
    width: 80%;
}

.udoit-product-header{
    color: var(--secondary-text-color);
    font-weight: lighter;
    margin-top: .5em;
}

h4{
    margin-bottom: 0;
}


.figma{
    background-image: linear-gradient(to right, #ff10b3, #c4005f, #5500ff);
    background-clip: text;

    color: transparent;

    cursor: default;
}

#wedidit{
    background-image: linear-gradient(to right, #076c00, #00bf1d);
    background-clip: text;

    color: transparent;

    cursor: default;
}

.user-want{
    width: 40%;

    padding: .5em 1em .5em 1em;
    background-color: #fff;
    border: 1px solid #c0c9c2;
    border-radius: 1em;
}

.user-want-desc{
    border-left: 4px solid #50625A;
    border-radius: .25em;

    padding: .5em 1em;
    background-color: rgb(244,247,246);
}


.udoit-clause{
    text-align: center;
    font-weight:bolder;
}

.udoit-scary{
    margin: 2em;
}

.nav-links a{
    color: inherit;
    text-decoration: none;
}


.udoit-vids{
    /* width: (45%, 35em); */
    align-items: center;

    margin-top: 2em;

    h3{
       text-align: center;
    }

    video{
        width: 85%;
    }

    img{
        width: 45%;
    }
}


.udoit-vid-container{
    align-items: center;
    width: 45%;

    img{
        width: 100%;
    }
}

.udoit-fun-fact{
    justify-content: center;
    align-items: center;
}

.user-prod-desc{
    border-left: 4px solid #FFC904;
    border-radius: .25em;

    padding: .5em 1em;
    background-color: #fff7dc;
}

video{
    width: 100%;
    height: auto;
    display: block;
}


.resume-projects{
    ul{
        list-style-type: none;
        /* padding-left: 0; */
    }
}

.arrow-graphic{
    display: block;
}

.standardimg{
    width: 65%;
}

.standardimg-smaller{
    width: 55%;
}

.branding-sect{
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ics-two{
    img{
        width: 80%;
    }
}



/* MEDIA QUERIES */

@media (max-width: 1200px){
    .udoit-figma-button{
        width: 27%;
    }
}

@media (max-width: 1000px){
    .main-page-hero .flex-row{
        flex-direction: column;
    }

    .home-svg-container{
        width: 10em;
    }

    .udoit-vids{
        flex-direction: column;
        
        align-items: center;
        margin: 0 auto;
    }

    .users-wanted{
        align-items: center;
        margin: 0 auto;
        flex-direction: column;
    }

    .user-want{
        width: 70%;
        margin: 1em;
    }

    .udoit-figma-button{
        width: 50%;
    }

    .arrow-graphic{
        display: none;
    }
}

@media(max-width: 930px){
    .home-svg-container{
        /* width: min(300px, 100%); */
        width: 5em;

        align-items: center;
        justify-content: center;
        margin: 0 20%;
    }

    .user-want{
        width: 70%;
        margin: 1em;
    }

    .udoit-vids video{
        /* width: 35em; */
        width: 85%;
        margin: 1em;
    }

    .udoit-figma-button{
        width: 50%;
    }

    .colours-iterates{
        flex-direction: column;
        align-items: center;
        gap: 1em;
    }

    .colours-iterates img{
        width: 60%;
    }
    .arrow-graphic{
        display: none;
    }

    .udoit-vid-container{
        align-items: center;
        width: 70%;

        img{
            width: 100%;
        }
    }
}


@media (max-width: 768px){
    .main-page-hero .flex-row{
        flex-direction: column;
    }
    .home-svg-container{
        /* width: min(300px, 100%); */
        width: 10em;
    }

    .home-svg-container img{
        width: 20em;
    }

    .about-section{
        flex-direction: column;
        text-align: center
    }

    .about-image-container{
        width: min(300px, 100%);
    }

    .project-tags{
        flex-wrap: wrap;
    }

    .game-projs{
        flex-direction: column;
    }

    .data-projs{
        flex-direction: column;
    }

    .user-want{
        width: 70%;
        margin: 1em;
    }

    .udoit-vids video{
        /* width: 20em; */
        width: 85%;
        margin: 1em;
    }

    .udoit-figma-button{
        width: 50%;
    }

    .arrow-graphic{
        display: none;
    }

    .dropdownsec{
        flex-direction: column;
        align-items: center;
    }

    .udoit-text{
        width: 100%;
    }

    .udoit-img-text{
        width: 20em;
        align-items: center;
    }

    .ics-two{
        flex-direction: column;
        img{
            width: 60%;
        }
    }
}


@media (max-width: 600px){
    .main-page-hero .flex-row{
        flex-direction: column;
    }
    .home-svg-container img{
        /* width: min(300px, 100%); */
        display: none;
    }

    .udoit-vids{
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }


    .udoit-vids video{
        /* width: 20em; */
        width: 90%;
        margin: 1em;
    }

    .project-tags{
        flex-wrap: wrap;
    }

    .udoit-figma-button{
        width: 50%;
    }

    .arrow-graphic{
        display: none;
    }

    .udoit-two{
        flex-direction: column;
        align-items: center;
        gap: 1em;
    }

    .udoit-two img{
        width: 60%;
    }
}


@media (max-width: 390px) {

    .udoit-vids{
        /* align-items: center; */
        justify-content: center;
        /* margin: 0 auto; */
    }

    .udoit-vids video{
        /* width: 20em; */
        width: 15em;
        margin: 1em;
    }

    .udoit-vid-container {
        width: 15em;
    }

    .udoit-vids video {
        width: 15em;
    }

    .arrow-graphic{
        display: none;
    }
}