/* ========= General ========= */

@font-face {
    font-family: "Quicksand";
    src: url("/Quicksand-VariableFont_wght.ttf");
}

:root {
    color-scheme: light;
    --bg: white;
    --text: black;
    --shadow: #505050;
    --boxBg: #f4f4f4;
}
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --bg: black;
        --text: white;
        --shadow: #c0c0c0;
        --boxBg: #242424;
    }
}

html {
    background-color: var(--bg);
    color: var(--text);
}

body {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 600px;
    height: 100vh;
    margin: 0;
    overflow-x: hidden;
    font-family: Quicksand, sans-serif;
}

main {
    flex: 1;
}

a {
    color: var(--text);
    transition: color 0.75s;
}
@media (hover: hover) {
    a:hover {
        color: var(--shadow);
    }
}
@media (hover: none) {
    a:active {
        transition: unset;
        color: var(--shadow);
    }
}
button {
    -webkit-tap-highlight-color: transparent;
}
button:hover {
    cursor: pointer;
}

p {
    font-size: 1em;
}

footer {
    margin-top: 2em;
    padding-bottom: 14px;
    font-size: 0.6em;
    text-align: center;
}

.srOnly {
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}

/* ========= Home Page ========= */

#void {
    position: absolute;
    z-index: 10;
    left: 50%;
    top: max(300px, 50svh);
    height: 200px;
    width: 200px;
    margin: -100px 0 0 -100px;
    padding: 4px;
    border-radius: 50%;
    border: none;
    background-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}
#void svg {
    fill: var(--bg);
    stroke: var(--text);
    stroke-width: 2;
}
#bgCircle {
    position: absolute;
    z-index: 9;
    left: 50%;
    top: max(300px, 50svh);
    height: 220px;
    width: 200px;
    margin: -110px 0 0 -100px;
    fill: var(--shadow);
    opacity: 0;
    transition: opacity 0.8s;
}

@media (hover: hover) {
    #void:hover + #bgCircle {
        opacity: 80;
    }
}

#content:not(.exploded) {
    user-select: none;
    -webkit-user-select: none;
}

.mainNav {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 20px;
    appearance: none;
    padding: 4px;
    border: none;
    border-bottom: solid transparent;
    background-color: transparent;
    text-decoration: none;
    color: var(--text);
    font-family: Quicksand, sans-serif;
    font-size: 34px;
    z-index: 5;
    transition: transform 1s ease-in-out, scale 1s ease-in-out, border 0.75s;
}
#aboutButton,
#contactButton {
    flex-direction: column;
    gap: 8px;
}
a.mainNav,
button.mainNav {
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    margin: 0;
}
a.mainNav {
    text-decoration: none;
}
button.mainNav {
    appearance: none;
}
.mainNav span {
    border-bottom: solid transparent;
}
#testTile1 {
    width: 90px;
}
#testTile2 {
    width: 80px;
}
#testTile3 {
    width: 84px;
}
#testTile4 {
    width: 90px;
}
#testTile5 {
    width: 90px;
}
#testTile6 {
    width: 82px;
}

@media (hover: hover) {
    a.mainNav:hover span,
    button.mainNav:hover span {
        color: var(--text);
        border-bottom: solid var(--shadow);
    }
}
@media (hover: none) {
    a.mainNav:hover span,
    button.mainNav:hover span {
        color: var(--text);
    }
    a.mainNav:active span,
    button.mainNav:active span {
        transition: transform 1s ease-in-out, scale 1s ease-in-out;
        border-bottom: solid var(--shadow);
    }
}

.mainNav {
    transform: translate(calc(50vw - 50%), calc(max(300px, 50svh) - 50%))
        scale(0%);
}
main.exploded #aboutButton {
    transform: translate(25vw, max(108px, 18svh)) scale(100%);
}
main.exploded #textButton {
    transform: translate(13vw, max(270px, 45svh)) scale(100%);
}
main.exploded #contactButton {
    transform: translate(29vw, max(408px, 68svh)) scale(100%);
}
main.exploded #workButton {
    transform: translate(61vw, max(114px, 19svh)) scale(100%);
}
main.exploded #storeButton {
    transform: translate(71vw, max(288px, 48svh)) scale(100%);
}
main.exploded #cvButton {
    transform: translate(60vw, max(432px, 72svh)) scale(100%);
}

.card {
    position: absolute;
    z-index: 15;
    border-radius: 20px;
    background: var(--boxBg);
}
main:not(.exploded) .card {
    z-index: 5;
}
.scrollBox {
    padding-right: 22px;
    overflow: auto;
}

#about {
    width: calc(75vw - 170px);
    max-width: 535px;
    padding: 20px 0 20px 20px;
    transform: translate(
            calc(25vw + 51px - 50%),
            calc(max(108px, 18svh) + 36px - 50%)
        )
        scale(0%);
    transition: transform 1s ease-in-out, scale 1s ease-in-out;
}
#about .scrollBox {
    max-height: max(480px, calc(89svh - 54px));
}
#about.shown {
    transform: translate(calc(25vw + 125px), max(66px, 11svh)) scale(100%);
}
main:not(.exploded) #about.shown {
    transform: translate(calc(50vw - 50%), calc(max(300px, 50svh) - 50%))
        scale(0%);
}
#about p:first-of-type {
    margin-top: 0;
}
#about p:last-of-type {
    margin-bottom: 0;
}

#contact {
    max-width: calc(76vw - 155px);
    padding: 12px 42px;
    transform: translate(
            calc(29vw + 66px - 50%),
            calc(max(408px, 68svh) + 46px - 50%)
        )
        scale(0%);
    transition: transform 0.8s ease-in-out, scale 0.8s ease-in-out;
}
#contact.shown {
    transform: translate(calc(29vw + 122px), max(342px, 57svh)) scale(100%);
}
main:not(.exploded) #contact.shown {
    transform: translate(calc(50vw - 50%), calc(max(300px, 50svh) - 50%))
        scale(0%);
}
#contact p {
    display: flex;
    flex-wrap: wrap;
}
#contact span {
    flex: 2;
    padding-right: 1.25em;
}
#contact a {
    flex: 3;
    color: var(--text);
}
#contact a:hover {
    color: var(--shadow);
}

#cv {
    right: 0;
    bottom: 0;
    width: calc(100% - 10vw - 20px);
    max-width: 839px;
    padding: 20px 0 20px 20px;
    transform: translate(
            calc(-40vw + 49px + 50%),
            calc(min(-168px, -28svh) + 38px + 50%)
        )
        scale(0%);
    transition: transform 1s ease-in-out, scale 1s ease-in-out;
}
#cv .scrollBox {
    max-height: calc(max(432px, 72svh) - 70px);
}
#cv.shown {
    transform: translate(-5vw, calc(min(-168px, -28svh) - 18px)) scale(100%);
}
main:not(.exploded) #cv.shown {
    transform: translate(calc(-50vw + 50%), calc(min(-300px, -50svh) + 50%))
        scale(0%);
}
#cv h3 {
    margin-top: 1.6em;
}
#cv h3:first-of-type {
    margin-top: calc(1.6em - 20px);
}
#cv p {
    display: flex;
}
#cv span:first-of-type {
    width: 135px;
}
#cv span:last-of-type {
    flex: 1;
}

@media screen and (max-width: 800px) {
    #void {
        height: 180px;
        width: 180px;
        margin: -90px 0 0 -90px;
    }
    #bgCircle {
        height: 200px;
        width: 180px;
        margin: -100px 0 0 -90px;
    }

    .mainNav {
        font-size: 32px;
    }

    #about {
        transform: translate(
                calc(25vw + 49px - 50%),
                calc(max(108px, 18svh) + 36px - 50%)
            )
            scale(0%);
    }
    #contact {
        transform: translate(
                calc(29vw + 62px - 50%),
                calc(max(408px, 68svh) + 46px - 50%)
            )
            scale(0%);
    }
}

@media screen and (max-width: 750px) {
    #textButton,
    #storeButton {
        flex-direction: column;
        gap: 8px;
    }
    main.exploded #textButton {
        transform: translate(14vw, max(258px, 43svh)) scale(100%);
    }
    main.exploded #storeButton {
        transform: translate(72vw, max(252px, 42svh)) scale(100%);
    }
}

@media screen and (max-width: 600px) {
    #void {
        top: max(270px, 45svh);
        height: 150px;
        width: 150px;
        margin: -75px 0 0 -75px;
    }
    #bgCircle {
        top: max(270px, 45svh);
        height: 170px;
        width: 150px;
        margin: -85px 0 0 -75px;
    }

    .mainNav {
        font-size: 30px;
        transform: translate(calc(50vw - 50%), calc(max(270px, 45svh) - 50%))
            scale(0%);
    }
    #cvButton,
    #textButton,
    #workButton {
        flex-direction: column;
        gap: 8px;
    }
    #testTile1 {
        width: 80px;
    }
    #testTile2 {
        width: 70px;
    }
    #testTile3 {
        width: 74px;
    }
    #testTile4 {
        width: 80px;
    }
    #testTile5 {
        width: 80px;
    }
    #testTile6 {
        width: 72px;
    }

    main.exploded #aboutButton {
        transform: translate(9vw, max(150px, 25svh)) scale(100%);
    }
    main.exploded #textButton {
        transform: translate(15vw, max(306px, 51svh)) scale(100%);
    }
    main.exploded #contactButton {
        transform: translate(34vw, max(402px, 67svh)) scale(100%);
    }
    main.exploded #workButton {
        transform: translate(45vw, max(72px, 12svh)) scale(100%);
    }
    main.exploded #storeButton {
        transform: translate(74vw, max(186px, 31svh)) scale(100%);
    }
    main.exploded #cvButton {
        transform: translate(65vw, max(330px, 55svh)) scale(100%);
    }

    #about {
        width: calc(90vw - 20px);
        transform: translate(
                calc(9vw + 45px - 50%),
                calc(max(150px, 25svh) + 33px - 50%)
            )
            scale(0%);
    }
    #about .scrollBox {
        max-height: calc(max(444px, 74svh) - 170px);
    }
    #about.shown {
        transform: translate(5vw, calc(max(156px, 26svh) + 116px)) scale(100%);
    }
    main:not(.exploded) #about.shown {
        transform: translate(calc(50vw - 50%), calc(max(270px, 45svh) - 50%))
            scale(0%);
    }

    #contact {
        padding: 12px 28px;
        transform: translate(
                calc(34vw + 59px - 50%),
                calc(max(402px, 67svh) + 41px - 50%)
            )
            scale(0%);
    }
    #contact.shown {
        max-width: calc(82vw - 61px);
        transform: translate(12vw, calc(max(402px, 67svh) - 124px)) scale(100%);
    }
    main:not(.exploded) #contact.shown {
        transform: translate(calc(50vw - 50%), calc(max(270px, 45svh) - 50%))
            scale(0%);
    }

    #cv {
        bottom: unset;
        transform: translate(
                calc(-35vw + 44px + 50%),
                calc(max(330px, 55svh) + 35px - 50%)
            )
            scale(0%);
    }
    #cv .scrollBox {
        height: calc(max(318px, 53svh) - 52px);
    }
    #cv.shown {
        transform: translate(-5vw, max(12px, 2svh)) scale(100%);
    }
    main:not(.exploded) #cv.shown {
        transform: translate(calc(-50vw + 50%), calc(max(270px, 45svh) - 50%))
            scale(0%);
    }
    #cv span:first-of-type {
        width: 95px;
    }
}

@media screen and (max-width: 450px) {
    .mainNav {
        font-size: 28px;
    }
    #testTile1 {
        width: 70px;
    }
    #testTile2 {
        width: 60px;
    }
    #testTile3 {
        width: 64px;
    }
    #testTile4 {
        width: 70px;
    }
    #testTile5 {
        width: 70px;
    }
    #testTile6 {
        width: 62px;
    }

    #about {
        transform: translate(
                calc(9vw + 43px - 50%),
                calc(max(150px, 25svh) + 29px - 50%)
            )
            scale(0%);
    }
    #about .scrollBox {
        max-height: calc(max(450px, 75svh) - 154px);
    }
    #about.shown {
        transform: translate(5vw, calc(max(156px, 26svh) + 100px)) scale(100%);
    }
    #contact {
        transform: translate(
                calc(34vw + 55px - 50%),
                calc(max(402px, 67svh) + 35px - 50%)
            )
            scale(0%);
    }
    #cv {
        transform: translate(
                calc(-35vw + 39px + 50%),
                calc(max(330px, 55svh) + 31px - 50%)
            )
            scale(0%);
    }
}

@media screen and (max-width: 400px) {
    #void {
        height: 134px;
        width: 134px;
        margin: -67px 0 0 -67px;
    }
    #bgCircle {
        height: 154px;
        width: 134px;
        margin: -77px 0 0 -67px;
    }
    .mainNav {
        font-size: 26px;
    }
    #testTile1 {
        width: 60px;
    }
    #testTile2 {
        width: 50px;
    }
    #testTile3 {
        width: 54px;
    }
    #testTile4 {
        width: 60px;
    }
    #testTile5 {
        width: 60px;
    }
    #testTile6 {
        width: 52px;
    }

    #about {
        width: calc(96vw - 20px);
        transform: translate(
                calc(9vw + 40px - 50%),
                calc(max(150px, 25svh) + 26px - 50%)
            )
            scale(0%);
    }
    #about .scrollBox {
        max-height: calc(max(450px, 75svh) - 148px);
    }
    #about.shown {
        transform: translate(2vw, calc(max(150px, 25svh) + 94px)) scale(100%);
    }
    main:not(.exploded) #about.shown {
        transform: translate(calc(50vw - 50%), calc(max(270px, 45svh) - 50%))
            scale(0%);
    }

    #contact {
        transform: translate(
                calc(34vw + 51px - 50%),
                calc(max(402px, 67svh) + 31px - 50%)
            )
            scale(0%);
    }
    #contact.shown {
        max-width: calc(94vw - 61px);
        transform: translate(6vw, calc(max(402px, 67svh) - 124px)) scale(100%);
    }
    main:not(.exploded) #contact.shown {
        transform: translate(calc(50vw - 50%), calc(max(270px, 45svh) - 50%))
            scale(0%);
    }

    #cv {
        width: calc(96vw - 20px);
        transform: translate(
                calc(-35vw + 34px + 50%),
                calc(max(330px, 55svh) + 27px - 50%)
            )
            scale(0%);
    }
    #cv .scrollBox {
        height: calc(max(318px, 53svh) - 48px);
    }
    #cv.shown {
        transform: translate(-2vw, max(12px, 2svh)) scale(100%);
    }
    main:not(.exploded) #cv.shown {
        transform: translate(calc(-50vw + 50%), calc(max(270px, 45svh) - 50%))
            scale(0%);
    }
    #cv span:first-of-type {
        width: 95px;
    }
}

@media screen and (max-width: 350px) {
    .mainNav {
        font-size: 24px;
    }
    #testTile1 {
        width: 55px;
    }
    #testTile2 {
        width: 45px;
    }
    #testTile3 {
        width: 49px;
    }
    #testTile4 {
        width: 55px;
    }
    #testTile5 {
        width: 55px;
    }
    #testTile6 {
        width: 47px;
    }

    #about {
        transform: translate(
                calc(9vw + 38px - 50%),
                calc(max(150px, 25svh) + 24px - 50%)
            )
            scale(0%);
    }
    #about .scrollBox {
        max-height: calc(max(450px, 75svh) - 142px);
    }
    #about.shown {
        transform: translate(2vw, calc(max(150px, 25svh) + 88px)) scale(100%);
    }
    #contact {
        transform: translate(
                calc(34vw + 48px - 50%),
                calc(max(402px, 67svh) + 28px - 50%)
            )
            scale(0%);
    }
    #cv {
        transform: translate(
                calc(-35vw + 32px + 50%),
                calc(max(330px, 55svh) + 25px - 50%)
            )
            scale(0%);
    }
}

@media (prefers-reduced-motion: reduce) {
    a {
        transition: unset;
    }
    #bgCircle {
        transition: none;
    }
    .mainNav {
        transition: none;
    }
    a.mainNav:active span,
    button.mainNav:active span {
        transition: none;
    }
    #about,
    #contact,
    #cv {
        transition: none;
    }
}

/* ========= Works Page ========= */

.noScroll {
    overflow: hidden;
}

.logo {
    margin: 15px 0 3px;
}
.logo a {
    display: block;
    width: max-content;
    margin: 0 auto;
    border-bottom: solid transparent;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: border 0.75s;
}
@media (hover: hover) {
    .logo a:hover {
        color: var(--text);
        border-bottom: solid var(--shadow);
    }
}
@media (hover: none) {
    .logo a:hover {
        color: var(--text);
    }
    .logo a:active {
        transition: unset;
        border-bottom: solid var(--shadow);
    }
}

.logo svg {
    display: inline-block;
    height: 36px;
    width: 36px;
    padding-right: 6px;
    fill: var(--bg);
    stroke: var(--text);
    stroke-width: 4;
}
.logo h1 {
    display: inline-block;
    overflow: hidden;
    margin: 0;
    font-size: 30px;
    font-weight: normal;
}

#workList {
    max-width: 1200px;
    margin: 0 auto;
}

#workList div p span {
    display: block;
}
#workList div p span:first-child {
    width: auto;
    margin-bottom: 1em;
}

.workRow {
    display: flex;
    flex-wrap: wrap;
    margin: 1em;
    padding-bottom: 1em;
    border-bottom: solid 1px var(--text);
}
.headerRow {
    margin-top: 5px;
}
.headerRow :first-child {
    flex: none;
    width: 180px;
}
.thumbnail {
    flex: none;
    width: 200px;
    padding: 0;
    border: none;
    background: none;
    line-height: 0;
}
.thumbnail img {
    width: 100%;
}

.enlargedImage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 10;
    display: none;
    justify-content: center;
    align-items: center;
}
[aria-expanded="true"] + .enlargedImage {
    display: flex;
}
.imageContainer {
    position: relative;
    display: flex;
    align-items: flex-start;
    max-width: 100%;
    padding: 0 50px;
}
.enlargedImage img {
    max-width: 100%;
    max-height: 92vh;
    width: auto;
    height: auto;
    object-fit: contain;
}
.closeButton {
    position: absolute;
    top: 0;
    right: 0;
    margin: -0.3em 0 0 0; /* Negative margin to align top of × with image */
    padding: 0;
    width: 50px;
    color: whitesmoke;
    font-size: 30px;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}
.closeButton:active {
    color: var(--shadow);
}

.workRow p {
    flex: 1;
    padding: 0 10px;
    text-align: center;
}

@media screen and (max-width: 600px) {
    .imageContainer {
        padding: 0 58px 0 42px;
    }
    .closeButton {
        right: 8px;
    }
}

@media screen and (max-width: 450px) {
    #workList {
        max-width: 1200px;
        margin: 0 auto;
    }

    #workList div p span {
        display: block;
    }
    #workList div p span:first-child {
        width: auto;
        margin-bottom: 1em;
    }

    .workRow {
        margin: 1em 12px;
        padding-bottom: 0.5em;
    }
    .workRow:first-child {
        display: none;
    }
    .workRow:nth-child(2) {
        margin-top: 0.5em;
        padding-top: 1em;
        border-top: solid 1px var(--text);
    }
    .workRow > button {
        width: 50%;
    }
    .workRow p {
        min-width: calc(50% - 20px);
    }

    .imageContainer {
        padding: 0 40px 0 20px;
    }
    .enlargedImage img {
        max-height: 95svh;
    }
    .closeButton {
        right: 2px;
        width: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo a {
        transition: unset;
    }
}

/* ========= Text Page ========= */

article {
    width: 80vw;
    max-width: 900px;
    margin: 30px auto;
}
h2 {
    font-weight: 500;
}
@media screen and (max-width: 450px) {
    article {
        width: 85vw;
    }
}