/* stylelint-disable selector-class-pattern */
/* stylelint-disable no-descending-specificity */
/* stylelint-disable selector-id-pattern */
/* stylelint-disable custom-property-pattern */
/* stylelint-disable comment-empty-line-before */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

:root {
    /* --1: #033138; */
    --font1: 'Manrope', sans-serif;
    --b1: 1px rgb(255 255 255 / 20%) solid;
    --teal: #46b9bc;
    --salmon: 250, 120, 101;
    --cream: #ECE1AE;

    /* Brand Colors: */
    --b: hsl(185deg 50% 39%);
    /* turquoise blue */
    --bRGB: 50, 141, 149;
    --db: hsl(185deg 100% 21%);
    /* darker turquoise blue */
    --dbRGB: 0, 97, 106;
    --g: hsl(38deg 66% 52%);
    /* gold */
    --gRGB: 213, 153, 50;
    --dg: hsl(155deg 43% 17%);
    /* dark green */
    --dgRGB: 25, 63, 47;
    --e: hsl(64deg 41% 85%);
    /* eggshell */
    --eRGB: 231, 233, 203;
    --yt: hsl(64deg 63% 92%);
    /* off white */
    --ytRGB: 245, 247, 220;

    /* Backgrounds */
    --scratches: url('bg/scratches-bg.png');
    --irongrip: url('bg/iron-grip.png');
}

@property --shine-start {
    syntax: "<percentage>";
    initial-value: 0%;
    inherits: false;
}

@property --shine-end {
    syntax: "<percentage>";
    initial-value: 25%;
    inherits: false;
}

@property --shine-opacity {
    syntax: "<percentage>";
    initial-value: 15%;
    inherits: false;
}

* {
    margin: 0;
    padding: 0;
    background-clip: padding-box;
    box-sizing: border-box;
    font-family: var(--font1);
}

html {
    overscroll-behavior: none;
    scroll-behavior: smooth;
}

body {
    padding: 0;
    margin: 0;
    color: var(--e);
    font-family: var(--font1);
    font-weight: 300;
    scroll-behavior: smooth;
    overscroll-behavior: none;
    background-image: url('bg/scratches-bg.png');
    background-attachment: fixed;
    background-color: #111;
    position: relative;
}

 /* LINKS */

a {
    color: var(--b);
    text-decoration: none;
    transition: 0.3s all;
}

a:hover {
    color: var(--g);
}

/* LOADING ANIMATIONS */

@keyframes cowboy-loading {
    
    0% {
        rotate: 0deg;
    }

    12% {
        rotate: 0deg;
    }

    20% {
        rotate: -15deg;
    }

    100% {
        rotate: 360deg;
    }
}

#loading {
    content: "";
    /* display: block; */
    z-index: 999999999;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    display:none;
}

#loading img {
    width: 100%;
    animation: cowboy-loading 1.2s ease infinite;
    height: auto;
    display: block;
}

body::after {
    inset: 0;
    width: 101vw;
    height: 101vh;
    position: fixed;
    background-image: var(--scratches);
    content: "";
    background-color: #000;
    z-index: 9999999;
    pointer-events: none;
    transition: 0.5s opacity;
    display:none;
}

#worksPage::after {
    display:none;
}

.hide,
#loading.hide,
.hide-screen::after {
    /* display:none; */
    opacity: 0;
}

@keyframes slide-down {

    0% {
        transform: translateY(-8vh);
    }

    100% {
        transform: translateY(0);
    }
}

#homePage .slide-down {
    animation: slide-down 0.7s forwards;
}

/* SITE HEADER */

header {
    background-image: url('bg/iron-grip.png');
    position: fixed;
    top: 0;
    height: 7vh;
    background-color: #000;
    box-shadow: rgb(0 0 0 / 20%) 0 3px 5px -1px;
    border-bottom: rgb(0 0 0 / 50%) solid 3px;
    border-top: #111 solid 7px;
    width: 100%;
    z-index: 50000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    will-change: transform;
}

header h1:hover a img {
    transform: rotate(-10deg) scale(0.98);
}


header h1 a {
    display: flex;
    place-items: center center;
}

header h1 a img {
    height: calc(7vh - 20px);
    margin-right: 10px;
    width: auto;
    transition: 0.3s all;
}

ul li a {
    font-weight: 700;
}

h1 {
    font-size: 3vh;
    text-transform: lowercase;
    padding: 0 1rem;
    color: var(--1);
}

h1 a {
    color: var(--yt);
}

/* TOP NAVIGATION */

nav {
    display: grid;
    grid-auto-flow: column;
    align-content: center;
    gap: 2rem;
    height: 100%;
}

nav ul,
nav li {
    display: contents;
}

nav input,
nav label {
    display: none;
}

nav li a {
    font-size: 1rem;
    display: flex;
    color: var(--cream);
    font-weight: 600;
    text-transform: uppercase;
    padding: 5px;
    text-decoration: none;
    align-content: center;
    transition: all 0.3s;
    white-space: nowrap;
    margin: 0 5px 4px
}

.current {
    box-sizing: border-box;
    color: var(--g);
    box-shadow: 0 2px 0 -1px var(--b);
    font-weight: 900;
}


@media (hover:hover) and (pointer:fine) {

    nav a:hover {
        box-shadow: 0 5px 0 -1px var(--yt);
        opacity: 1;
        color: var(--g);
}
}

/* BODY CONTENT */

#wrapper {
    width: 100vw;
    margin-top: 6vh;
    display: grid;
    grid-template-columns: 75vw auto auto;
}


#welcome {
    display: block;
    /* border-bottom:1px dashed rgba(255,255,255,0.1); */
    border-bottom: 2px solid #000;
    background-image: var(--scratches);
    background-attachment: fixed;
    background-color: #0b0b0b;
    box-shadow: 0 3px 4px -3px rgb(var(--dgRGB), 0.8);
}

/* HOME PAGE SPLASH IMG FADE IN ANIMATION */

@keyframes shine {

    0% {
        --shine-start: -100%;
        --shine-end: 0%;
        --shine-opacity: 5%;

        filter: blur(15px);
    }

    30% {
        --shine-opacity: 100%;
    }

    50% {
        filter: blur(0);
    }

    92% {
        --shine-start: 300%;
        --shine-end: 400%;
        --shine-opacity: 100%;
    }

    100% {
        --shine-start: 300%;
        --shine-end: 400%;
        --shine-opacity: 100%;

        filter: blur(0);
    }
}

@supports (animation-name:shine) and (mask-image: linear-gradient(90deg, #fff 0%, #000 100%)) and (filter:blur(12px)) {

    .splash2,
    #welcome {
        will-change: mask-image, opacity;
    }

    .shine {
        --shine-start: 0%;
        --shine-end: 0%;
        --shine-opacity: 10%;

        mask-image: linear-gradient(90deg, rgb(218 247 242 / 100%) var(--shine-start), rgb(255 255 255 / 0%) var(--shine-end));
        animation: shine 2s ease-in 0.3s forwards;
        opacity: var(--shine-opacity);
    }

    .splash2.shine {
        animation-delay: 0s;
    }
}

/* BASICS */

p a {
    color: var(--b);
    font-weight: 700;
}

img {
    max-width: 100vw;
    height: auto;
    width: auto;
    object-fit: cover;
}

aside img {
    max-width: 100%;
    margin: 0 auto;
    box-shadow: #000 0 0 20px -5px;
}


/* MAIN CONTAINER */

aside.hidden~main {
    width: 100vw;
}

main {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    padding: 10px 20px 20px;
    gap: 20px;
    justify-content: stretch;
}

main.narrow {
    display: flex;
    flex-flow: column nowrap;
}

main.websites:not(.narrow) {
    grid-template-columns: 1fr 1fr;
}

main h2,
main .h2 {
    margin: 0 -20px;
}

main>figure,
aside {
    box-shadow: #000 0 0 10px -2px;
}

main>figure {
    position: relative;
    transition: 0.2s all;
    max-height: 50vh;
    border: 1px solid transparent;
}

main>figure:hover {
    /* border: var(--b1); */
    transform: scale(1.02);
    border: var(--b1);
}

main figcaption,
aside>figure figcaption,
main .motion {
    position: absolute;
    bottom: 5px;
    border: var(--b1);
    right: 5px;
    pointer-events: none;
    background-color: rgb(0 0 0 / 70%);
    box-shadow: 1px 1px 5px rgb(0 0 0 / 70%) inset;
    color: rgb(255 255 255 / 80%);
    padding: 7px 12px;
    opacity: 0;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.4s all;
    z-index: 4;
}

main .motion {
    display: inline-block;
    right: unset;
    font-size: 0.7rem;
    padding: 5px 7px;
    bottom: unset;
    opacity: 0.8;
    top: 10px;
    left: 10px;
}

main figure:hover figcaption {
    opacity: 1;
}

aside figcaption {
    display: none;
}

main figure img:not(:first-child) {
    display: none;
}

.hidden {
    display: none;
}

.viewing .hidden {
    display: block;
}

.viewing {
    width: 100%;
}

h2, .h2 {
    text-shadow: -1px -2px 1px rgb(0 0 0 / 100%);
    /* , 1px 1px 1px rgba(255,255,255,0.3) */
    grid-column: 1 / -1;
    font-weight: 700;
    /* border-bottom: rgb(0 0 0 / 50%) solid 2px; */
    border:none;
    /* box-shadow: 0 3px 4px -3px rgb(var(--dgRGB), 0.7); */
    padding: 1rem;
    color: var(--yt);
    text-align: center;
    font-size: 10vh;
    transition: all 0.4s;
    /* margin:0 -20px; */
    text-transform: lowercase;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom:1px solid rgb(255 255 255 / 8%);
    box-shadow:0 0 20px -2px #000;
    /* background-color: #111; */

}

/* h2::before , */

h2::after, .h2::after {
    content: "\2726";
    color: var(--g);
    display: inline-block;
    font-size: 0.7em;
    margin: 0 0 0 15px;
    text-shadow: 0 0 7px rgb(var(--gRGB), 0.5);
}

hr {
    border: none;
    padding: 1rem 0 0;
    margin: 0;
}

main.narrow h2,
main.narrow .h2 {
    font-size: 1.7rem;
    margin: 0 -20px;
}

main article {
    display: none;
}

main>figure>a img {
    height: 100%;
    max-height: 50vh;
    object-fit: cover;
    width: 100%;
}

#wavehotel a img {
    object-position: top center;
}

aside {
    box-sizing: border-box;
    /* width: calc(100% - 10px); */
    max-height: 93vh;
    overflow: clip scroll;
    overscroll-behavior: contain;
    position: sticky;
    scrollbar-color: #555 rgb(0 0 0 / 50%);
    scrollbar-width: thin;
    border-right: rgb(0 0 0 / 50%) solid 2px;
    box-shadow: 3px 0 4px -3px rgb(var(--dgRGB), 0.8);
    top: calc(7vh - 3px);
    background-color: rgb(20 20 20 / 0%);
    scrollbar-gutter: stable;
}

aside>figure {
    backdrop-filter: blur(3px);
    margin-top: -150px;
}

.web aside>figure {
    backdrop-filter: blur(3px);
}

h3 {
    background-color: var(--db);
    bordeR: 1px solid rgb(var(--ytRGB), 0.8);
    display: block;
    margin: 2rem 2rem 1rem;
    padding: 10px 5rem;
    font-size: 1.3rem;
    text-transform: uppercase;
    font-weight: 200;
    letter-spacing: 0.2em;
    box-shadow: 2px 2px 0 0 #111, var(--g) 3px 3px 0 0;
    color: var(--yt);
    /* text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.3); */
}

h3:nth-of-type(even),
section:nth-of-type(even) h3 {
    background-color: var(--dg);
    box-shadow: 2px 2px 0 0 #111, var(--g) 3px 3px 0 0;
}

h4 {
    color: var(--g);
    border-bottom: solid 1px rgb(var(--gRGB), 0.4);
    padding: 1rem;
    margin: 1rem 2rem 2rem;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: -0.02rem;
}

figure:has(.zoom) h3 {
    display: block;
    width: max-content;
    margin: 3rem auto 3.2rem;
}

main h3 {
    display: none;
}

#services h3 {
    display: block;
    margin: 2rem 2rem 1rem;
    padding: 10px 1rem;
}

aside>figure figure {
    position: relative;
    margin: 1rem auto;
    width: max-content;
    max-width: 100%;
}

/* 
aside > figure figure img {
} */

aside>figure figure figcaption {
    display: block;
    /* position:absolute;
    bottom:5px;
    right:5px;
    background-color:rgba(0,0,0,0.5); */
    z-index: 40;
    opacity: 1;
}

aside img,
aside img:not(:first-child) {
    display: block;
}

aside p,
aside ul,
aside ol,
p,
ul,
ol,
details {
    color: var(--e);
    padding: 1rem 2rem;
    line-height: 2;
    max-width: 900px;
    margin: 0 auto;
}

.subtitle {
    color: var(--b);
    font-weight: 500;
    padding: 1rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 1.5rem;
}

.tags {
    font-size: 0.8rem;
    color: var(--g);
    font-weight: bold;
}

.tags span {
    display: inline-block;
    padding: 10px 10px 0;
}

aside>figure.website figure figcaption {
    position: static;
    background-color: rgb(var(--dbRGB), 0.2);
    color: var(--yt);
    border: 1px solid rgb(255 255 255 / 10%);
    background-clip: border-box;
    margin: 1rem 0 5px;
    font-size: 0.9rem;
    letter-spacing: 2px;
    border-width: 0 0 1px;
    box-shadow: none;
    font-weight: 500;
    padding: 10px 20px;
}

aside>figure.website>article>figure {
    display: flex;
    flex-flow: column-reverse nowrap;
}

main>figure.website a img {
    object-position: top;
}


aside img.zoom,
aside video.zoom {
    /*
    position:fixed;
    top:6vh;
    left:calc(4vh + 3vw); */
    max-height: 93vh;
    z-index: 1;
    margin: 10px auto;
}

.backdrop {
    display: none;
}

.clickme {
    padding: 10px;
}

.narrow .clickme {
    font-size: 0.9em;
}

.main-home {
    gap: 3px;
    grid-column: 1 / -1;
    padding: 10px 0;
}

.main-home>figure {
    border: 0;
    position: relative;
    box-shadow: none;
    /* background-color:rgba(255,255,255,0.1); */
    background-color: var(--dg);
}

.main-home>figure:nth-of-type(2n) {
    background-color: var(--g);
}

.main-home>figure:nth-of-type(3n) {
    background-color: var(--db);
}

.main-home>figure img {
    transition: 0.3s all;
    border-radius: 0;
    display: block;
}

.main-home>figure:hover {

    /* transform:scale(0.98); */
    transform: none;
    /* padding:5px; */
    bordeR: none;
    overflow: hidden;
}

/* .main-home > figure:hover img {
    border-radius:50px;
} */
/*
img.zoom ~ #backdrop{
    position:fixed;
    display:block;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5);
}
*/

.main-home>figure::after {
    content: "";
    box-sizing: border-box;
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 70px -7px rgb(var(--dgRGB), 0.3) inset;
    z-index: 10;
    background-color: rgb(var(--bRGB), 0.3);
    border-radius: 0;
    opacity: 0;
    transition: 0.3s all;
    /* border:1px solid rgba(255,255,255,0.1); */
    background-clip: content-box;
}


.main-home>figure:hover::after {
    opacity: 1;
    /* border-radius:50px; */
}

.main-home>figure.block::after {
    background-color: rgb(var(--bRGB), 0.8);

}

/* 
.main-home > figure:nth-of-type(2n)::after {
    border:1px solid rgba(0,0,0,0.1);
} */


.block {
    display: grid;
    font-size: 4rem;
    place-items: stretch;
}


.block a {
    color: var(--yt);
    font-weight: 500;
    display: grid;
    text-shadow: 0 0 10px rgb(0 0 0 / 20%);
    place-content: center;
    z-index: 11;
    position: relative;
    letter-spacing: -2px;
    text-transform: lowercase;
}


figure>.info {
    display: none;
}

#infoBox {
    display: block;
    position: sticky;
    top: 50%;
    margin: 0 auto;
    height: 150px;
    width: 70%;
    background-color: rgb(0 0 0 / 70%);
    backdrop-filter: blur(7px);
    border: var(--b1);
    border-color: rgb(255 255 255 / 20%);
    box-shadow: 1px 1px 10px rgb(0 0 0 / 40%), 1px 1px 3px rgb(0 0 0 / 100%) inset;
    color: rgb(255 255 255 / 80%);
    padding: 1.5rem;
    transition: 0.6s opacity cubic-bezier(0.4, 0, 1, 1);
    z-index: 4;
    transform: translate(0, calc(-50% - 5vh));
}

#infoBox.hidden {
    display: block;
    opacity: 0;
    pointer-events: none;
}

#infoBox:not(.hidden) {
    opacity: 1;
}

/*
aside #infoBox ~ figure {
    position:absolute;
    top:0;
}
*/

#buttons {
    position: fixed;
    bottom: -2.5vh;
    left: -2.5vh;
    padding: 4vh;
    display: flex;
    flex-flow: column nowrap;
    /* width: 2.5rem; */
    z-index: 900;
    transition: all 0.3s;
}

button {
    box-sizing: border-box;
    color: var(--e);
    opacity: 0.3;
    transition: all 0.3s;
    background-position: center center;
    background-repeat: no-repeat;
    font-weight: 600;
    text-transform: uppercase;
    border: none;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--dg);
    box-shadow: 0 0 3px -1px rgb(0 0 0 / 50%);
    display: block;
    position: relative;
    border-radius: 5px;
}

#buttons:hover button {
    opacity: 0.7;
}

#buttons button:hover {
    opacity: 1;
}


#filterButtons {
    grid-column: 1 / -1;
    display: flex;
    flex-flow: row wrap;
    justify-content: stretch;
    width: 100%;
    gap: 10px;
}

#filterButtons button {
    padding: 10px 1rem;
    color: var(--yt);
    background-color: rgb(var(--dgRGB), 0.5);
    backdrop-filter: blur(3px);
    width: auto;
    opacity: 0.7;
    flex: 1 auto;
}

#filterButtons button:hover {
    opacity: 1;
    cursor: pointer;
    transform: scale(1.02);
    color: var(--yt);
}

.narrow #filterButtons {
    gap: 5px;
}

.narrow #filterButtons button {
    padding: 5px 10px;
    height: auto;
    position: relative;
}

.narrow #filterButtons button:first-of-type {
    width: 100%;
}

#filterButtons button.active {
    opacity: 1;
    color: var(--yt);
    background-color: var(--db);
}

#filterButtons button.active:hover {
    color: #fff;
    background-color: var(--b);
    text-shadow: var(--db) 0 0 3px;
}

#fit,
#close {
    background-image: url('resize-down.svg');
    background-size: 66% auto;
}

#close {
    background-image: url("close.svg");
    background-size: 70% auto;
    z-index: 3;
    margin-top: 5px;
}

#info {
    background-image: url('info.svg');
    background-size: 60% auto;
    margin-bottom: 5px;
}

aside:hover button:hover {
    opacity: 1;
    cursor: pointer;
}

#fit.fitActive {
    background-image: url('resize-up.svg');
}

aside button::after {
    display: block;
    content: '';
    position: absolute;
    font-size: 9px;
    top: 0;
    left: 105%;
    pointer-events: none;
    background-color: rgb(0 0 0 / 70%);
    backdrop-filter: blur(7px);
    border: var(--b1);
    box-shadow: 1px 1px 3px rgb(0 0 0 / 40%);
    border-radius: 5px;
    color: rgb(255 255 255 / 80%);
    padding: 7px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.4s all ease-in;
    transition-delay: 0.2s;
    z-index: 4;
    opacity: 0;
}

button:hover::after {
    opacity: 0.7;
}

#fit::after {
    content: 'fit in screen';
}

#close::after {
    content: "back";
}

#fit.fitActive::after {
    content: "expand images";
}

#info::after {
    content: 'info';
}

aside #lettermarks,
aside #insta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

aside #lettermarks img,
aside #insta img {
    box-shadow: none;
}

aside #lettermarks img:first-child,
aside .wide,
.wide {
    grid-column: 1 / -1;
}

.motionimg {
    background-size: cover;
    height: 100%;
    display: block;
    background-position: center center;
}

#l3 .motionimg {
    background-image: url('rockets/lowerthirds_still.jpg');

}

#ux .motionimg {
    background-image: url('vids/ux_still.jpg');
}


main #ux-blank {
    width: 100%;
}


#bumper .motionimg {
    background-image: url('vids/bumper_still.jpg');
}

#cfellows .motionimg {
    background-image: url('cf/map_digital.jpg');
}

.motionimg img {
    max-width: 100%;
    height: 100%;
    opacity: 0;
    object-fit: cover;
}

video {
    max-width: 100%;
    height: auto;
    display: none;
}

aside video {
    display: block;
}

aside>figure .hide-in-aside {
    display: none;
}

.motionimg:hover img {
    opacity: 1
}

aside .motion {
    display: none;
}

aside:not(.hidden)~#about,
aside:not(.hidden)~footer {
    display: none;
}

#about {
    display: grid;
    grid-template-columns: 1fr 2fr;
    /* border-top: rgba(0, 0, 0, 0.2) solid 2px; */
    flex-basis: 100%;
    text-shadow: rgb(0 0 0 / 30%) -1px -1px 1px;
    padding: 2rem 0 3rem;
    gap: 1rem;
    gap: 3em 0;

    /* box-shadow: 0px 4px 6px -4px rgba(255, 255, 255, 0.2) inset, */
    /* 0px -4px 6px -4px rgba(0, 0, 0, 0.4) inset; */
    background-color: transparent;
}

#about h2, #about .h2 {
    grid-column: 1 / 2;
    margin: 0;
    /* box-shadow:none; */
    /* border-right: rgba(150,150,150, 0.5) solid 1px; */
    border-bottom: none;
    padding: 2rem 4rem;
    /* background-color:transparent; */
    /* backdrop-filter: blur(7px); */
    position: relative;
    text-align: right;
    justify-content: right;
    z-index: 3;
    text-shadow: var(--g) 2px 1px 0;
    color: var(--e);
    /* box-shadow: -3px 0 4px -3px rgb(var(--dgRGB), 0.7) inset, 0 0 20px -2px #000; */
    box-shadow:none;
    border:none;
    text-transform: unset;
    line-height:1;
    border-right:rgba(255,255,255,0.1) solid 1px;
    /* border-right: 2px solid #000; */
    /* background-color:#0a0a0a;
    
    background-image:var(--scratches); */

}

/* 
#about h2 span {
    position: Sticky;
    top: 51px;
} */

#about h2:nth-of-type(even),
#about .h2:nth-of-type(even) {
    /* background-color:#222; */
    text-shadow: var(--db) 2px 1px 0;
    color: var(--b);
}

.bio {
    padding: 0;
    color: var(--e);
    backdrop-filter: blur(5px);
    background-clip: padding-box;
    margin: 0 auto;
    font-weight: 200;
    border: rgb(255 255 255 / 5%) solid 1px;
    border-width: 1px 1px 0;
    /* box-shadow: 0 3px 6px -3px rgb(var(--dgRGB), 1), 0 -3px 6px -3px rgb(var(--dgRGB), 1); */
    box-shadow:0 0 20px -2px #000;
    line-height: 2;
}

#aboutPage main,
#resumePage main,
#servicesPage main {
    gap: 0;
    margin: 0;
    /* padding:10px 0 0 0; */
    padding: 0;
}



#aboutPage main h2,
#resumePage main h2,
#servicesPage main h2,
#aboutPage main .h2,
#resumePage main .h2,
#servicesPage main .h2 {
    margin: 0;
    z-index: 5;
    background-color: #0b0b0b;
    background-image: url('bg/scratches-bg.png');
    background-attachment: scroll;
    /* box-shadow:
        0 3px 4px -3px rgb(var(--dgRGB), 0.7); */
}

/* #servicesPage main h2 {
    margin:0 -20px;
} */

#aboutPage main .subtitle {
    margin: 1rem auto;
}

#aboutPage .bio {
    min-height: 70vh;
}

#about .bio {
    padding: 3rem;
    width: auto;
    /* border-width: 0 0 0 1px; */
    grid-column: 2 / -1;
    background: none;
    margin: 0;
}

.bio.home-bio {
    margin: 0 2rem 1rem;
    bordeR: none;
    box-shadow: 0 0 20px -2px #000;
    /* border:1px solid rgba(255,255,255,0.1); */
    /* box-shadow: 0px 3px 4px -3px rgba(var(--dgRGB), 0.8); */

}

.splash2 {
    width: 100%;
    max-width: none;
    height: 40vh;
    object-fit: cover;
    z-index: 5;
    position: relative;
    box-shadow: 0 0 20px -5px var(--dg);
    background-attachment: scroll;
}

.small-img {
    width: auto;
    max-width: 400px;
    height: auto;
    margin: 2rem auto;
    display: block;
}

.big-links {
    display: flex;
    padding: 1rem;
    /* height:100%; */
    align-items: center;
    gap: 0.8em;
    font-size: 1.2rem;
    margin-top: 2rem;
    justify-content: center;
    flex-flow: row wrap;
}

.big-links a {
    text-align: center;
    flex: 1 1 auto;
    background-color: rgb(var(--dgRGB), 0.7);
    border: rgb(var(--ytRGB), 0.9) solid 1px;
    box-shadow: 2px 2px 10px #000;
    box-shadow: 2px 2px 0 0 #111, var(--g) 3px 3px 0 0;
    display: block;
    text-transform: lowercase;
    color: var(--yt);
    padding: 0.5rem 3vw;
    font-weight: 500;
    font-size: 1.3rem;
    text-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
}

@media (hover:hover) and (pointer:fine) {
    
    .big-links a:hover {
        background-color: rgb(var(--dbRGB), 0.7);
        /* background-color:rgba(var(--gRGB), 0.5); */
        color: #fff;
        transform: skew(-5deg);

    }
}

.cta {
    text-align: center;
}

.cta a {
    font-size: 2rem;
    font-weight: 600;
    display: inline-block;
    margin: 1em;
    text-align: center;
    color: var(--yt);
    /* border:1px solid rgba(0,0,0,0.4); */
    background-color: var(--g);
    letter-spacing: -1px;
    background-image: var(--irongrip);
    border-radius: 5px;
    text-shadow: rgb(0 0 0 / 30%) 0 0 4px;
    padding: 1rem 3rem;
    box-shadow: 0 -4px 4px -4px rgb(0 0 0 / 50%) inset, 0 4px 4px -4px rgb(255 255 255 / 40%) inset
}

@media (hover:hover) and (pointer:fine) {

    .cta a:hover {
        background-color: var(--b);
    }
}


.resume {
    display: block;
    width: 800px;
    max-width: 100%;
    height: auto;
    margin: 1rem auto;
}

main.websites>figure {
    max-height: 65vh;

}


#skills h3 {
    display: block;
}

.skills.bio {
    display: flex;
    flex-flow: row wrap;
    gap: 1.5rem;
    grid-column: 1 / -1;
    padding: 1.5rem 3rem;
    /* background-color: rgb(65 184 186 / 60%); */
    background: none;
    border: 1px solid rgb(255 255 255 / 10%);
    background-clip: padding-box;
    box-shadow: none;
}

.skills>* {
    flex: 1 1 250px;
}

.skills ul {
    background-color: rgb(0 0 0 / 50%);
    border: var(--b1);
    box-shadow: 1px 1px 5px rgb(0 0 0 / 70%) inset;
    list-style-position: inside;
    margin: 5px 0;
    padding: 5px;
}

.skills li::marker {
    color: var(--teal);
}

.skills h3 {
    background-color: transparent;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    box-shadow:
        /*0px 4px 6px -6px rgba(0,0,0, 0.3),*/
        0 -4px 6px -6px rgb(255 255 255 / 30%) inset;
    border-bottom: 1px solid rgb(0 0 0 / 10%)
}

/*

h4 {
    background-color:rgba(0,0,0,0.5);
    padding:10px;    

    background-color: rgba(0, 0, 0, 0.7);
        border: var(--b1);
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7) inset;
} */


.websites>figure img {
    object-position: top center;
}

#home {
    width: 100vw;
    height: 100vh;
    align-content: center;
}

#home h2,
#home .h2,
#home p {
    height: min-content;
}

#home h2,
#home .h2 {
    line-height: 3rem;
}

#home h2 small,
#home .h2 small {
    font-size: 0.6em;
    font-weight: 300;
    color: #bbb;
    text-transform: uppercase;
}

#home p {
    text-shadow: rgb(255 255 255 / 20%) 1px 1px 1px, rgb(0 0 0 / 50%) -1px -1px 1px;
    color: var(--teal);
    line-height: 2;
    font-size: 1.3rem;
    font-weight: 200;
    text-align: center;
}

#home a {
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--e);
}

#home a:hover {
    color: rgb(var(--salmon));
}

#services .splash2 {
    /* margin:0 -20px; */
    padding: 0;
    width: 100vw;
}

#services {
    gap: 10px;
}

#services p {
    padding: 1rem 2rem;
    margin: 1rem auto;
}

#services details {
    padding: 0.5rem 2rem 1.5rem;
}

main>p {
    text-align: center;
}


#services>div {
    grid-column: 1 / -1;
    display: grid;
    gap: 2rem;
    padding: 0 2rem 2rem;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));

}

#services section {
    border: rgb(255 255 255 / 7%) solid 1px;
    width: auto;
    backdrop-filter: blur(7px);
    line-height: 1.4;
    box-shadow: 2px 2px 10px rgb(0 0 0 / 70%) inset;
    /* border-radius:2px; */
    /* box-shadow: 0px 0px 3px -1px rgba(var(--dgRGB), 0.7), 0px 0px 6px -1px rgba(var(--dgRGB), 0.7); */
}

#services h4 {
    padding: 0 1rem;
    margin: 0 2rem;
    font-size: 1rem;
    letter-spacing: 2px;
    font-weight: 500;
}

#services section>h4:first-of-type {
    padding-top: 1rem;
}

#services ul,
#aboutPage ul {
    list-style-type: square;
    margin: 1rem;
}

#services ul li {
    margin-bottom: 0.5rem;
}

#services .big-links a {
    margin: 2rem;
}

summary {
    display: block;
    position: relative;
    font-size: 0.9em;
    color: var(--g);
    /* display:flex;
    flex-wrap:wrap;
    align-items: center; */
}

summary::before {
    position: absolute;
    right: calc(100% + 10px);
    top: 15px;
    display: inline-block;
    content: "";
    box-sizing: content-box;
    width: 0;
    height: 0;
    border: 12px solid transparent;
    border-left: 12px solid var(--g);
    opacity: 0.6;
    border-width: 6px 0 6px 9px;
    transition: 0.3s all;
    /* flex:0 0 0px; */
}

details {
    padding: 10px 2rem;
}

details p {
    padding: 10px 0;
}

details[open] summary::before {
    transform: rotate(90deg);
}


summary:hover {
    cursor: pointer;
}

#services summary h4 {
    font-size: 1.1rem;
}

#services section p {
    margin: 1rem 0;
}

#services details h4 {
    color: var(--e);
    margin: 0;
    padding: 5px 0;
    line-height: inherit;
    /* flex:2 1 calc(100% - 20px); */
    /* margin-left:5px; */
}

#aboutPage ul li::marker,
#servicesPage ul li::marker {
    color: var(--g);
}

.no-shadow img {
    box-shadow: none;
}

code {
    font-family: monospace;
    background-color: var(--dg);
    padding: 2px 5px;
    border-radius: 5px;
}


footer {
    color: var(--b);
    font-size: 0.9rem;
    padding: 1rem;
    line-height: 1.7;
    text-align: center;
    border-top: transparent 1px solid;
    background-color: #000;
    background-image: url("bg/iron-grip.png");
    box-shadow: 0 -4px 4px -4px rgb(0 0 0 / 50%) inset, 0 4px 4px -4px rgb(255 255 255 / 20%) inset;
    z-index: 5;
    position: relative;
}

footer .copy {
    color: var(--e);
}

@media (width >=1051px) and (prefers-reduced-motion: no-preference) {

    #filterButtons button::before {
        transition: 0.5s all;
    }

    #filterButtons button::before,
    #filterButtons button:hover::before {
        content: "\2726";
        overflow: visible;
        color: var(--g);
        display: inline-block;
        font-size: 1em;
        position: absolute;
        left: 7px;
        opacity: 0;
        /* top:5px; */
    }

    #filterButtons button.active::before,
    #filterButtons button:hover::before {
        opacity: 1;
    }

    /* #filterButtons button.active::after,
    #filterButtons button:hover::after {
        top:unset;
        left:unset;
        right:10px;
    } */

    #filterButtons button:hover::before,
    #filterButtons button:hover::after {
        transform: rotate(180deg);
    }

    .narrow #filterButtons button::before {
        display: none;
    }
}

@media screen and (width >= 500px) {


    #aboutPage .bio
            {
        min-width: 60%;
    }

    @media screen and (width > 1800px) {

        #aboutPage .bio {
            min-width:800px;
        }
    }

    .img-compare {
        display: grid;
        grid-template-columns: 240px 240px;
        grid-template-rows: auto auto;
        gap: 10px;
        place-items: center;
        place-content: center;


    }

    .img-compare figure {
        grid-row: 1 / -1;
        display: grid;
        /* place-items:center; */
        grid-template-rows: subgrid;
    }

    .img-compare img {
        place-self: center;
    }




}

@media (width <=1050px) {

    aside>figure img.zoom {
        max-width: 100%;
        max-height: 93vh;
        height: auto;
        width: auto;
    }

    #wrapper {
        display: block;
    }

    header {
        position: fixed;
        height: 7vh;
        padding: 0 10px;
        top: 0;
    }

    h1 {
        padding: 0;
        font-size: 1.2rem;
    }

    aside {
        width: 100%;
        position: relative;
        top: 0;
        height: 95vh;
        overscroll-behavior: auto;
        border: none;
        overflow-y: auto;
    }

    aside>figure {
        width: 100%;
        height: auto;
        max-height: none;
    }

    button {
        width: 2.5rem;
        height: 2.5rem;
    }


    main figcaption,
    main .motion {
        opacity: 1;
        z-index: 40;
    }

    #about {
        flex-wrap: wrap;
        display: flex;
        gap:1.5rem 0;
    }

    #about h2,
    #about .h2 {
        bordeR: none;
        flex: 1 1 100%;
        border-bottom: rgb(0 0 0 / 0%) 1px solid;
        font-size: 10vw;
        gap: 0;
        padding: 0;
        margin-top: -1rem;
        margin-right:24px;
    }

    .bio {
        flex: 1 1 100%;
        padding: 1.5rem 5px;
        max-width: 100vw;
        margin: 0;
    }

    @media screen and (width <=840px) {

        .big-links {
            padding: 10px 0;
            font-size: 1.5rem;
            text-align: center;
            justify-content: space-between;
        }

        .big-links a {
            padding: 0.5rem 2rem;
        }

        aside:not(.hidden) {
            padding-top: 1rem;
        }

        aside img,
        aside img.zoom {
            width: 100%;
            height: auto;
            object-fit: contain;
        }

        aside img:not(.zoom) {
            box-shadow: none;
        }

        aside.hidden~main,
        #home {
            padding: 10px;
            gap: 10px;
        }

        #infoBox {
            width: auto;
            margin: 0 10px;
            background-color: rgb(0 0 0 / 90%);
        }

        aside:not(.hidden)~main,
        button:hover::after,
        #fit {
            display: none;
        }

        h1 {
            font-size: 1.4rem;
            overflow: hidden;
            white-space: nowrap;
            padding: 0;
        }

        header {
            height: 3rem;
            width: 100vw;
            padding: 0 10px;
        }

        aside {
            max-height: calc(100vh - 3rem);
        }

        header h1 a img {
            height: calc(3rem - 20px);
            margin: auto 10px auto 0;
        }

        nav {
            position: relative;
            align-content: center;
        }

        nav label {
            display: block;
        }

        nav label::after {
            content: ".";
            color: transparent;
            display: block;
            background-image: url('menu.svg');
            background-size: 1.8rem auto;
            background-repeat: no-repeat;
            background-position: center center;
            width: 2.5rem;
            height: 100%;
            transition: all 0.6s;
        }

        input:checked~label::after {
            background-image: url('close.svg');
            background-size: 2.3rem auto;
            transform: rotate(-270deg);

        }

        #close {
            opacity: 0.8;
        }

        nav ul {
            box-shadow: 2px 2px 5px rgb(0 0 0 / 50%);
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            position: absolute;
            top: 100%;
            right: -10px;
            display: flex;
            flex-flow: column nowrap;
            transition: max-height 0.5s, opacity 0.6s, background-color 0.5s;
        }

        #hamburger:checked~ul {
            display: block;
            height: auto;
            max-height: 4840px;
            opacity: 1;
            background-color: rgb(0 0 0 / 90%);
        }

        nav li {
            display: block;
            padding: 1rem 1.5rem;
            opacity: 0;
            transition: 0.6s all;
            transition-delay: 0.3s;
        }

        footer {
            text-align: right;
            font-size: 0.8rem;
        }

        nav li a {
            font-size: 1.1rem;
        }

        nav input:checked~ul li {
            transition-delay: 0s;
            opacity: 1;
        }

        main>figure {
            max-height: none;
        }

        h2,
        main h2,
        .h2,
        main .h2 {
            font-size: 10vw;
            margin: 0;
            max-width: 100vw;
        }


        .splash2 {
            max-width: 100vw;
            margin-top: -10px;
        }

        h3, .h3 {
            width: auto;
            max-width: 100%;
            padding: 10px 1.5rem;
            margin: 3rem 10px;
        }

        .small-img {
            max-width: 90%;
        }

        #services details p {
            padding: 0;
        }

    }

    @media screen and (width <=500px) {

        #services {
            display: block;
        }

        #services details {
            padding: 0.5rem 0.5rem 1.5rem;
        }

        #services>div {
            padding: 0;
            grid-template-columns: auto;
            display: block;
        }

        summary::marker,
        details::marker,
        ::-webkit-details-marker {
            display: none;
        }

        section,
        header,
        #wrapper {
            width: 100vw;
        }

        h1 a {
            font-size: 1.2rem;
            align-items: center;
        }

        .cta a {
            padding: 10px 40px;
            font-size: 1.5rem;
        }

        #services section>p,
        #services ul,
        #services ol,
        #services details,
        #services h4,
        #services h3 {
            padding: 10px 5px;
            margin: 15px 10px;
        }

        #services ul,
        #services details {
            margin-left: 20px;
        }

        #services section {
            background-color: rgb(0 0 0 / 30%);
            margin-bottom: 2rem;
            margin-top: 4rem;
        }

        #services h3 {
            margin-top: -2rem;
        }

        .splash2 {
            display: block;
        }

        #filterButtons {
            max-width: 96vw;
        }

        main>figure {
            max-width: 96vw;
        }

        main {
            grid-template-columns: auto;
            max-width: 100vw;
        }

        #aboutPage main .subtitle,
        main .subtitle,
        #aboutPage p {
            margin: 0;
            padding: 10px;
        }

        #aboutPage main .subtitle {
            font-size: 2rem;
            line-height: 1.3;
        }

    }
}