:root {
    --bluesky-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 360 320'%3E%3Cpath fill='%230085ff' d='M180 142c-16.3-31.7-60.7-90.8-102-120C38.5-5.9 23.4-1 13.5 3.4 2.1 8.6 0 26.2 0 36.5c0 10.4 5.7 84.8 9.4 97.2 12.2 41 55.7 55 95.7 50.5-58.7 8.6-110.8 30-42.4 106.1 75.1 77.9 103-16.7 117.3-64.6 14.3 48 30.8 139 116 64.6 64-64.6 17.6-97.5-41.1-106.1 40 4.4 83.5-9.5 95.7-50.5 3.7-12.4 9.4-86.8 9.4-97.2 0-10.3-2-27.9-13.5-33C336.5-1 321.5-6 282 22c-41.3 29.2-85.7 88.3-102 120Z'/%3E%3C/svg%3E");
    --linkedin-icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='24' height='24' version='1.1' viewBox='0 0 72 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='m8 0c-4.4183 8.1162e-16 -8 3.5817-8 8v56c5.4108e-16 4.4183 3.5817 8 8 8h56c4.4183 0 8-3.5817 8-8v-56c0-4.4183-3.5817-8-8-8h-56zm8.3496 10c3.5073 0 6.3477 2.8638 6.3477 6.3965s-2.8404 6.3984-6.3477 6.3984c-3.5073 0-6.3496-2.8658-6.3496-6.3984s2.8423-6.3965 6.3496-6.3965zm33.033 16.273c7.3531 0 12.617 4.4906 12.617 13.777v21.949h-10.684v-18.197c0-4.9894-1.8966-7.7773-5.8457-7.7773-4.2961 0-6.541 2.9013-6.541 7.7773v18.197h-10.297v-34.666h10.297v4.668s3.0966-5.7285 10.453-5.7285zm-38.35 1.0605h10.736v34.666h-10.736v-34.666z' fill='%23007ebb'/%3E%3C/g%3E%3C/svg%3E");
    --google-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.2451 0C15.551 5.21343e-05 18.3114 1.1892 20.4375 3.13086L16.9316 6.56738C15.6515 5.38925 14.0484 4.77837 12.2451 4.77832C9.06153 4.77832 6.35622 6.88348 5.3877 9.71973C5.1428 10.4397 4.99805 11.2036 4.99805 12C4.99805 12.7964 5.1428 13.5603 5.3877 14.2803L5.37305 14.291H5.3877C6.35618 17.1273 9.06147 19.2324 12.2451 19.2324C13.8925 19.2324 15.2841 18.7961 16.375 18.0762L16.6143 17.9121C17.7836 17.0666 18.5636 15.8667 18.835 14.4658H12.2451V9.81836H23.7773C23.922 10.6037 24 11.4217 24 12.2725C24 15.927 22.664 19.0041 20.3486 21.0986L19.96 21.4326C17.974 23.0601 15.3445 24 12.2451 24C7.45847 24 3.32832 21.305 1.31348 17.3887V17.3779C0.47867 15.7634 0 13.9417 0 12C0 10.1795 0.420587 8.4644 1.16113 6.92676L1.31348 6.62207C3.32832 2.6948 7.45847 0 12.2451 0Z' fill='%23EA4335'/%3E%3C/svg%3E%0A");
    --hamburger-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 18h16M4 12h16M4 6h16' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --serif-font-stack: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
    --pico-mark-gradient: linear-gradient(to left, #c52f21, #f09f42);
    --header-gradient: linear-gradient(to left, #c52f21, #f09f42b0);
    --body-gradient: linear-gradient(to right, #c52f214b, #f09f4248);
    text-wrap: pretty;
    /* SERVICES PAGES */
    --web-design-gradient: linear-gradient(to right, #ff6153b4, #f8ff71bb);
    --wd-mark-gradient: linear-gradient(to left, #bc0000, #ff5f33);
}

/* LINKS / PAGE TRANSITION */
html {
    scroll-padding-top: 5vh;
    scroll-behavior: smooth;
}

@media(min-width: 768px) {
    html {
        scroll-padding-top: 8vh;
    }
}

@view-transition {
    navigation: auto;
}

@keyframes blur-out {
    from {
        filter: blur(0);
    }

    to {
        filter: blur(10px);
    }
}

@keyframes blur-in {
    from {
        filter: blur(10px);
    }

    to {
        filter: blur(0);
    }
}

::view-transition-old(root) {
    animation: 0.6s ease-in both blur-out;
}

::view-transition-new(root) {
    animation: 0.6s ease-in both blur-in;
}

/* ICONS */
.social-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 10px;

    &>a {
        display: block;
        background: var(--pico-primary);
        width: 24px;
        height: 24px;
        margin: 0 5px;


        &:hover {
            background-color: var(--pico-primary);
            transform: scale(1.05);
            cursor: pointer;
        }
    }

    & p {
        margin: 0;
    }
}

.bluesky {
    mask-image: var(--bluesky-icon);
}

.linkedin {
    mask-image: var(--linkedin-icon);
}

.google {
    mask-image: var(--google-icon);
}

/* UTILITY CLASSES */

.text-center {
    display: block;
    text-align: center;
}

/* DESIGN & TYPOGRAPHY */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--serif-font-stack);
}

h1,
h2 {
    text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.15);
}

small {
    display: block;
    font-weight: 500;
}

mark,
mark a {
    padding: 0;
    background: var(--pico-mark-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 2px 3px rgba(197, 47, 33, 0.08);
    font-weight: 700;
}

.profile-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--pico-primary);
    background: var(--pico-mark-gradient);
    border-radius: 50%;
    box-shadow: 0 0 15px #c52f214b;
    aspect-ratio: 1/1;
        & img {
            filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.5));
        }
}

.gradient-background {
    background: var(--body-gradient);
    z-index: 0;
}

.arrow-down {
    font-size: 1.15rem;
    display: block;
}

.center-image {
    display: flex;
    justify-content: center;
}

.image-seamless {
    padding: 0 0 1rem 0;
}

.jay-maxwell-headshot {
    height: 450px;
    background-image: url("../images/Jay-Maxwell-Smiling.jpg");
    background-size: cover;
    background-position: top;
    margin-bottom: 1.5rem;
    border-radius: 5px 5px 0 0;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
}


/* HEADER */
header {
    z-index: 100;
    padding-top: 0 !important;
}

@media (min-width: 768px) {
    header {
        position: sticky;
        top: 0;
    }
}

.external-link {
    display: block;
    width: 100%;
    /* text-align: right; */
    margin: 0;
    border-radius: 0 0 0 20px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);

    &:after {
        content: " ⇲";
        transform: rotate(270deg) scale(0.8);
        display: inline-block;
        text-decoration: none;
        position: relative;
        bottom: 0.35rem;
        left: 0.1rem;
    }
}

.external-link-text:after {
    display:inline-block;
    text-decoration: none;
    content: " ⇲";
    transform: rotate(270deg) scale(0.8);
    position: relative;
    top: -0.25rem;

}

a[role="button"]:hover, input[type="submit"]:hover{
    transform: scale(1.03);
    transition: all 0.4s ease-in;
}

/* NAVIGATION */

nav {
    padding: 0;
    margin: 0;
    flex-direction: column;

    & .profile-container {
        width: 60px;
    }

    & ul {
        padding: var(--pico-spacing);
        flex-direction: row;
        justify-content: space-around;

        & li a {
            color: var(--pico-contrast);
        }
    }

    &>div {
        padding: var(--pico-spacing);
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
        gap: 20px;

        &>p {
            font-family: var(--serif-font-stack);
            font-size: 1.5rem;
            margin: 0;
            padding: 0;
        }
    }
}

@media (min-width: 768px) {
    nav {
        flex-direction: row;
    }
}

/* MAIN */
main {
    padding-top: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    &>div {
        padding-top: calc(var(--pico-spacing) * 3);
        padding-bottom: calc(var(--pico-spacing) * 3);
    }
}

/* HERO SECTION */

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    & h1 {
        margin-top: calc(var(--pico-spacing) * 1);
        margin-bottom: calc(var(--pico-spacing) * 2);
        font-size: 2.5rem;
    }

    & p {
        max-width: 800px;
    }

    & .profile-container {
        max-height: 30vh;
    }
}

/* SERVICES SECTION */

.services {
    display: flex;
    flex-flow: row wrap;
    gap: 2rem;

    & .five-s {
        &>div {
            min-width: 16rem;
        }
    }
}

.card {
  display: flex;
  flex: 1 1 16rem;
  flex-flow: column nowrap;
  align-items:stretch;
  justify-content: space-between;
  border-radius: 0 20px 0 10px;
  background: var(--body-gradient);
  box-shadow: 5px 5px 10px #c52f214b;
  padding: calc(var(--pico-spacing)/2);
  text-decoration: none;
  &:hover, :focus {
    cursor: pointer;
    box-shadow: 0 0 10px #c52f21bc;
    transform: scale(1.05);
    transition: all 0.3s ease-in-out;
  }

  & div {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
    width: 100%;
    align-items: center;
    text-align: center;
        & > img {
          max-width: 4rem;
          filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.3));
        }

        &:after {
          position: relative;
          bottom: 0.25rem;
          right: 0.25rem;
          display: block;
          content: "⇲";
          align-self: flex-end;
          text-align: right;
          font-size: 2rem;
          height: 2rem;
        }

        &:before {
          position: absolute;
          display: none;
         font-weight: 600;
          content: "LEARN MORE";
          bottom: 0rem;
          right: 1.6rem;
        }

        &:hover:before, &:hover:after {
            display: block;
            color: var(--pico-primary);
        }
      }
    }


.slider {
    margin: 2rem 0 0;
    height: var(--height);
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, #000 40% 60%, transparent);

    & ul {
        display: flex;
        width: 100%;
        min-width: calc(var(--width) * var(--quantity));
        position: relative;

        &:hover li,
        &:has(:focus) li {
            animation-play-state: paused;
        }

        & li {
            list-style-type: none;
            width: var(--width);
            height: var(--height);
            position: absolute;
            left: 100%;
            animation: autoRun var(--duration) linear infinite;
            animation-delay: calc((var(--duration) / var(--quantity)) * (var(--position) - 1) - var(--duration));

            & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.15));
            }
        }
    }
}

@keyframes autoRun {
    from {
        left: 100%;
        transform: scale(0.5);
    }

    50% {
        transform: scale(1);
    }

    to {
        left: calc(var(--width) * -1);
        transform: scale(0.5);
    }
}

/* PORTFOLIO SECTION */

.portfolio-entry {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;

    &>div>img {
        border-radius: 0 20px 0 0;
        box-shadow: 0 0 15px #c52f214b;
    }

    & h3 {
        margin-top: 1rem;
    }
}

.deliverables {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;

    & small {
        display: block;
        flex: auto;
        text-align: center;
        border: 4px solid var(--pico-primary);
        padding: 5px 10px;
        border-radius: 20px;
    }
}

.programs {
    padding: 1rem;
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
    justify-content: center;

    & figure {
        position: relative;
        width: 2rem;
        margin: 0 10px;
        overflow: visible;

        & img {
            filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.15));
        }

        & figcaption {
            display: none;
            position: absolute;
            bottom: 120%;
            left: 50%;
            text-align: center;
            transform: translateX(-50%);
            text-wrap: nowrap;
            background: var(--pico-mark-gradient);
            border-radius: 5px;
            font-size: 0.75rem;
            padding: 5px 10px;
            color: #FFF;
            box-shadow: 0 0 15px #c52f214b;

            &:before {
                position: absolute;
                content: "";
                width: 10px;
                height: 10px;
                background: var(--pico-mark-gradient);
                background-size: 1000%;
                background-position: center;
                transform: translateX(-50%) rotate(45deg);
                bottom: -5px;
                left: 50%;
                transition-duration: 0.3s;
            }

        }
    }

    & figure:hover {
        transform: scale(1.05);
        transition: transform 0.25s;
        cursor: pointer;

        & figcaption {
            display: block;
        }
    }
}

/* ABOUT SECTION */
.about {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;

    &>div {
        display: flex;
        flex-flow: column;
        justify-content: center;
    }
}

.experience {
    display: flex;
    padding: 0.5rem 0;
    flex-flow: row-reverse wrap;
    justify-content: center;
    gap: 10px;
    align-items: center;

    & p {
        flex: 2;
        text-align: center;
        margin: 0;

        & span {
            margin: 0;
            padding: 0;
            line-height: 100%;
            display: block;
            font-size: 2rem;
            font-weight: 700;
        }
    }

    & small {
        font-size: 1rem;
        flex: 3;
        text-align: left;

    }
}

.education {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: center;

    & img {
        width: 5rem;
    }
}

/* CONTACT SECTION */

form {
    & textarea {
        min-height: 12rem;
    }
    & input, textarea {
        box-shadow: 2px 3px 5px #c52f214b;
    }

    & label:has(+ input:required)::after {
        content: " *";
        color: var(--pico-primary);
    }
}

/* FAQ SECTION */
details {
    & summary {
        margin: 1rem;
        padding: 1rem;
        font-weight: 600;
        font-size: 1.25rem;
        font-family: var(--serif-font-stack);
        border-radius: 5px;
        filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.15));
        box-shadow: 0 0 15px #c52f214b;
        line-height: 1.2;
        &:hover {
            transform: scale(1.03);
            transition: transform 0.66s;
        }

        & summary:marker {
            position: relative;
            left: 50%;
        }
    }

    &:open {
        margin-bottom: 2rem;
    }

    & p {
        padding: 0 20% 0 2rem;
    }
}

/* FOOTER */

footer {
    & nav {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        & ul {
            gap: 1rem;
        }
    }

    &>div {
        display: flex;
        flex-flow: row;
        justify-content: space-between;
        margin-top: 10px;
    }
}

/* SERVICE PAGE */
#web-design-development {
    h2 {
        font-size: 3rem;
    }

    & .gradient-background {
        background: var(--web-design-gradient);
    }

    & .profile-container {
        background: none;
        background-color: #FFF;
        padding: 10px;
        & img {
            filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.3));
        }
    }

    & mark,
    mark a {
        background: var(--wd-mark-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: 2px 3px rgba(197, 47, 33, 0.08);
        font-weight: 700;
    }

    .card {
        flex: 1 1 12rem;
        background: rgba(197, 47, 33, 0.1);
        transform: none;
        &:hover {
        cursor: default;
        }
        > div {
        > div {
        display: grid;
        place-items: center;
        grid-template-rows: 5rem auto auto;
        }
    }}

    .card div:after, .card div:before{
    display: none;
    content: "";
}
    & .five-s {
        &>div {
            min-width: 16rem;
        }
    }

}

.process-steps {
    display: flex;
    flex-flow: row wrap;
    gap: 2rem;

    .step {
        flex: 1 1 0;
        min-width: 350px;
        background-color: #FFF;
        color: #000;
        border-radius: 5px;
        padding: 2rem;
        box-shadow: 0 0 15px #c52f214b;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;

        & .step-number {
            display: flex;
            justify-content: center;
            text-align: center;
            font-size: 2rem;
            font-weight: 700;
            background: var(--web-design-gradient);
            border-radius: 50%;
            width: 3rem;
            height: 3rem;
            margin-bottom: 0.8rem;
            box-shadow: 0 0 15px #c52f214b;
        }

        & p {
            text-align: center;
            font-size: 0.9rem;
            padding: 0 1rem;
            color: #000;
        }

        & h3 {
            font-size: 1.2rem;
            text-align: left;
            padding: 0;
            margin: 0 0 0.5rem;
            color: #000;
        }
    }

}

.farris-style, .corinne{

    & .portfolio-entry{
    padding: 2rem 0;
    & p, h2, h3, small{
    font-family: "Overpass";
    color: #FFF;
    }
    & h3{
        font-size: 2rem;
    }
    & .programs img, .programs figcaption, .deliverables, a{
        filter: brightness(100);
    }
    & .programs figcaption {
        color: black;
    }
    & img {
        border-radius: 5px;
    }
    & .portfolio-row{
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
        & img {
            max-height: 20rem;
            border-radius: 5px;
            box-shadow: none;
        }
    }
    }
}

.farris-style{
    background: linear-gradient(180deg,rgba(120, 109, 10, 0.8) 0%, rgba(72, 84, 40, 0.8) 100%);
    }
.corinne{
        background: linear-gradient(180deg,rgba(251, 165, 79, 1) 0%, rgba(79, 85, 95, 0.8) 100%);
    }