/* general customizations */
*{
    color: white;
}
header{
    display: flex;
    flex-direction: row;
}
:root{
    --green-gradient: linear-gradient(
    rgb(230, 247, 230) 0%,
    rgb(120, 230, 120) 50%,
    rgb(0, 153, 51) 53%,
    rgb(230, 247, 230) 100%
);
    --pink-gradient: linear-gradient(
    rgb(255, 230, 242) 0%,
    rgb(255, 102, 178) 50%,
    rgb(204, 0, 102) 53%,
    rgb(255, 230, 242) 100%
);
    --red-gradient: linear-gradient(
        rgb(255, 229, 229) 0%,
        rgb(255, 102, 102) 50%,
        rgb(204, 0, 0) 53%,
        rgb(255, 229, 229) 100%
    );

    --orange-gradient: linear-gradient(
        rgb(255, 236, 204) 0%,
        rgb(255, 166, 77) 50%,
        rgb(204, 102, 0) 53%,
        rgb(255, 236, 204) 100%
    );

    --yellow-gradient: linear-gradient(
        rgb(255, 255, 204) 0%,
        rgb(255, 224, 102) 50%,
        rgb(204, 170, 0) 53%,
        rgb(255, 255, 204) 100%
    );

    --blue-gradient: linear-gradient(
        rgb(204, 238, 255) 0%,
        rgb(102, 179, 255) 50%,
        rgb(0, 92, 204) 53%,
        rgb(204, 238, 255) 100%
    );

    --indigo-gradient: linear-gradient(
        rgb(230, 224, 255) 0%,
        rgb(140, 118, 255) 50%,
        rgb(59, 42, 179) 53%,
        rgb(230, 224, 255) 100%
    );
}
.home{
    background: var(--yellow-gradient);
}
.aboutme{
    background: var(--blue-gradient);
}
.project{
    background: linear-gradient(rgb(244, 214, 255) 0%,
    rgb(191, 123, 255) 50%, 
    rgb(118, 58, 184) 53%,
    rgb(244, 214, 255) 100%);;
}
.tv-shows{
    background: var(--orange-gradient);
}
.movies{
    background:var(--indigo-gradient);
}
.book-library{
    background: var(--red-gradient);
}
.overlay{
    background-image: url(photo/lines.png);
    background-repeat: repeat;
    background-attachment: scroll;
    pointer-events: none;
    opacity: 0.25;
    position: fixed;
    display: block;
    justify-content: center;
    align-items: center;
    inset: 0;
    z-index: 1;
} 
body{
    background-image: url('photo3/koi fish background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    
}
a{
    text-decoration: none;
}
@keyframes appear{
    from{
        opacity: 0;
        scale: 0.5
    }
    to{
        opacity: 1;
        scale: 1;
        }
}
section{
        animation: appear linear;
        animation-timeline: view();
        animation-range: entry 0%;
}
/*  */
.container1{
    display: flex;
    justify-content: center;
}

.card{
    width: 430px;
    height: 720px;
    background: url(photo/water.gif);
    background-size: 100% 100%;
    backdrop-filter: blur(10px);     
    border: 1px solid rgba(255, 255, 255, 0.5); /* Soft highlight edge */
    border-radius: 16px;
    padding: 24px;
}
.linktree{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;
    margin: auto;
    text-align: center;
}
.linksalignment{
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.icon{
    background-image: url('photo3/koi fish .gif');
    background-size: 100% 100%;
    width: 13em;
    height: 13em;
    border-radius: 7em;
}
/* link tree links! */
.bubbles{
    width: 20px;
    height: 20px;
    transform: scale(15%);
}

nav{
    width: fit-content;
    height: fit-content;
    border-radius: 20px;
}
#nav-icon{
    width: 20px;
    height: 20px;
}
ul{
    list-style-type: none;
    display: flex;
    flex-direction: row;
    gap: 10px;
}
#button{
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    width: 430px;
    margin: 40px;
    border-radius: 10px;
    
}
.github{
    background:var(--pink-gradient);
}
.github li{
    text-align: center;
    transform: translate(117px, 5px);
}
.linkedin{
    background: var(--green-gradient);
}
.linkedin li{
    transform: translate(110px, 5px);
}
.instagram{
    background: var(--pink-gradient);
}
.instagram li{
    transform: translate(109px, 5px);
}
.tiktok{
    background: var(--green-gradient);
}
.tiktok li{
    transform: translate(120px, 5px);
}
.apple-music{
    background: var(--pink-gradient);
}
.apple-music li{
    transform: translate(100px, 5px);
}
/* musicplayer customizations */
.music-player{
    width: 400px;
    height: 650px;
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.5); /* Soft highlight edge */
    text-align: center;     
}
.container2{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    justify-items: center;
    transform: translateX(300px);
    margin-left: 10px;
    margin-top: 10px;
}
.container2 h1{
    font-size: 50px;
    color: black;
    margin-top: 10px;
}
.container2 p{
    font-size: 30px;
    color: #030101;
}
.song-image{
    display: flex;
    text-align: center;
    margin: auto;
    width: 200px;
    height: 200px;
    border: 4px solid black;
    border-radius: 50%;
    justify-self: center;
    box-shadow: rgb(214, 214, 214) 2px 5px 10px;
}
#progress{
    appearance: none;
    width: 90%;
    height: 8px;
    background: #2e0400;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px;
    margin-bottom: 30px;
}
#progress::-webkit-slider-thumb{
    -webkit-appearance: none;
    background: #030101;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border:  8px solid #F4EDE8;
}
.controls {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 50px;
    color:  #F4EDE8;
}
.controls div{
    background: #410e61;
    padding: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: black 2px 5px 10px;
    cursor: pointer;
}
.controls div:nth-child(2){
    transform: scale(1.5);
    color:hsl(218, 66%, 48%);
    background-color: #36165f;
    color: #F4EDE8;

}
#song {
    display: none;
}
/* flexbox for the music player & the info box */
#aboutme{
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: center;
    justify-content: center;
}
.info{
    width: 500px;
    height: 300px;
    backdrop-filter: blur(10px);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.5); /* Soft highlight edge */
}
/* carousel */
/* Container sizing and centering */
.carousel-wrapper {
    padding: 20px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* Scrollable container setup */
.carousel-container {
    background-color: black;
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Hides default scrollbar in Firefox */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Webkit scrollbar removal */
.carousel-container::-webkit-scrollbar {
    display: none;
}

/* Individual slides */
.slide {
  flex: 0 0 100%; /* Ensures each slide takes full width */
    height: 350px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    font-family: sans-serif;
}

/* Generate and position the scroll buttons */
.carousel-container::scroll-button(left),
.carousel-container::scroll-button(right) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    padding: 15px;
    cursor: pointer;
    border-radius: 50%;
    font-size: 1.2rem;
    z-index: 10;
}

/* Position Left Button */
.carousel-container::scroll-button(left) {
    left: 15px;
  content: "‹"; /* Unicode arrow character */
}

/* Position Right Button */
.carousel-container::scroll-button(right) {
    right: 15px;
  content: "›"; /* Unicode arrow character */
}

/* Hover effects */
.carousel-container::scroll-button(left):hover,
.carousel-container::scroll-button(right):hover {
    background-color: rgba(0, 0, 0, 0.9);
}
.photo{
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
}