@import url('https://fonts.googleapis.com/css2?family=Handjet:wght@100..900&family=Space+Grotesk:wght@300..700&display=swap');

* {
    font-family: "Space Grotesk";
    margin: 0;
}

:root {
    --background: #d4c7de;
    --surface: #ffffff;
    --text: #17131a;
    --primary: #914bd3;
    --primary-text: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #17131c;
        --surface: #24202a;
        --text: #f3edf7;
        --primary: #a96be3;
        --primary-text: #ffffff;
    }
}

body {
    background-color: var(--background);
    color: var(--text);
    overflow-x: hidden;
}

/* =========================
   HEADER
========================= */

#header {
    min-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;

    position: relative;
    /* padding: 2rem; */
}

#header h1 {
    font-size: clamp(3rem, 8vw, 10vh);
    line-height: 1;
}

#header h3 {
    margin-top: .5rem;
    font-size: clamp(1.4rem, 4vw, 5vh);
}

/* =========================
   HANGING IMAGES
========================= */

#hanging {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hanging-photo {
    position: absolute;
    width: clamp(180px, 25vw, 420px);
    z-index: -1;
}

/* Desktop */

#pipeOrganHanging {
    top: 8vh;
    left: 4vw;
    animation-delay: 0s;
}

#rotaryDialHanging {
    top: -12vh;
    right: 5vw;
    animation-delay: -.5s;
}

#musicBoxHanging {
    top: 45vh;
    right: 2vw;
    animation-delay: -1s;
}

/* #header {
    height: 90vh;
    display: flex;
    justify-content: center;
    /* horizontal */
align-items: center;
/* vertical */
flex-direction: column;
/* stack vertically */
}

#header h1 {
    font-size: 10vh;
}

#header h3 {
    font-size: 5vh;
}

#name {
    position: relative;
}

.hanging-photo {
    position: absolute;
    width: 30vw;
    z-index: -1;
}

#pipeOrganHanging {
    top: 0vh;
    left: 2.5vw;
    animation-delay: 0s;
}

#rotaryDialHanging {
    top: -30vh;
    right: 2.5vw;
    animation-delay: -0.5s;
}

#musicBoxHanging {
    top: 5vh;
    right: 0vw;
    animation-delay: -1s;
}

#scrollHint {
    height: 10vh;
    display: flex;
    justify-content: center;
    /* horizontal */
    align-items: center;
    /* vertical */
    flex-direction: column;
    /* stack vertically */
    background-color: var(--primary);
    color: var(--primary-text);
}

#scrollHint h4 {
    font-size: 4vh;
}

#about {
    padding: 5vw;
    background-color: var(--surface);
}

#about p {
    font-size: larger;
}

.photo-strip {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    /* spacing between images */
    padding-top: 10px;
    padding-bottom: 10px;
    scroll-behavior: smooth;
    /* optional */
    white-space: nowrap;
    /* prevents wrapping */
}

.photo-strip img {
    height: 30vh;
    /* the unified height */
    object-fit: cover;
    /* crops nicely while preserving aspect */
    flex-shrink: 0;
    /* prevents images from shrinking */
}

#projects {
    column-count: 4;
    column-gap: 1rem;
    padding: 1rem;
}

.project {
    background: var(--surface);
    margin-bottom: 1rem;
    padding: 1rem;
    break-inside: avoid;
}

.project img {
    width: 100%;
    display: block;
    margin-bottom: 1rem;
}

.project .button {
    display: block;
    margin-top: 1rem;
    text-align: center;
}

.button {
    border: none;
    background-color: var(--primary);
    padding: 1rem;
    color: var(--primary-text);
}

.rock {
    display: inline-block;
    transform-origin: center;
    /* make sure rotation is around the center */
    animation: rock 1.5s ease-in-out infinite alternate;
}

@keyframes rock {
    from {
        transform: rotate(-10deg);
    }

    to {
        transform: rotate(10deg);
    }
}

.scale {
    display: inline-block;
    animation: scalePulse 1.5s ease-in-out infinite;
}

@keyframes scalePulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
        /* scale up */
    }

    100% {
        transform: scale(1);
        /* back to normal */
    }
}

@media (max-width: 1000px) {
    #projects {
        column-count: 2;
    }

    .hanging-photo {
        position: absolute;
        width: 50vw;
        z-index: -1;
    }

    #pipeOrganHanging {
        top: 35vh;
        left: 25vw;
        animation-delay: 0s;
    }

    #rotaryDialHanging {
        top: -20vh;
        right: 15vw;
        animation-delay: -0.5s;
    }

    #musicBoxHanging {
        top: -15vh;
        right: 30vw;
        animation-delay: -1s;
    }

    #header {
        height: 80vh;
        display: flex;
        justify-content: center;
        /* horizontal */
        align-items: center;
        /* vertical */
        flex-direction: column;
        /* stack vertically */
    }


    #header h1 {
        font-size: 10vw;
    }

    #header h3 {
        font-size: 5vw;
    }

    #scrollHint h4 {
        font-size: 3vh;
    }
}

@media (max-width: 700px) {
    #header {
        min-height: 70vh;
    }

    #projects {
        column-count: 1;
    }
    
    #scrollHint h4 {
        font-size: 2vh;
    }
}