#pfp {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: block;
    margin: 20px auto;         /* Centers + adds space above/below */
    border: 3px solid #333;    /* Adds a border around it */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);  /* Adds shadow */
    object-fit: cover;
}

.profile-section {
    background-color: #2a2a2a;
    padding: 40px;
    margin: 40px auto 20px auto;
    max-width: 600px;   /* Box will NEVER be wider than 600px */     
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.section {
    background-color: #2a2a2a;    /* Darker box */
    padding: 30px;                /* Space inside the box */
    margin: 20px auto;            /* Space between boxes + center */
    max-width: 600px;             /* Don't let it get too wide */
    border-radius: 15px;          /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);  /* Shadow for depth */
}

body {
    text-align: center;        /* Centers text and inline elements */
    font-family: Arial, sans-serif;
    background-color: #1a1a1a;  /* Dark gray (easier on eyes than pure black) */
    color: #e0e0e0;             /* Off-white text */
    padding: 20px;
}

ul {
    list-style: none;   /* I think what this does is IT REMOVES the DOTS u see on ul */
    padding-left: 0;
}

li {
    padding: 8px 0;  /* Adds space between list items */
}