/* General body styling */
body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    height: 100%;
    font-family: 'Abel', sans-serif; /* Apply DM Sans */
    overflow-y: scroll;
    background-color: transparent;
}

body::-webkit-scrollbar {
    display: none; /* Hide the scrollbar */
}

/* Navigation container (replacing the header) */
.nav-container {
    position: absolute; /* Keep it at the top of the page */
    top: 0;
    right: 0;
    padding: 10px 20px;
    background-color: transparent; /* Transparent background */
    width: 100%; /* Span full width */
    display: flex;
    justify-content: flex-end; /* Align navigation to the right */
    box-sizing: border-box;
}

/* Navigation bar */
.nav-container ul {
    list-style-type: none; /* Remove bullet points */
    margin: 0;
    padding: 0;
    display: flex;
}

.nav-container ul li {
    margin-left: 20px; /* Space between the links */
}

.nav-container ul li a {
    position: relative;
    text-decoration: none;
    color: white;
    font-size: 18px;
}

.nav-container ul li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: white;
    left: 0;
    bottom: -5px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.nav-container ul li a:hover::after {
    transform: scaleX(1);
}

.header-image {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-image: url('./images/profile5.JPEG');
    height: 100vh;
    background-size: cover;
    background-position: center;
}

/* Container for bigname */
.bigname-container {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0 20px;
    box-sizing: border-box;
    z-index: 10;
    user-select: none;
    /* animation: slideText 5s linear infinite alternate; */
    animation: fadeIn 2s ease-in-out, bounce 1.5s ease-in-out infinite;
}

.bigname span {
    font-size: 130px;
    color: white;
}

@keyframes slideText {
    0% {
        left: 0; /* Start at the left */
    }
    100% {
        left: calc(100vw - 270px); /* Move to the right, accounting for text width */
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-30px);
    }
    60% {
      transform: translateY(-15px);
    }
}
  

/* Container for the scrolling text */
.scroll-container {
    position: absolute;
    bottom: 0%;
    width: 100%; /* Full width */
    overflow: hidden; /* Hide any overflow */
    white-space: nowrap; /* Prevent text from wrapping */
    height: 240px; /* Set a height for the text container */
}

/* Scrolling text */
.scrolling-text {
    display: inline-block;
    white-space: nowrap; /* Prevent text from wrapping to the next line */
    animation: scroll 60s linear infinite; /* Create continuous scrolling animation */
    width: max-content; /* Set width to twice the container size to enable looping */
    user-select: none;
}

/* Keyframes for seamless scrolling */
@keyframes scroll {
    0% {
        transform: translateX(0); /* Start at the beginning of the container */
    }
    100% {
        transform: translateX(-50%); /* Move to the end of the duplicated text */
    }
}

/* Style for the text inside */
.scrolling-text span {
    font-size: 180px;
    display: inline-block;
    color: white;
    padding-right: 2rem; /* Add space between repetitions */
}

.view {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.block {
    height: 200px;
    width: 300px;
    margin: 50px;
    border: 0.5mm solid black;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
        rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.filler {
    height: 200px;
    width: 100%;
    margin: 50px;
}

.block:nth-child(1) {
    background: rgb(232, 88, 67);
}
.block:nth-child(2) {
    background: rgb(26, 84, 207);
}
.block:nth-child(3) {
    background: rgb(36, 217, 127);
}
.block:nth-child(4) {
    background: rgb(157, 86, 247);
    width: 700px;
}
.block:nth-child(5) {
    background: rgb(250, 201, 82);
}

@keyframes appear {
    from {
      opacity: 0;
      transform: translateX(-100px);
    }
    to {
      opacity: 1;
      transform: translateX(0px);
    }
  }

.block {
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}