/* Incaseofgrace
** Designed by
** Incaseofgrace (Grace Gittel Lewis)
http://incaseofgrace.com */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* __VARIABLES__ */
* {
    /* Fonts */
    --Condensed: Barlow Condensed;
    --Barlow: Barlow;

    /* Colors */
    --BodyColor: #181316;
    --Purplegrade: linear-gradient(180deg, #ffffcb 0%, #754660 80%);
    --LemonJuice: #ffffcb;
    --OrangeJuice: #fdd1ae;
    --Grape: #754660;
        --TransGrape: #7546607e;
    --Grapefruit: #6e404f;

    /* Misc */
    --Border-1: 3px solid var(--Grape) /* Primary border */;
    --BorderRad: 0px;
    --BorderRad-2: 50px;
    --Transit: all .3s; 
    --Transit-2: all .2s; 
    overflow-wrap: break-word;
}

html {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

body {
    background: var(--Purplegrade);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: var(--Barlow);
    overflow-x: hidden;
    margin: 0px;
}

.main-body {
    width: 65%;
    margin: auto;
    margin-top: 80px;
}

/* Scrollbar */
html {
    scrollbar-color: var(--LemonJuice) var(--Grape);
}
@media (pointer: coarse) {
    html {
        scrollbar-color: var(--Grape) var(--LemonJuice);
    }
}

/* __TEXT__ */

p {
    font-size: 1.4em;
}

h1 {
    color: var(--LemonJuice);
    font-family: var(--Condensed);
    font-weight: 700;
    margin: 0px 0px 10px 0px;
    font-size: 6em;
    text-align: center;
    line-height: 1em;
}
h2 {
    color: var(--OrangeJuice);
    font-family: var(--Condensed);
    font-weight: 700;
    margin: 15px 0;
    font-size: 3em;
    text-align: center;
    background: var(--Grape);
    padding: 0px 20px 6px 20px;
}
/* Links */
.main-body a,
.gal-filters button {
    color: var(--Grapefruit);
    background:
    linear-gradient(
      to bottom, var(--Grapefruit) 0%,
      var(--Grapefruit) 100%
    );
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 1px 2px;
    transition: var(--Transit) ease-out;
    transition: all .3s ease-in-out;
    border: none;
    text-decoration: none;
}
.main-body a:hover,
.gal-filters button:hover {
    color: var(--LemonJuice);
    background-size: 4px 100%;
}


/* __PANELS__ */
.panel {
    background: var(--OrangeJuice);
    margin: 25px 0px;
}
.panel-head {
    background: var(--Grape);
    text-align: center;
    padding: 5px;
}
.panel-body {
    padding: 25px;
}
.panel-grape {
    background: var(--Grape);
}


/* __COMPONENTS__ */
.row {
    display: grid;
    grid-template-columns: 45% 45%;
    column-gap: 10%;
}

/* __NAVBAR__ */
#header {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 100;
}
.navbar {
    background: var(--Grape);
    padding: 8px 0px 10px 0px;
}
.navbar ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0px;
    list-style: none;
    padding: 0px;
}
.navbar li {
    width: fit-content;
    margin: 0px 10px;
    transition: var(--Transit-2);
}
.navbar li a {
    color: var(--LemonJuice);
    font-family: var(--Condensed);
    font-weight: 500;
    margin: 15px 0;
    font-size: 2em;
    text-align: center;
    text-decoration: none;
    transition: var(--Transit-2);
}
.navbar li:hover {
    transform: translateY(-5px);
}
.navbar li:hover a {
    color: var(--OrangeJuice);
}
.navbar .logo-space:hover {
    transform: none;
}
/* Logo */
.navbar li :nth-of-type(4) {
    margin-right: 0px;
}
.logo-space {
    padding-right: 65px;
    padding-left: 2px;
}
.logo-mobile {
    display: none;
}
.navbar .logo {
    position: absolute;
    top: 6px;
    /* left: calc(50% - 25px); */
    /* Note to self: subtract half img width PLUS half scrollbar width. */
    width: 65px;
    margin: 0px;
}
.navbar .logo img {
    height: 65px;
    transition: all .6s;
}
.navbar .logo:hover img {
    transform: rotateY(360deg);
}

/* __FOOTER__ */
.footer {
    margin: auto;
    color: var(--LemonJuice);
    text-align: center;
    margin: 15px 0px 25px 0px;
    font-size: 1.4em;
    padding: 0px 20px;
}

/* __BOXES__ */
.box-1 {
    border: var(--Border-1);
    border-color: var(--Grapefruit);
    padding: 15px;
}
.box-1 h2:first-of-type {
    background: var(--Grapefruit);
    margin-top: 0px;
    margin: -15px -15px 15px -15px;
}
.box-2 {
    border: var(--Border-1);
}

/* __BUTTONS__ */
.base-btn {
    font-family: var(--Condensed);
    font-size: 2em;
    text-align: center;
    font-weight: 700;
    color: var(--LemonJuice);
    background: var(--Grapefruit);
    border: none;
    width: 100%;
    padding: 10px;
    transition: var(--Transit-2);
    cursor: pointer;
}
.base-btn:hover {
    color: var(--Grapefruit);
    background: var(--LemonJuice);
    background-color: var(--LemonJuice);
}

/* ----------------------------------------------- PAGES */
/* __HOMEPAGE__ */
.home-name {
    margin: 0px;
}
.pg-homepage .panel-body {
    padding: 0px;
}
.pg-homepage .row {
    border: 25px solid var(--LemonJuice);
    border-top-width: 0px;
    border-bottom-width: 35px;
}
.organ-btn {
    display: block;
    text-decoration: none;
    background: var(--Grape);
}
.organ-top-b {
    background: var(--Grape);
}
.organ-bot-b {
    background: var(--LemonJuice);
}
.organ-btn:nth-of-type(odd) .organ-bot-b img {
    mask-image: linear-gradient(90deg, var(--Grape) 0%, transparent 90%);
}
.organ-btn:nth-of-type(even) .organ-bot-b img {
    mask-image: linear-gradient(90deg, transparent 10%, var(--Grape) 100%);
}
.organ-top {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    height: 93px;
    background: var(--LemonJuice);
    transition: var(--Transit);
}
.organ-bot {
    background: var(--Grape);
    height: 93px;
    width: 100%;
    object-fit: cover;
}
.organ-bot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transition: var(--Transit);
}
.organ-btn:nth-of-type(odd) .organ-top {
    border-top-right-radius: var(--BorderRad-2);
    border-bottom-right-radius: var(--BorderRad-2);
}
.organ-btn:nth-of-type(odd) .organ-bot {
    border-top-left-radius: var(--BorderRad-2);
    border-bottom-left-radius: var(--BorderRad-2);
}
.organ-btn:nth-of-type(odd) .organ-bot img {
    margin-left: -2px;
    border-top-left-radius: var(--BorderRad-2);
    border-bottom-left-radius: var(--BorderRad-2);
}
.organ-btn:nth-of-type(even) .organ-top {
    flex-direction: row-reverse;
    border-top-left-radius: var(--BorderRad-2);
    border-bottom-left-radius: var(--BorderRad-2);
}
.organ-btn:nth-of-type(even) .organ-bot {
    border-top-right-radius: var(--BorderRad-2);
    border-bottom-right-radius: var(--BorderRad-2);
}
.organ-btn:nth-of-type(even) .organ-bot img {
    margin-left: 2px;
    border-top-right-radius: var(--BorderRad-2);
    border-bottom-right-radius: var(--BorderRad-2);
}
.organ-btn h2 {
    color: var(--Grape);
    text-decoration: none;
    background: none;
    padding: 15px 0px 20px 0px;
    margin: 0px;
}
.organ-btn:nth-of-type(odd) h2 {
    text-align: right;
    margin-right: 15px;
}
.organ-btn:nth-of-type(even) h2 {
    text-align: left;
    margin-left: 15px;
}
.yellow-bit {
    display: block;
    height: 35px;
    width: 100%;
    background: var(--LemonJuice);
}
/* Icons */
.organ-top img {
    height: 80px;
    position: relative;
    transition: var(--Transit);
}
.organ-btn:nth-of-type(odd) .organ-top img {
    margin-right: 10px;
}
.organ-btn:nth-of-type(even) .organ-top img {
    margin-left: 10px;
}
/* Hover effects */
.organ-btn:nth-of-type(odd):hover .organ-top {
    padding-right: 50px;
}
.organ-btn:nth-of-type(even):hover .organ-top {
    padding-left: 50px;
}
.organ-btn:nth-of-type(odd):hover .organ-bot img {
    object-position: 50% calc(50% + 75px);
}
.organ-btn:nth-of-type(even):hover .organ-bot img {
    object-position: 50% calc(50% + 75px);
}

.organ-btn:nth-of-type(odd):hover .organ-top img {
    margin-left: 12px;
}
.organ-btn:nth-of-type(even):hover .organ-top img {
    margin-right: 12px;
}

/* __GALLERY__ */
.gal-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
    padding: 0px 200px;
}
.gal-filters-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    pointer-events: none; 
    /* The above stops the JS from breaking when the button container div is clicked. */
}
.gal-filters .filter-btn {
    font-family: var(--Condensed);
    font-size: 2em;
    text-align: center;
    font-weight: 700;
    padding: 10px;
    background-size: 2px 4px;
    transition: var(--Transit-2);
    cursor: pointer;
    pointer-events: all;
    /* As with the container, this re-enables clicking for the buttons ALONE. */
}
.gal-filters-graphic {
    display: flex;
    justify-content: center;
    flex: 1 1 100%
}
.gal-filters .toggle-graphic {
    width: 50%;
    font-family: var(--Condensed);
    font-size: 2em;
    text-align: center;
    font-weight: 700;
    padding: 10px;
    color: var(--LemonJuice);
    background-size: 100% 100%;
    background-position: 0% 0%;
    background: var(--Grapefruit);
    margin-top: 25px;
    transition: var(--Transit-2);
    cursor: pointer;
}
.gal-filters .toggle-graphic:hover {
    background: var(--LemonJuice);
    color: var(--Grapefruit);
}
/* Items */
/* gal-grid and gal-item are separate from card-grid and card-item precisely so that they can use flexbox, which allows them to have the fancy grow/shrink animations when filters are used. */
.gal-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    margin: 20px 0px;
    transition: var(--Transit);
}
.gal-grid:last-of-type {
    margin-bottom: 0px;
}
.gal-grid .gal-item {
    position: relative;
    background: var(--LemonJuice);
    border: var(--Border-1);
    padding: 0px;
    aspect-ratio: 1 / 1;
    width: calc((100% / 3) - 10px);
    height: calc((100% / 3) - 10px);
    /* width: 100%;
    height: 100%; */
    cursor: pointer;
    overflow: hidden;
    transition: var(--Transit);
    @starting-style {
        translate: 0 -50px;
        opacity: 0;
    }
}
.gal-grid .gal-item img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--Transit);
}
.gal-grid .gal-item:hover {
    transform: translatey(-20px);
    border-color: var(--Grapefruit);
}
/* .gal-grid .gal-item:hover img {
    scale: 1.2;
} */
/* Modals */
dialog {
    border: none;
    box-sizing: border-box;
    top: 0;
    width: 65%;
    max-width: 65%;
    background: var(--LemonJuice);
    font-family: var(--Barlow);
    color: var(--BodyColor);
    text-align: center;
    padding: 15px;
    padding-top: 0px;
    margin: 20px auto;
    max-height: 95%;
    overscroll-behavior: contain;

    /* Animation */
    transition: translate .3s ease-in-out, opacity .3s ease-in-out, display .3s ease-in-out allow-discrete;

    &[open] {
    /* Post-Open/"Normal" */
    translate: 0 0;
    opacity: 1;
    z-index: 1000;

    /* Pre-Open */
        @starting-style {
            translate: 0 -50px;
            opacity: 0;

        }
    }

    /* Close */
    &:not([open]) {
        translate: 0 -50px;
        opacity: 0;
        position: fixed;
        overflow-y: scroll;
        z-index: 1000;
  }
}
dialog button {
    width: calc(100% + 30px);
    font-family: var(--Condensed);
    font-size: 2em;
    font-weight: 700;
    color: var(--LemonJuice);
    border: none;
    background: var(--Grapefruit);
    margin: 0px -15px;
    cursor: pointer;
    padding-bottom: 5px;
    transition: var(--Transit);
}
dialog button:hover {
    background: var(--OrangeJuice);
    color: var(--Grapefruit);
}
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    overflow: hidden;
    overscroll-behavior: contain;
}
dialog img {
    max-width: 100%;
    max-height: 92vh;
}
dialog p {
    font-size: 1.4em;
    padding: 0px 50px;
}
/* Filtering */
.gal-item.startup {
    @starting-style {
        width: 0px;
        height: 0px;
        translate: 0 -50px;
        opacity: 0;
    }
}
.gal-item.hide,
.gal-item.graphic-hide {
    opacity: 0;
    display: none;
}
.gal-item.hiding,
.gal-item.graphic-hiding {
    opacity: 0;
    width: 0px;
    height: 0px;
}
.gal-filters-main .active {
    background-color: transparent;
    transition: var(--Transit);
}
.gal-filters-main .filter-btn.active {
    color: var(--LemonJuice);
    background: var(--Grapefruit);
    background-color: var(--Grapefruit);
}
.gal-filters .toggle-graphic.active {
    background: var(--LemonJuice);
    color: var(--Grapefruit);
}
/* Multiple icon */
.gal-item.mult::before {
    display: block;
    content: "+ MULTIPLE +";
    position: absolute;
    top: 0px;
    width: 100%;
    text-align: center;
    font-family: var(--Barlow);
    font-size: 2em;
    font-weight: 700;
    color: var(--Grape);
    padding: 0px 0px 2px 0px;
    background: var(--LemonJuice);
}

/* __ABOUT__ */
.pg-about p {
    margin-top: 0px;
}
.pg-about .about-skills li {
    font-size: 1.4em;
}
.pg-about .about-skills ul {
    column-count: 4;
    column-gap: 20px;
    margin-bottom: 0px;
    margin-top: 0px;
}

/* __LINKS__ */
.linkbox {
    padding: 0px;
    margin-bottom: 25px;
}
.linkbox:last-of-type {
    margin-bottom: 0px;
}
.linkbox h2 {
    margin: 0px!important;
}
.linklist {
    margin: 0px;
    padding: 0px;
}
.linklist li {
    list-style: none;
    width: 100%;

}
.linklist a {
    font-weight: bold;
    display: block;
    text-align: center;
    font-size: 1.8em;
    width: 100%;
    padding: 5px 0px;
    border-bottom: var(--Border-1);
    border-color: var(--Grapefruit);
    background: var(--OrangeJuice);
    background-size: 4px 100%;
}
.linklist li:nth-of-type(even) a {
    background: var(--LemonJuice);
}
.linklist a:hover,
.linklist li:nth-of-type(even) a:hover {
    color: var(--OrangeJuice);
    background: var(--Grapefruit);
}
.box-2 .linklist a {
    border-color: var(--Grape);
}
.box-2 .linklist a:hover,
.box-2 .linklist li:nth-of-type(even) a:hover {
    background: var(--Grape);
}

/* __WRITING__ */
.gal-item h2 {
    position: absolute;
    width: 100%;
    padding: 0px 0px 6px 0px;
    margin: 0px;
    transition: var(--Transit);
}
.gal-item:hover h2 {
    background: var(--Grapefruit);
}
.main-body a.proj-link {
    background: none;
    width: calc((100% / 3) - 10px);
    height: calc((100% / 3) - 10px);
}
.proj-item .gal-item {
    width: 100%;
}

/* __CONTACT__ */
.contact-form {
    padding: 1px;
}
.contact-form input,
.contact-form textarea {
    box-sizing: border-box;
    font-family: var(--Barlow);
    font-size: 1.4em;
    width: 100%;
    height: 50px;
    padding: 5px 15px;
    border: var(--Border-1);
    border-color: var(--Grapefruit);
    border-bottom: none;
    background: var(--LemonJuice);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--Grapefruit);
}
.contact-form textarea {
    height: 100px;
    border: var(--Border-1);
    border-color: var(--Grapefruit);
}
.contact-form button {
    margin-top: -3px;
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
    outline: none;
    background: var(--OrangeJuice);
}
.pg-contact .contact-form input:-internal-autofill-selected {
    background-color: var(--LemonJuice)!important;
    background: var(--LemonJuice)!important;
}

/* REVIEWS */
.card-grid {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    justify-content: start;
    gap: 21px;
    margin: 20px 0px;
    transition: var(--Transit);
}
.card-grid:last-of-type {
    margin-bottom: 0px;
}
.card-grid .card-item {
    position: relative;
    background: var(--LemonJuice);
    border: var(--Border-1);
    padding: 0px;
    aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: var(--Transit);
}
.card-item h2 {
    margin-top: 0px;
    margin-bottom: 0px;
    text-transform: uppercase;
}
.card-item p {
    padding: 15px;
    margin-top: 0px;
}
.card-item.nolink {
    cursor: auto;
}
.card-item.nolink:hover {
    transform: translatey(0px);
}
/* Review specific */
.card-item.review {
    display: flex;
    flex-direction: column;
}
.card-item.review .review-content {
    height: 100%;
    overflow-y: auto;
    scrollbar-color: var(--Grapefruit) var(--LemonJuice);
}



/* -------------------------------- */

/* __SCREEN SCALING__ */
@media only screen and (max-width: 1440px) {

}
@media only screen and (max-width: 1199px) {
    .main-body {
        width: 85%;
    }
}
@media only screen and (max-width: 991px) {

}
@media only screen and (max-width: 768px) {
    /* TEXT */
    h1 {
        font-size: 5em;
    }
    h2 {
        font-size: 2.4em;
    }
    /* HOMEPAGE */
    .pg-homepage .row {
        display: block;
        border: none;
        border-bottom: 35px solid var(--LemonJuice);
    }
    .organ-top,
    .organ-bot {
        height: 73px;
    }
    .organ-btn:nth-of-type(even) .organ-top {
        border-top-right-radius: var(--BorderRad-2);
        border-bottom-right-radius: var(--BorderRad-2);
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }
    .organ-btn:nth-of-type(even) .organ-bot {
        border-top-left-radius: var(--BorderRad-2);
        border-bottom-left-radius: var(--BorderRad-2);
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    .organ-btn:nth-of-type(even) .organ-bot-b img {
        margin-left: -2px;
        border-top-left-radius: var(--BorderRad-2);
        border-bottom-left-radius: var(--BorderRad-2);
        mask-image: linear-gradient(90deg, var(--Grape) 0%, transparent 90%);
    }
    .organ-btn:nth-of-type(even) h2 {
        text-align: right;
        margin-right: 15px;
    }
    .pg-homepage .organ-btn:nth-of-type(odd),
    .pg-homepage .organ-btn:nth-of-type(even) {
        border-right: 25px solid var(--Grape);
        border-left: 25px solid var(--LemonJuice);
    }
    .organ-btn h2 {
        padding: 0px 0px 3px 0px;
    }
    .organ-top img {
        height: 60px;
    }
    .organ-btn:nth-of-type(even) .organ-top {
        flex-direction: row;
    }
    .organ-btn:nth-of-type(even) .organ-top img,
        .organ-btn:nth-of-type(odd) .organ-top img {
        margin-left: 0px;
        margin-right: 10px;
    }

    /* NAVBAR */
    .navbar {
        z-index: 100;
        padding-left: 45px;
    }
    .navbar ul {
        justify-content: left;
        overflow-x: scroll;
        scrollbar-width: none;
        padding-left: 8px;
        mask-image: linear-gradient(90deg, transparent 0%, var(--Grape) 10%, var(--Grape) 70%, transparent 100%);
    }
    .navbar li:first-of-type {
        padding-left: 5px;
    }
    .navbar li:last-of-type {
        padding-right: 15px;
    }
    .navbar::-webkit-scrollbar {
        display: none;
    }
    .navbar .logo-space {
        display: none;
    }
    /* Logo */
    .navbar .logo-mobile {
        display: block;
        top: 5px;
        left: 7px;
        width: 45px;
    }
    .navbar .logo-mobile img {
        height: 45px;
    }

    /* GALLERY */
    .gal-grid {
        grid-template-columns: 1fr 1fr;
    }
    .gal-filters {
        padding: 0px;
        flex-direction: column;
    }
    .gal-filters .filter-btn {
        width: 90%;
    }
    .gal-filters .toggle-graphic {
        width: 100%;
    }
    dialog {
        width: 100%;
        max-width: 100%;
        margin: 20px 0px;
        max-height: 95%;
    }
    dialog p {
        padding: 0px 0px;
    }
    .gal-grid .gal-item {
        width: calc((100% / 2) - 10px);
        height: calc((100% / 2) - 10px);
    }

    /* ABOUT */
    .pg-about .about-skills ul {
        column-count: 2;
        column-gap: 20px;
    }

    /* CARDS */
    .card-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* WRITING */
    .main-body a.proj-link {
        width: calc((100% / 2) - 10px);
        height: calc((100% / 2) - 10px);
    }
    .proj-item .gal-item {
        width: 100%;
    }
}
@media only screen and (max-width: 425px) {
    .main-body {
        width: 100%;
        margin: 80px 0px 0px 0px;
    }
    body {
        margin: 0px;
    }
    .panel {
        border-left: 0px;
        border-right: 0px;
    }
    .panel:last-of-type {
        margin-bottom: 0px;
    }
    /* HOMEPAGE */
    .organ-btn:nth-of-type(odd):hover .organ-bot img {
        object-position: 50% 50%;
    }
    .organ-btn:nth-of-type(even):hover .organ-bot img {
        object-position: 50% 50%;
    }
    /* GALLERY */
    .gal-grid {
        grid-template-columns: 1fr;
    }
    .gal-grid .gal-item {
        width: 100%;
        height: 100%;
    }

    /* ABOUT */
    .pg-about .about-skills ul {
        column-count: 1;
        column-gap: 20px;
    }

    /* CARDS */
    .card-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    /* REVIEWS */
    .card-item.review {
        height: fit-content;
        aspect-ratio: auto;
    }
    .card-item.review p {
        margin: 0px;
    }

    /* WRITING */
    .main-body a.proj-link {
        width: 100%;
        height: 100%;
    }


}