* {
    box-sizing: border-box;
}

body {
    background-color: black;
    font-family: 'Segoe UI';
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
}

section {
    width: 85%;
    max-width: 1000px; /* Limits the width on larger screens */
    justify-content: center;
    align-items: center;
    color: #dcdada;
    background-color: #0e0e0e;
    border-radius: 20px;
    margin: 150px auto 0; /* Center align and add space on top */
}

h2 {
    padding: 30px;
    font-size: 60px;
    text-align: center;
    font-family: 'Segoe UI';
    background-image: linear-gradient(45deg, black, grey, silver, white);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}

li {
    color: #E8E8E8;
    font-size: 26px;
    margin-left: 15px;
    margin-right: 20px;
    list-style-type: square;
    font-family: 'Segoe UI';
    font-weight: 700;
}

.content {
    font-size: 18px;
    margin-left: 15px;
    font-family: 'Segoe UI';
    margin-right: 20px;
}

/* Responsive styles for mobile devices */
@media (max-width: 768px) {
    section {
        width: 90%; /* Take up more width on smaller screens */
        margin-top: 50px;
        padding: 5px;
    }

    h2 {
        font-size: 30px; /* Smaller font size for mobile */
        padding: 20px;
    }

    li {
        font-size: 15px; /* Adjust font size for better readability */
        margin-left: 0px;
    }

    .content {
        font-size: 12px; /* Slightly smaller font for mobile */
        margin-left: 0px;
        margin-top: 5px;
    }
}

/* Scrollbar for Webkit browsers (Chrome, Safari) */
::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
    background: #1e1e1e; /* Track color */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #888; /* Scrollbar thumb color */
    border-radius: 10px;
    border: 2px solid #1e1e1e; /* Adds space around the thumb */
}

::-webkit-scrollbar-thumb:hover {
    background: #555; /* Hover color */
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #888 #1e1e1e; /* Thumb color and track color */
}