html body{
    background-color: rgb(185, 185, 185);
    background-image: url(https://wallpaperaccess.com/full/1116882.jpg);
    /*background-image: url(https://4kwallpapers.com/images/walls/thumbs_3t/8324.png);*/
}
/* NAVBAR */
.mask-custom {
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.15);
}

.nav-link, .navbar-toggler{
    color: aliceblue;
}

/* TEXT MIDDLE (JPSNO) */
.textFont h1{
    font-family: "SixCaps-Regular";
    font-size:150px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    animation: fadeIn 2s ease forwards;
}
@font-face {
    font-family: "SixCaps-Regular";
    src: url(../font/SixCaps-Regular.ttf);
}

.custom-font {
    margin-bottom: 0%;
    font-family: 'Rolling_Beat_Personal_Use';
}
.custom-font2 {
    font-style: normal; 
    font-size: 7px; 
    letter-spacing: 4px; 
    padding-bottom: 10px;
}
@font-face {
    font-family: "Rolling_Beat_Personal_Use";
    src: url(../font/Rolling_Beat_Personal_Use.ttf);
}

/* .gallery {
    animation: animate 1s ease-in forwards 0.1s;
} */

.writer {
    display: inline-block; /* Allows for animation */
    animation: slideUp 1.5s ease-out; /* Adjust duration and easing as needed */
    color: aliceblue;
}

.typewrite {
    color: aliceblue;
}

.fadedText p {
    position: relative;
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 2em;
    letter-spacing: 4px;
    overflow: hidden;
    background: linear-gradient(90deg, #000, #fff, #000);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate_fadedText 3s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

.container_fadeText {
    background-color: #000;
    padding: 50px;
}
/* ======================================== For Scroll to top ========================================*/
.scrollToTopBtn {
    background-color: black;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 18px;
    line-height: 48px;
    width: 48px;
    border-radius: 50%; /* Circular shape */
    /* place it at the bottom right corner */
    position: fixed;
    bottom: 20px;
    right: 20px;
    /* keep it at the top of everything else */
    z-index: 100;
    /* hide with opacity */
    opacity: 0;
    /* also add a translate effect */
    transform: translateY(100px);
    /* and a transition */
    transition: all 0.5s ease;
}

.scrollToTopBtn:hover {
    background-color: #999999; /* Darker blue on hover */
}

.showBtn {
    opacity: 1;
    transform: translateY(0);
}

/* ======================================== For Carausel ========================================*/
    .main_carausel {
        transform: translateY(0%);
    }
    #carousel {
        margin-bottom: 0px;
        height: 350px;
        overflow: hidden;
    }
    #carousel div {
        position: absolute;
        transition: transform 400ms, left 400ms, opacity 400ms, z-index 0s;
        opacity: 1;
    }
    #carousel div img {
        width: 400px;
        transition: width 400ms;
        -webkit-user-drag: none;
        box-shadow: rgb(114, 114, 114) 0px 20px 30px -10px;
        border-radius: 10px;
    }
    #carousel div.hideLeft {
        left: 0%;
        opacity: 0;
        transform: translateY(50%) translateX(-50%);
    }
    #carousel div.hideLeft img {
        width: 200px;
    }
    #carousel div.hideRight {
        left: 100%;
        opacity: 0;
        transform: translateY(50%) translateX(-50%);
    }
    #carousel div.hideRight img {
        width: 200px;
    }
    #carousel div.prev {
        z-index: 5;
        left: 30%;
        transform: translateY(50px) translateX(-50%);
    }
    #carousel div.prev img {
        width: 300px;
    }
    #carousel div.prevLeftSecond {
        z-index: 4;
        left: 15%;
        transform: translateY(50%) translateX(-50%);
        opacity: 0.7;
    }
    #carousel div.prevLeftSecond img {
        width: 200px;
    }
    #carousel div.selected {
        z-index: 10;
        left: 50%;
        transform: translateY(0px) translateX(-50%);
    }
    #carousel div.next {
        z-index: 5;
        left: 70%;
        transform: translateY(50px) translateX(-50%);
    }
    #carousel div.next img {
        width: 300px;
    }
    #carousel div.nextRightSecond {
        z-index: 4;
        left: 85%;
        transform: translateY(50%) translateX(-50%);
        opacity: 0.7;
    }
    #carousel div.nextRightSecond img {
        width: 200px;
    }

    /*previous or next buttons css*/
    .buttons {
        /* color: white; */
        display: none; /* Hide buttons by default */
    }
    /* Show buttons only on mobile screens */
    @media (max-width: 768px) {
        .buttons {
            display: flex; /* Or 'block', depending on your layout */
            justify-content: center; /* Center the buttons horizontally */
        }
    }

    .button-plain {
        background: none; /* No background */
        border: none; /* No border */
        font-size: 24px; /* Adjust font size as needed */
        color: black; /* Text color */
        cursor: pointer; /* Change cursor to pointer */
        padding: 10px; /* Optional: Add some padding */
        transition: color 0.3s; /* Smooth color transition on hover */
    }

    .button-plain:hover {
        color: gray; /* Change color on hover */
    }

    .skill_icons img {
        max-width: 50px;
        border-radius: 50px;
    }

/* ======================================== Animations ========================================*/
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(50%);
        }
        to {
            opacity: 1;
        }
    }

    @keyframes animate {
        0% {
            transform: scale(0, 0.005);
        }
        50% {
            transform: scaleY(0.005);
        }
        100% {
            transform: scale(1, 1);
        }
    }

    @keyframes slideUp {
        from {
            transform: translateY(200px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes animate_fadedText {
        0% {
            background-position: -500%;
        }
        100% {
            background-position: 500%;
        }
    }