* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    margin: 0;
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #1e3c72, #373636);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}


.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*height: 100vh;*/
    text-align: center;
}

.racoon-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.racoon-container > img {
    /*max-width: 20%;*/
}

.text {
    margin-top: 20px;
    font-size: 1.5em;
    color: #df4949;
    margin-bottom: 40px;
    display: none;
}

.content {
    max-width: 800px;
}

.project {
    display: flex; /* Use flexbox to align items side-by-side */
    gap: 0; /* Remove gap from the main container */
    margin: 20px 0; /* Adjust margin for spacing between projects */
    backdrop-filter: blur(8px);
    background-color: rgba(30, 60, 114, 0.4);
    border-radius: 12px;
    overflow: hidden; /* Ensures content respects border radius */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    align-items: stretch; /* Stretch items to fill the container height */
}

.project p {
    color: white;
}

.projects img,
.project img {
    width: 300px; /* Set a fixed width for project images */
    height: 200px; /* Set a fixed height for project images */
    object-fit: fill; /* Ensures the image covers the area */
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.text-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes the buttons to the bottom */
    flex: 1; /* Allows the text-block to take up the remaining space */
    padding: 15px; /* Add some padding inside the text block */
    /*text-align: left; !* Align text to the left *!*/
}

.text-block h3 {
    margin-bottom: 10px; /* Add some space below the title */
}

.text-block p {
    margin-bottom: 15px; /* Add some space below the paragraph */
}

.text-block button {
    /*align-self: flex-start; !* Align buttons to the start of the block *!*/
    padding: 8px 16px;
    cursor: pointer;
    background: none;
    color: white;
}

.text-block button:hover {
    border-color: rebeccapurple;
}

.projects {
    margin-top: 920px;
}

.buttons {
    display: flex;
    justify-content: flex-start; /* Align buttons to the left */
    gap: 10px; /* Space between the two buttons */
    margin-top: auto; /* Pushes the buttons to the bottom */
}

button {
    text-decoration: none;
    padding: 8px;
    left: 10px;
    bottom: 10px;
    border: 2.5px solid #000;
    border-radius: 11px;
    margin-left: 0; /* Reset margin */
    flex: 1; /* Makes buttons take up equal space */
    max-width: 120px; /* Set a consistent width for buttons */
}


.sticky-icons-bar {
    position: sticky;
    top: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0 14px 14px;
    margin-top: 20px;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    border-radius: 10px;
}

.sticky-icons-bar img {
    max-width: 39%;
    height: auto;
    border-radius: 12px;
}

.sticky-icons-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: background 0.1s, transform 0.1s;
    padding: 10px;
}

.sticky-icons-bar .icon {
    width: 92px;
    transition: transform 0.35s;
}

.sticky-icons-bar a:hover,
.sticky-icons-bar a:focus {
    /*background: rgba(255,255,255,0.22);*/
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(6px);
    transform: scale(1.1) translateY(12px);
}

.sticky-icons-bar a:hover .icon,
.sticky-icons-bar a:focus .icon {
    transform: scale(1.22);
}


/* Base window scrollbar styles */
body::-webkit-scrollbar {
    width: 11px;
}

body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

body::-webkit-scrollbar-thumb {
    background: rgba(55, 54, 54, 0.79);
    border-radius: 10px;
}

/* Hover and active states */
body::-webkit-scrollbar-thumb:hover {
    background: rgb(55, 54, 54);
    cursor: grab;
}

body::-webkit-scrollbar-thumb:active {
    cursor: grabbing;
}

.arrow-down {
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    /* or shorthand */
    margin: 0 auto;
}

#arrow-down {
    /* Existing styles */
    animation: mymove 1.6s infinite;
    margin-top: 70px;
    transition: filter 0.1s ease;
    max-width: 39%;
}

#arrow-down:hover {
    filter: invert(20%) sepia(80%) saturate(1000%) hue-rotate(240deg) brightness(0.8) contrast(1.2);
}

@keyframes mymove {
    0% {
        transform: translateY(0px); /* Start at the original position */
    }
    50% {
        transform: translateY(10px); /* Move down 10 pixels */
    }
    100% {
        transform: translateY(0px); /* Return to the original position */
    }
}

/* Use scroll-margin-top instead of margin-top for a cleaner solution */
#projectList {
    scroll-margin-top: 100px; /* Adjust this value as needed */
}


@media (max-width: 720px) {
    .project {
        flex-direction: column; /* Stacks image on top of text */
        align-items: center; /* Centers the image and text block horizontally within the project card */
        width: 95%; /* Make the project card wider (e.g., 95% of the viewport width) */
        margin: 20px auto; /* Center the project card horizontally */
    }

    .projects img,
    .project img {
        width: 100%; /* Makes the image take the full width of the project card */
        height: auto; /* Maintains aspect ratio */
        border-top-right-radius: 12px; /* Adds radius to the top-right corner */
        border-bottom-left-radius: 0; /* Removes radius from the bottom-left corner */
        border-bottom-right-radius: 0; /* Ensures bottom-right is also sharp */
    }

    .text-block {
        text-align: center; /* Centers the text (h3 and p) */
    }

    .text-block > button {
        align-self: center;
        padding: 10px;
    }

    .buttons {
        justify-content: center; /* Centers the buttons horizontally */
    }

    /* Adjust the initial project's image radii for small screens if it's styled differently */
    .content > .project img {
        border-top-right-radius: 12px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* Optional: Adjust button max-width if they look too small when centered */
    button {
        max-width: 150px; /* Slightly wider buttons on small screens, adjust as needed */
    }
}

.footer {
    padding: 40px 0;
}

.noSelect {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.infoText {
    font-size: 0.8rem;
    color: #49dfb7;
}