.intro-h2 {
    margin-top: 0;
}

/* corousel */

#carousel {
    grid-row: 1 / 2;
    grid-column: 1 / 4;
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    perspective: 500px;
    --items: 7;
    --middle: 4;
    --position: 1;
}

div.item {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: white;
    --r: calc(var(--position) - var(--offset));
    --abs: max(calc(var(--r) * -1), var(--r));
    transition: all 0.25s linear;
    transform: rotateY(calc(-10deg * var(--r))) translateX(calc(-165px * var(--r))); /* Adjusted to 150px */
    z-index: calc((var(--position) - var(--abs)));
    transition: 0.3s;
}

.selected:hover {
    transform: scale(3.2);
    opacity: 100%;
    transition: 0.6s;
}

/* Define background images for items */
div.item:nth-of-type(1) {
    --offset: -2;
    background-image: url('../images/pfp-newyear.png'); /* Adjust image URL */
    background-size: cover;
}

div.item:nth-of-type(2) {
    --offset: -1;
    background-image: url('../images/pfp-halloween.png'); /* Adjust image URL */
    background-size: cover;
}
div.item:nth-of-type(3) {
    --offset: 0;
    background-image: url('../images/pfp-autumn.png'); /* Adjust image URL */
    background-size: cover;
}
div.item:nth-of-type(4) {
    --offset: 1;
    background-image: url('../images/pfp-main.png'); /* Adjust image URL */
    background-size: cover;
}
div.item:nth-of-type(5) {
    --offset: 2;
    background-image: url('../images/pfp-chistmas.png'); /* Adjust image URL */
    background-size: cover;
}
div.item:nth-of-type(6) {
    --offset: 3;
    background-image: url('../images/pfp-eastern.png'); /* Adjust image URL */
    background-size: cover;
}
div.item:nth-of-type(7) {
    --offset: 4;
    background-image: url('../images/pfp-winter.png'); /* Adjust image URL */
    background-size: cover;
}

.slider {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
    width: 280px;
    margin: 15px 0 0 0;
}

.color-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline;
    height: 30px;
    border: none;
    background-color: transparent;
    vertical-align: middle;
}