body {
            background-color: black;
            color: lightgray;
            font-family: "Monsterrat", "Open sans", sans-serif;
            padding-top: 100px; /* add space at the top */
}

h1 {
    text-align: center;
    padding: 50px 0;
}

#portfolio {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.portfolio-item {
    flex: 1 0 300px;  /* Flexible items with a minimum width of 300px */
    margin: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.5s ease-out; /* Animation effect */
    margin-top: 100px; /* add space between items */

    

}

.portfolio-item:hover {
    transform: scale(1.05);  /* Slightly scale up on hover */

    
}

.portfolio-item img {
    width: 100%;
    height: auto;
    overflow: visible;

    
}

.portfolio-item h2 {
    text-align: center;
    color: lightpink;
}

#footer {
    background-color: #222;
    color: lightgray;
    text-align: center;
    padding: 10px;
}

.link-item {
    color: lightgray;
    text-decoration: none;
    transition: color 0.3s;
}

.link-item:hover {
    color: lightpink;
}

.link-item:active {
    color: red;
}

.row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.portfolio-item {
    width: 45%; /* make each item take up roughly half the width of the row, adjust as needed */
    transition: all 0.3s;
    margin-bottom: 50px; /* add space below each row, adjust as needed */
}

.scroll-arrow-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
}

.scroll-arrow img {
    width: 50px; /* Adjust as needed */
    transition: opacity 0.3s, transform 0.3s;
    opacity: 0.7; /* Starting opacity, can be set to full if you prefer */
}

.scroll-arrow:hover img {
    opacity: 1; /* Full opacity on hover */
    transform: translateY(-5px); /* Slight move to indicate it's clickable */
    /* Add any glow effect you want using box-shadow */
    box-shadow: 0 0 15px #fff; /* Example glow effect */
}