html, body{
    padding: 0px;
    margin: 0px;
    overflow-x: hidden;
    background-color: #FFACC8;
    font-size: 16px;
}
@font-face {
    font-family: "human";
    src: url('fonts/human.ttf');
}
@font-face {
    font-family: "techmono";
    src: url('fonts/ShareTechMono-Regular.ttf');
}
header{
    padding-top: 1rem;
    text-align: center;
    z-index: 5;
    background-color: transparent; 
    position: relative; 
}
header div a{
    color: black;
    text-align: center;
    text-decoration: none;
    font-size: 7vw;
    font-family: "human";
}
nav {
    margin-top: 2vh;
    z-index: 3;
    position: relative;
}
nav a {
    color: black;
    text-align: center;
    text-decoration: none;
    font-size: 5vw;
    font-family: "human";
    padding: 0.5rem .7rem;
}
.color-blocks {
    display: grid;
    position: absolute;
    background-color: white; 
    top: 0; 
    left: 0;
    width: 100%;
    grid-template-columns: repeat(7, 1fr);
    z-index: 1;
    overflow-x: hidden;
}

.color-blocks div{
    aspect-ratio: 1 / 1; 
    border: 0.05rem solid black; 
    background-color: white;
}
.block1 { background-color: #E8A2BD; }
.block5 { background-color: #5CA46E; }
.block9 { background-color: #5B7FAF; }
.block14, .block24 { background-color: #EDBD30; }
.block20, .block43 { background-color: #DF662C; }
.block33 { background-color: #E8A2BD; }
.block39 { background-color: #5CA46E; }
.block42 { background-color: #5B7FAF; }

.hydrant img{
    position: absolute;
    top: 2.5rem; 
    left: -3rem; 
    z-index: 3;
    width: 70%; 
}
.albums {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 120%;
}

.album {
    position: relative;
    margin-top: -13rem; /* Reduced margin to bring albums closer together */
    transition: transform 0.3s ease, z-index 0.3s ease;
    z-index: 5;
}
.album img {
    width: 100vw;
    cursor: pointer;
}
.album .listen-button {
    display: none;
    position: absolute;
    bottom: 27%;
    left: 80%;
    transform: translateX(-50%);
    color: #fff;
    text-decoration: none;
    font-family: "human";
    font-size: 4vw;
    white-space: nowrap;
}
#chroma .listen-button{
    bottom: 27%;
    left: 84%; 
    color: #DBD7CD;
}
#chroma .listen-button:hover{
    color: #1A1A19;
}
#igor .listen-button{
    bottom: 21%;
    left: 84%; 
}
#igor .listen-button:hover{
    color: #433F3D;
}
#flower-boy .listen-button{
    bottom: 25%;
    left: 77%;
    color: #F9F5E7;
}
#flower-boy .listen-button:hover{
    color: #DA3E36;
}
#call-me .listen-button{
    bottom: 30%;
    left: 30%;
    color: #F9F5E7;
}
#call-me .listen-button:hover{
    color: #104044;
}
#wolf .listen-button{
    bottom: 30%;
    left: 30%;
    color: #F9F5E7;
}
#wolf .listen-button:hover{
    color: #AD4137;
}
#goblin .listen-button{
    bottom: 22%;
    left: 84%; 
    color: #F9F5E7;
}
#goblin .listen-button:hover{
    color: #433432;
}
#cherry .listen-button{
    bottom: 15%;
    left: 19.75%; 
    color: #B93B4B;
}
#cherry .listen-button:hover{
    color: #433432;
}
.album.expanded .listen-button {
    display: block;
}

.album:hover {
    transform: translateY(-0.5rem); /* Reduced hover effect to make movement subtler */
}

.album.expanded {
    transform: translateY(-8rem); /* Reduced slide out effect on click */
}
.album#wolf.expanded {
    transform: translateY(-7rem); /* Reduced slide out effect on click */
} 
.album#cherry.expanded {
    transform: translateY(0rem); /* Reduced slide out effect on click */
} 
        #chroma {
            clip-path: polygon(0 13%, 15% 20%, 22% 22%, 50% 5%, 73% 3%, 100% 2%, 100% 100%, 0 100%);
        }
        #igor {
            clip-path: polygon(0 14%, 15% 10%, 36% 8%, 55% 11%, 75% 14%, 100% 11%, 100% 100%, 0 100%);
        }

        #flower-boy {
            clip-path: polygon(0 8%, 16% 2%, 34% 8%, 55% 13%, 78% 9%, 100% 17%, 100% 100%, 0 100%);
        }

        #call-me {
            clip-path: polygon(0 10%, 15% 9%, 34% 10%, 55% 10%, 78% 8%, 100% 0, 100% 100%, 0 100%);
        }

        #wolf {
            clip-path: polygon(21% 18%, 43% 8%, 64% 7%, 80% 8%, 91% 4%, 100% 8%, 100% 100%, 0 100%, 0 10%);
        }

        #goblin {
            clip-path: polygon(0 13%, 15% 20%, 25% 22%, 51% 4%, 73% 3%, 100% 2%, 100% 100%, 0 100%);
        }

        #cherry {
            clip-path: polygon(0 14%, 15% 10%, 36% 8%, 55% 11%, 75% 14%, 100% 11%, 100% 100%, 0 100%);
        }
footer {
    background-color: #FFACC8; /* Light background color to make it distinct */
    color: black;
    text-align: center;
    padding: 1.5rem .5rem;
    left: -0.5rem;
    position: relative;
    width: 100%;
    z-index: 3; /* Keep it above color blocks */
    font-family: "techmono";
}

footer p {
    margin: 0;
    font-size: .7rem;
}
.social-links{
    padding-bottom: 1rem;
}
.social-links a {
    color: black;
    font-family: "techmono";
    text-decoration: none;
    font-size: 1.2rem;
    padding: 0 0.5rem;
    transition: color 0.3s ease; /* Adds a transition effect to link hover */
}

.social-links a:hover {
    color: white; /* Change color on hover to indicate links are clickable */
}

@media (min-width: 768px) {
    header div a{
        font-size: 8vw;
    }
    header div{
        padding-top: 1.8rem;
    }
    nav {
        margin-top: 2vh;
        z-index: 3;
        position: relative;
    }
    nav a {
        color: black;
        text-align: center;
        text-decoration: none;
        font-size: 6vw;
        font-family: "human";
        padding: 1.5rem .7rem;
    }
    .color-blocks {
        grid-template-columns: repeat(7, 1fr);
    }
    .hydrant img {
        width: 75vw;
        max-width: 90vw;
        top: 4vh;
        left: -18vw;
    }
    .albums {
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 90vh;
    }
    .album {
        position: relative;
        margin-top: -40vh; /* Reduced margin to bring albums closer together */
        transition: transform 0.3s ease, z-index 0.3s ease;
        z-index: 5;
    }
    .album.expanded {
        transform: translateY(-25vh); /* Reduced slide out effect on click */
    } 
    .album#wolf.expanded {
        transform: translateY(-25vh); /* Reduced slide out effect on click */
    } 
}
@media (min-width: 850px) {
    
}
@media (min-width: 1024px) {
    html, body {
        width: 100%;
        margin: 0;
        overflow-x: hidden;
    }
    header {
        flex-direction: row;
        text-align: left;
        justify-content: space-between;
        z-index: 3;
    }
    header div a {
        position: relative;
        text-align: left; /* Align 'Tyler, The Creator' to the left */
        font-size: 3vw; /* Adjust font size for larger screens */
        left: 4.5vw;
        top: -2.2vw;
        transition: transform 0.3s ease; /* Adds smooth transition effect for growing/shrinking */
    }

    header div a:hover {
        transform: scale(1.2); /* Increase size by 20% on hover */
    }

    nav {
        flex: 1;
        justify-content: flex-end; /* Align nav links to the right */
    }

    nav a {
        font-size: 2vw; /* Adjust font size for nav links */
        float: right;
        position: relative;
        top: -5.5rem;
        right: 2.5vw;
        transition: transform 0.3s ease;
    }
    nav a:hover {
        transform: scale(1.2); /* Makes the link grow by 20% when hovered */
    }

    .color-blocks {
        display: grid;
        position: absolute; 
        top: 0; 
        left: 0;
        width: 100vw;
        grid-template-columns: repeat(13, 1fr);
        z-index: 2;
        overflow-x: hidden;    
    }
.color-blocks .block {
    pointer-events: none; /* Disable pointer events for blocks */
}

/* Enable pointer events only on hover to allow the color change */
.color-blocks .block:hover {
    pointer-events: auto;
}
    .color-blocks div {
        transition: background-color 1s ease-out 0.5s;
    }
.pink:hover {
    aspect-ratio: 1 / 1; 
    background-color: #E8A2BD;
    border: 0.5px solid black;
    transition: none; /* No transition for hovering in */
}
.pink {
     background-color: white;
}
.blue:hover {
    aspect-ratio: 1 / 1; 
    background-color: #5B7FAF;
    border: 0.5px solid black;
    transition: none; 
}
.blue {
     background-color: white;
}
.orange:hover {
    aspect-ratio: 1 / 1; 
    background-color: #DF662C;
    border: 0.5px solid black;
    transition: none; 
}
.orange {
     background-color: white;
}
.green:hover {
    aspect-ratio: 1 / 1; 
    background-color: #5CA46E;
    border: 0.5px solid black;
    transition: none; 
}
.green {
     background-color: white;
}
.yellow:hover {
    aspect-ratio: 1 / 1; 
    background-color: #EDBD30;
    border: 0.5px solid black;
    transition: none; 
}
.yellow {
     background-color: white;
}
.block1 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block5 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block9 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block14 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block20 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block24 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block33 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block39 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block42 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block43 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
    .hydrant img {
        width: 40vw;
        max-width: 90vw;
        top: 0;
        left: -6.5vw;
        pointer-events: none;
    }
    .album img {
        width: 100vw;
        cursor: pointer;
        pointer-events: none;
    }
    .albums {
        margin-top: 35vh;
    }
    .album {
        position: relative;
        margin-top: -60vw; /* Reduced margin to bring albums closer together */
        transition: transform 0.3s ease, z-index 0.3s ease;
        z-index: 3;
    } 
    .album:hover {
        transform: translateY(-20px); /* Reduced hover effect to make movement subtler */
    }
    .album:hover img {
        pointer-events: auto; /* Enable interaction with album image only when hovering over the album */
    }

    .album.expanded {
        transform: translateY(-60vh); /* Reduced slide out effect on click */
    }
    .album#goblin.expanded {
        transform: translateY(-55vh); /* Reduced slide out effect on click */
    } 
    .album#flower-boy.expanded {
        transform: translateY(-62vh); /* Reduced slide out effect on click */
    } 
    .album#igor.expanded {
        transform: translateY(-55vh); /* Reduced slide out effect on click */
    } 
    .album#wolf.expanded {
        transform: translateY(-50vh); /* Reduced slide out effect on click */
    } 
}

@media (min-width: 1220px) {
    html, body {
        width: 100%;
        margin: 0;
        overflow-x: hidden;
    }
    header {
        flex-direction: row;
        text-align: left;
        justify-content: space-between;
        z-index: 3;
    }
    header div a {
        position: relative;
        text-align: left; /* Align 'Tyler, The Creator' to the left */
        font-size: 3vw; /* Adjust font size for larger screens */
        left: 4.5vw;
        top: -1.5vw;
        transition: transform 0.3s ease; /* Adds smooth transition effect for growing/shrinking */
    }

    header div a:hover {
        transform: scale(1.2); /* Increase size by 20% on hover */
    }

    nav {
        flex: 1;
        justify-content: flex-end; /* Align nav links to the right */
    }

    nav a {
        font-size: 2vw; /* Adjust font size for nav links */
        float: right;
        position: relative;
        top: -5.8rem;
        right: 2.5vw;
        transition: transform 0.3s ease;
    }
    nav a:hover {
        transform: scale(1.2); /* Makes the link grow by 20% when hovered */
    }

    .color-blocks {
        display: grid;
        position: absolute; 
        top: 0; 
        left: 0;
        width: 100vw;
        grid-template-columns: repeat(13, 1fr);
        z-index: 2;
        overflow-x: hidden;    
    }
.color-blocks .block {
    pointer-events: none; /* Disable pointer events for blocks */
}

/* Enable pointer events only on hover to allow the color change */
.color-blocks .block:hover {
    pointer-events: auto;
}
    .color-blocks div {
        transition: background-color 1s ease-out 0.5s;
    }
.pink:hover {
    aspect-ratio: 1 / 1; 
    background-color: #E8A2BD;
    border: 0.5px solid black;
    transition: none; /* No transition for hovering in */
}
.pink {
     background-color: white;
}
.blue:hover {
    aspect-ratio: 1 / 1; 
    background-color: #5B7FAF;
    border: 0.5px solid black;
    transition: none; 
}
.blue {
     background-color: white;
}
.orange:hover {
    aspect-ratio: 1 / 1; 
    background-color: #DF662C;
    border: 0.5px solid black;
    transition: none; 
}
.orange {
     background-color: white;
}
.green:hover {
    aspect-ratio: 1 / 1; 
    background-color: #5CA46E;
    border: 0.5px solid black;
    transition: none; 
}
.green {
     background-color: white;
}
.yellow:hover {
    aspect-ratio: 1 / 1; 
    background-color: #EDBD30;
    border: 0.5px solid black;
    transition: none; 
}
.yellow {
     background-color: white;
}
.block1 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block5 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block9 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block14 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block20 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block24 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block33 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block39 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block42 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block43 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
    .hydrant img {
        width: 40vw;
        max-width: 90vw;
        top: 0;
        left: -6.5vw;
        pointer-events: none;
    }
    .album img {
        width: 100vw;
        cursor: pointer;
        pointer-events: none;
    }
    .albums {
        margin-top: 55vh;
    }
    .album {
        position: relative;
        margin-top: -58vw; /* Reduced margin to bring albums closer together */
        transition: transform 0.3s ease, z-index 0.3s ease;
        z-index: 3;
    } 
    .album:hover {
        transform: translateY(-20px); /* Reduced hover effect to make movement subtler */
    }
    .album:hover img {
        pointer-events: auto; /* Enable interaction with album image only when hovering over the album */
    }

    .album.expanded {
        transform: translateY(-60vh); /* Reduced slide out effect on click */
    }
    .album#goblin.expanded {
        transform: translateY(-65vh); /* Reduced slide out effect on click */
    } 
    .album#flower-boy.expanded {
        transform: translateY(-72vh); /* Reduced slide out effect on click */
    } 
    .album#igor.expanded {
        transform: translateY(-65vh); /* Reduced slide out effect on click */
    } 
    .album#wolf.expanded {
        transform: translateY(-60vh); /* Reduced slide out effect on click */
    } 
}

@media (min-width: 1440px) {
    html, body {
        width: 100%;
        margin: 0;
        overflow-x: hidden;
    }
    header {
        flex-direction: row;
        text-align: left;
        justify-content: space-between;
        z-index: 3;
    }
    header div a {
        position: relative;
        text-align: left; /* Align 'Tyler, The Creator' to the left */
        font-size: 3vw; /* Adjust font size for larger screens */
        left: 4.5vw;
        top: -1.5vw;
        transition: transform 0.3s ease; /* Adds smooth transition effect for growing/shrinking */
    }

    header div a:hover {
        transform: scale(1.2); /* Increase size by 20% on hover */
    }

    nav {
        flex: 1;
        justify-content: flex-end; /* Align nav links to the right */
    }

    nav a {
        font-size: 2vw; /* Adjust font size for nav links */
        float: right;
        position: relative;
        top: -6.2rem;
        right: 2.5vw;
        transition: transform 0.3s ease;
    }
    nav a:hover {
        transform: scale(1.2); /* Makes the link grow by 20% when hovered */
    }

    .color-blocks {
        display: grid;
        position: absolute; 
        top: 0; 
        left: 0;
        width: 100vw;
        grid-template-columns: repeat(13, 1fr);
        z-index: 2;
        overflow-x: hidden;    
    }
.color-blocks .block {
    pointer-events: none; /* Disable pointer events for blocks */
}

/* Enable pointer events only on hover to allow the color change */
.color-blocks .block:hover {
    pointer-events: auto;
}
    .color-blocks div {
        transition: background-color 1s ease-out 0.5s;
    }
.pink:hover {
    aspect-ratio: 1 / 1; 
    background-color: #E8A2BD;
    border: 0.5px solid black;
    transition: none; /* No transition for hovering in */
}
.pink {
     background-color: white;
}
.blue:hover {
    aspect-ratio: 1 / 1; 
    background-color: #5B7FAF;
    border: 0.5px solid black;
    transition: none; 
}
.blue {
     background-color: white;
}
.orange:hover {
    aspect-ratio: 1 / 1; 
    background-color: #DF662C;
    border: 0.5px solid black;
    transition: none; 
}
.orange {
     background-color: white;
}
.green:hover {
    aspect-ratio: 1 / 1; 
    background-color: #5CA46E;
    border: 0.5px solid black;
    transition: none; 
}
.green {
     background-color: white;
}
.yellow:hover {
    aspect-ratio: 1 / 1; 
    background-color: #EDBD30;
    border: 0.5px solid black;
    transition: none; 
}
.yellow {
     background-color: white;
}
.block1 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block5 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block9 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block14 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block20 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block24 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block33 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block39 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block42 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
.block43 {
    aspect-ratio: 1 / 1; 
    background-color: white;
    border: 0.5px solid black;
}
    .hydrant img {
        width: 40vw;
        max-width: 90vw;
        top: 0;
        left: -4vw;
        pointer-events: none;
    }
    .album img {
        width: 100vw;
        cursor: pointer;
        pointer-events: none;
    }
    .albums {
        margin-top: 70vh;
    }
    .album {
        position: relative;
        margin-top: -58vw; /* Reduced margin to bring albums closer together */
        transition: transform 0.3s ease, z-index 0.3s ease;
        z-index: 3;
    } 
    .album:hover {
        transform: translateY(-20px); /* Reduced hover effect to make movement subtler */
    }
    .album:hover img {
        pointer-events: auto; /* Enable interaction with album image only when hovering over the album */
    }

    .album.expanded {
        transform: translateY(-60vh); /* Reduced slide out effect on click */
    }
    .album#goblin.expanded {
        transform: translateY(-65vh); /* Reduced slide out effect on click */
    } 
    .album#flower-boy.expanded {
        transform: translateY(-72vh); /* Reduced slide out effect on click */
    } 
    .album#igor.expanded {
        transform: translateY(-74vh); /* Reduced slide out effect on click */
    } 
    .album#wolf.expanded {
        transform: translateY(-70vh); /* Reduced slide out effect on click */
    } 
}
@media (min-width: 2260px) {
    html, body {
        width: 100%;
        margin: 0;
        overflow-x: hidden;
    }
    header {
        flex-direction: row;
        text-align: left;
        justify-content: space-between;
        z-index: 3;
    }
    header div a {
        position: relative;
        text-align: left; /* Align 'Tyler, The Creator' to the left */
        font-size: 3vw; /* Adjust font size for larger screens */
        left: 4.5vw;
        top: -.5vw;
        transition: transform 0.3s ease; /* Adds smooth transition effect for growing/shrinking */
    }

    header div a:hover {
        transform: scale(1.2); /* Increase size by 20% on hover */
    }

    nav {
        flex: 1;
        justify-content: flex-end; /* Align nav links to the right */
    }

    nav a {
        font-size: 2vw; /* Adjust font size for nav links */
        float: right;
        position: relative;
        top: -9.2rem;
        right: 2.5vw;
        transition: transform 0.3s ease;
    }
    nav a:hover {
        transform: scale(1.2); /* Makes the link grow by 20% when hovered */
    }
}
/** {
    outline: 1px solid red; 
}*/