:root {
    --darkblue: #0A2430;
    --blue: #155A78;
    --lightblue: #B6DAEA;
    --yellow: #FFC918;
    --orange: #F9A11E;
}

html {
    font-family: tenon, sans-serif;
    color: var(--darkblue);
    font-size: 6.25%; /* 0.0625 * 16px = 1 (i.e., 1rem = 1px) */
    min-width: 375px;
}
        body {
            font-size: 16rem;
        }
* {
    margin: 0;
    padding: 0;
    background: transparent;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
ul {
    list-style: none;
}
a {
    display: block;
    text-decoration: none;
}
img {
    display: block;
    max-width: 100%;
}
p {
    font-size: 18rem;
    font-weight: 300;
    line-height: 1.5;
}
/* h1 {
    font-size: 100rem;
    font-weight: 900;
    letter-spacing: -6px;
    text-align: center;
} */
h2 {
    font-size: 50rem;
    font-weight: 700;
    text-transform: lowercase;
    text-align: center;
    color: var(--darkblue);
    margin: 50px auto 25px;
}
h3 {
    font-size: 35rem;
    font-weight: 700;
}
h4 {
    font-size: 18rem;
    font-weight: 500;
}

    @media only screen and (min-width: 450px) {
        h4 {
            font-size: 22rem;
        }
    }
    @media only screen and (min-width: 600px) {
        h2 {
            font-size: 75rem;
        }
    }



/* --------------------------NAV------------------------------ */
header {
    text-align: center;
    text-transform: lowercase;
    font-size: 16rem;
    font-weight: 500;
    padding: 0 15px;
    /* background-color: white; */
}
    .nav-list {
        margin: 0 auto;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
    }
    .nav-item {
        transition: .5s ease-in-out;
        margin: 5px auto;
        padding: 0 10px;
        position: relative;
    }
        .nav-logo img {
            margin: 0 auto;
            height: 95px;
            max-width: none;
        }
        .nav-item a {
            display: block;
            color: var(--blue);
        }
        .nav-item a:after {
            content: '.';
            color: transparent;
            margin: auto;
            position: absolute;
            bottom: -6px;
            left: 0;
            right: 0;
            width: 0;
            height: 3px;
            background-color: var(--orange);
            transition: all .5s;
        }
            .nav-item a:hover:after {
                width: 100%;
            }
            .nav-logo a:after {
                display: none;
            }
            .nav-logo:hover {
                transform: scale(1.1);
            }
        .nav-item:nth-child(1) {
            width: 100%;
            margin: 0;
        }
    @media only screen and (min-width: 450px) {
            .nav-item:nth-child(1) {
                width: auto;
            }
            .blank {
                content: '';
                flex-grow: 2;
            }
                .nav-logo a {
                    width: fit-content;
                }    
    }
    @media only screen and (min-width: 700px) {
        header {
            position: sticky;
            top: 0;
            z-index: 100;
            font-size: 18px;
            padding: 0 50px;
        }   
        .nav-list {
            gap: 25px;
        }
    }

/* --------------------------FOOTER------------------------------ */
/* footer::before {
    content: "";
    display: block;
    width: 100%;
    height: 300px;
    background-image: url('imgs/logo/logo_monkeyblue_sq.png');
    background-repeat: space;
    background-size: 75px;
    background-position: 0 0;
} */
/* .top {
    clip-path: polygon(0 0,100% 0,100% 100%,50% calc(100% - 55px),0 100%);
  }
  .bottom {
    clip-path: polygon(0 55px,50% 0,100% 55px,100% 100%,0 100%);
    margin-top: -45px;
  } */
footer {
    color: var(--lightblue);
    text-align: center;
    padding: 30px;
}
footer h3 {
    font-size: 45rem;
    font-weight: 900;
    letter-spacing: -2px;
    text-transform: lowercase;
}

footer p {
    color: var(--darkblue);
    margin: 15px auto;
}
footer ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px auto;
}
    footer li a{
        color: var(--blue);
        font-weight: 500;
        min-width: 225px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }
    .icon-f {
        max-height: 25px;
        filter: invert(22%) sepia(97%) saturate(546%) hue-rotate(155deg) brightness(101%) contrast(86%);
    }
    footer li:hover {
        text-decoration: underline;
    }





/* --------------------------HOME------------------------------ */
/* #uc {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    gap: 20px;
    background-color: var(--yellow);
    -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
    clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
}
#uc h1 {
    font-size: 75rem;
}
#uc img {
    max-height: 50vh;
} */


/* .top {
    clip-path: polygon(0 0,100% 0,100% calc(100% - 100px),50% 100%,0 calc(100% - 100px));
}
.bottom {
    clip-path: polygon(0 0,50% 100px,100% 0,100% 100%,0 100%);
    margin-top: -75px;
} */


.hero {
    text-transform: lowercase;
    padding-top: 20vh;
    padding-bottom: 20vh;
    margin-bottom: 0;
    /* margin: 0; */
    color: var(--lightblue);
    background-color: white;
    position: relative;
    clip-path: polygon(0 0,100% 0,100% calc(100% - 100px),50% 100%,0 calc(100% - 100px));
    z-index: 10;
}

    h1 {
        white-space: nowrap;
        font-size: 35rem;
        font-weight: 900;
        letter-spacing: -2px;
        text-align: center;
        margin: 0 3vw;
    }
    .hero span {
        transition: font-size 1s ease;
    }
    .hero span:hover {
        color: var(--blue);
        font-size: 38rem;
    }

    @media only screen and (min-width: 515px) {
        h1 {
            font-size: 40rem;    
        }
        .hero span:hover {
            font-size: 48rem;
        }
    }
    @media only screen and (min-width: 660px) {
        h1 {
            font-size: 50rem;    
            letter-spacing: -3px;
            margin: 0 5vw;
        }
        .hero span:hover {
            font-size: 60rem;
        }
    }
    @media only screen and (min-width: 775px) {
        h1 {
            font-size: 60rem;
        }
        .hero span:hover {
            font-size: 70rem;
        }
    }
    @media only screen and (min-width: 925px) {
        h1 {
            font-size: 70rem;
        }
        .hero span:hover {
            font-size: 80rem;
        }
    }
    @media only screen and (min-width: 1200px) {
        h1 {
            font-size: 85rem;
        }
        .hero span:hover {
            font-size: 95rem;
        }
    }


    .arrow1 {
        background-color: var(--orange);
        width: 100%;
        height: 200px;
        margin-top: -185px;
        clip-path: polygon(0 0,50% 100px,100% 0, 100% calc(100% - 100px),50% 100%,0 calc(100% - 100px));
    }
    .arrow2 {
        background-color: var(--yellow);
        width: 100%;
        height: 200px;
        margin-top: -101px;
        clip-path: polygon(0 0,50% 100px,100% 0, 100% calc(100% - 100px),50% 100%,0 calc(100% - 100px));
    }
    



/* --------------------------WORK------------------------------ */
#work {
    clip-path: polygon(0 0,50% 100px,100% 0,100% 100%,0 100%);
    margin-top: -185px;
    background-color: white;
    z-index: 100;
}
.work-header {
    padding-top: 175px;
    margin-bottom: 50px;
}
.work-container {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
}
    .work-card {
        position: relative;
        width: 275px;
        margin: 20px;
        overflow: hidden;
    }
        .card-img {
            object-fit: cover;
            height: 275px;
            margin: 0 auto;
        } 
        .card-name {
            position: absolute;
            z-index: 10;
            white-space: nowrap;
            bottom: 0;
            width: 100%;
            filter: contrast(130%);
            background: linear-gradient(rgba(10, 36, 48, 0), rgba(10, 36, 48, 0.5));
            padding-top: 75px;
        }
            .card-name * {
                margin: 10px;
                transition: all .5s ease-in-out;
            }
            .card-name-arrow {
                display: none;
            }
            .card-name h4 {
                color: white;
                text-align: left;
            }

        .work-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.25);
            opacity: 0;
            transition: all .5s ease-in-out;
        }
            .work-card:hover::after {
                opacity: 1;
            }
            .work-card:hover .card-img-container{
                filter: saturate(.75);
            }
    @media only screen and (min-width: 450px) {
        .work-card {
            width: 350px;
        }
            .card-img {
                height: 350px;
            }
            .card-name {
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }
                .card-name * {
                    transition: all .5s ease-in-out;
                }
                .card-name-arrow {
                    display: block;
                    width: 0;
                    height: 24px;
                    margin-right: 0;
                    filter: invert(83%) sepia(26%) saturate(6735%) hue-rotate(345deg) brightness(100%) contrast(96%);
                }
                .work-card:hover .card-name-arrow {
                    width: 24px;
                }
    } 

    .work-card:nth-child(1) {
        background-color: var(--blue);
    }
    .work-card:nth-child(2) {
        background-color: var(--orange);
    }
    .work-card:nth-child(3) {
        background-color: var(--lightblue);
    }
    .work-card:nth-child(4) {
        background-color: var(--yellow);
    }

/* --------------------------END WORK------------------------------ */




/* --------------------------PROJECT------------------------------ */
.project {
    margin: 0 auto;
    padding: 60px 30px;
    position: relative;
}
.proj-web, .proj-graphic {
    max-width: 1200px;
    margin: 0 auto;
}
        .proj-btns {
            width: calc(100% + 30px);
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 30px;
            margin-top: 25px;
            margin: 0 -15px;
        }
            .prev, .next{
                display: flex;
                align-items: center;
                color: var(--blue);
                font-weight: 500;
                font-size: 18rem;
                max-width: 200px;
                transition: all .5s;
            }
                .prev img, .next img {
                    height: 50px;
                    filter: invert(85%) sepia(27%) saturate(249%) hue-rotate(157deg) brightness(97%) contrast(90%);
                    transition: all .5s;
                }
                    .prev:hover, .next:hover {
                        color: var(--orange);
                    }
                    .prev:hover img, .next:hover img{
                        transform: scale(1.25);
                    }
            .next {
                text-align: right;
                justify-self: end;
            }
                    @media only screen and (max-width: 600px) {
                        .proj-btns {
                            justify-content: space-around;
                        }
                    }   
                    @media only screen and (min-width: 1500px) {
                        .proj-btns {
                            position: sticky;
                            bottom: 5%;
                        }
                        .proj-web, .proj-graphic {
                            box-sizing: content-box;
                            padding: 0 200px;
                        }
                    } 

    .proj-info {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        row-gap: 10px;
        column-gap: 30px;
    }
    .proj-status {
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 700;
        font-size: 18rem;
        /* color: rgb(170, 170, 170); */
        color: var(--lightblue);
        width: 100%;
    }
    .proj-name {
        width: 100%;
    }
    .proj-desc {
        width: 100%;
    }
    .proj-cat, .proj-tools {
        margin: 5px 10px;
        padding-left: 15px;
        border-left: 5px var(--lightblue) solid;
        /* border-left: 5px rgba(170, 170, 170, 0.623) solid; */
        height: fit-content;
    }
        .proj-tools h5, .proj-cat h5{
            text-transform: uppercase;
            font-weight: 700;
            /* color: var(--lightblue); */
            margin: 0 0 8px 0;
        }
        .tools-ul *, .cat-ul *{
            font-weight: 300;
            margin-bottom: 5px;
        }
        .proj-cat *, .proj-tools * {
            margin-left: 0;
        }
    .proj-imgs {
        margin: 30px auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: flex-start;
        gap: 20px;
    }
        .proj-img {
            max-height: 85vh;
        }

.photorestoration-imgs img {
    max-width: calc(50% - 20px);
    min-width: 200px;
}
.grandson-imgs img:nth-child(2), .grandson-imgs img:nth-child(3) {
    max-width: calc(50% - 20px);
    min-width: 200px;
}

    @supports (grid-area:auto) {
        @media only screen and (min-width: 850px) {
            .proj-web .proj-info {
                display: grid;
                grid-template-columns: minmax(500px, 800px) auto;
                row-gap: 10px;
                column-gap: 30px;
                justify-content: space-evenly;
            }
                .proj-web .proj-status {
                    grid-column: 1/2;
                    grid-row: 1/2;
                }
                .proj-web .proj-name {
                    grid-column: 1/2;
                    grid-row: 2/3;
                    text-align: left;
                }
                .proj-web .proj-cat {
                    grid-column: 2/3;
                    grid-row: 2/4;
                    align-self: end;
                }
                .proj-web .proj-tools {
                    grid-column: 2/3;
                    grid-row: 4/5;
                }
                .proj-web .proj-desc {
                    grid-column: 1/2;
                    grid-row: 3/5;
                    align-self: stretch;
                }
            .proj-graphic {
                display: flex;
                justify-content: center;
                text-align: right;
            }
                .proj-graphic .proj-img {
                    max-height: 100%;
                    width: 100%;
                }
                    .photorestoration-imgs img {
                        min-width: 0;
                    }
                    .grandson-imgs img:nth-child(2), .grandson-imgs img:nth-child(3) {
                        min-width: 0;
                    }
                .proj-graphic .proj-info {
                    flex: 0 0 400px;
                    flex-direction: column;
                    justify-content: start;
                    margin-top: 15px;
                    padding: 30px;
                    row-gap: 20px;
                }
                .proj-graphic .proj-tools, .proj-graphic .proj-cat{
                    margin-right: 0;
                    border-left: none;
                    padding-right: 15px;
                    border-right: 5px var(--lightblue) solid;
                }
        }   /* end PROJ 850+ */
    }    /* end PROJ grid support */

/* --------------------------END PROJECT------------------------------ */





/* --------------------------ABOUT------------------------------ */


#portsite {
    /* background-color: var(--lightblue); */
    /* margin-top: 150px; */
    padding-top: 100px;
    margin: 100px auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-size: cover;
    /* height: 70vh; */
}
.portsite-content  {
     display: flex;
     justify-content: center;
     flex-wrap: nowrap;
     margin-bottom: 20px;
}
.portsite-img {
    /* background-color: blue; */
    /* background-size: cover; */
    flex-basis: 350px;
    margin-bottom: 20px;
    /* flex-shrink: 2; */
    /* height: 75vh; */
    /* max-height: 70vh; */
}
    .portsite-img img {
        /* max-width: 350px; */
        /* height: 75vh; */
        /* max-height: 70vh; */
    }
    .portsite-txt {
        color: var(--darkblue);
        background-color: var(--lightblue);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding: 50px;
        width: auto;
    }
    .portsite-colors {
        display: flex;
    }
    .portsite-orange, .portsite-yellow {
        height: 100%;
        width: 15px;
    }
    .portsite-orange {
        background-color: var(--orange);
    }
    .portsite-yellow {
        background-color: var(--yellow);
    }
        .portsite-txt h3 {
            max-width: 500px;
        }
        .portsite-txt p {
            margin-top: 25px;
            line-height: 25px;
            max-width: 500px;
        }








#about {
    background-color: #0A2430;
    background-size: cover;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row-reverse;
    align-items: center;
    gap: 20px;
    -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
    clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
}
    #about img {
        height: 70vh;
    }
    .about-text {
        margin: 10px;
        width: 380px;
        }
    .about-text *{
        width: auto;
        text-align: right;
        font-size: 35rem;
        font-weight: 700;
        line-height: 38px;
        color: white;
    }
    .words-container::before {
        content: '';
        animation-name: change;
        animation-duration: 15s;
        animation-iteration-count: infinite;
    }
    /* #about::after {
        content: '';
        background-image: url('imgs/stacked-peaks-haikei.png');
        background-size: cover;
        background-repeat: no-repeat;
        height: 65vh;
        min-width: 40vw;
        transform: rotate(270deg);
        position: relative;
        right: 100px;
        top: 100px;
    } */



#about-2 {
    max-width: 60vw;
    margin: 100px auto;
}
    #about-2 * {
        margin: 20px 0;
    }


/* --------------------------END ABOUT------------------------------ */