body {
    font-family: Arial, sans-serif;
    width: 95%;
    margin: auto;
    background-color: #D3D3D3;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1, h3 {
    color: #FF6347;
}

h1 {
    text-align: center;
}

h2 {
    margin-top: 20px;
}

h3 {
    margin-top: 10px;
}

ul {
    margin-top: 5px;
    margin-bottom: 15px;
    padding-left: 20px;
}

li {
    margin-bottom: 5px;
}

.content {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: #FFF;
    position: relative; /* Zmienione z 'static' na 'relative', aby lepiej działało pozycjonowanie */
}

.contentbody {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    background: #fff; /* Dodanie białego tła dla lepszej czytelności */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.contenttop {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

/* Style for images */
img {
    width: 100%;
    height: auto;
}

/* Add styles for the gradient containers that contain the pulsating effect */
.gradient-container-left, .gradient-container-right {
    position: fixed; /* Use fixed positioning to make the bars visible during scrolling */
    width: 0%; /* Initial width of the bar */
    height: 100%;
}

/* Gradient on the left side */
.gradient-container-left {
    left: 0;
    background: linear-gradient(to right, rgba(0, 255, 0, 0.6), transparent); /* Red gradient with reduced intensity */
}

/* Gradient on the right side */
.gradient-container-right {
    right: 0;
    background: linear-gradient(to left, rgba(0, 255, 0, 0.6), transparent); /* Red gradient with reduced intensity */
}

/* Projects section - add margin at the bottom */
.contentbody h3:last-of-type {
    margin-top: 50px; /* Odstęp dla sekcji 'Projects' */
}

/* Flexbox container for each skill */
.skill-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

/* Text next to the progress bar */
.skill-text {
    width: 25%; /* Określ szerokość tekstu */
    font-family: Arial, sans-serif;
    margin-right: 10px;
}

/* Style for the progress bars */
.skill-bar {
    width: 60%; /* Określ szerokość paska umiejętności */
    background-color: #e0e0e0;
    border-radius: 10px;
    height: 20px;
    overflow: hidden;
}

.skill-fill {
    height: 90%;
    background-color: #4CAF50; /* Zielony kolor paska */
    border-radius: 10px;
    transition: width 0.5s ease-in-out; /* Płynne przejście */
}