html {
    font-size: 16;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #181818;
}

header {
    width: 58.59375rem;
    height: 3.125rem;
    aspect-ratio: 18.75;
    background-color: #282828;
    border-radius: 100px;
    min-height: 3.125rem;

    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    margin-top: 1.25rem;

    display: flex;
    align-items: center;
    justify-content: space-between; /* This is already here, good */
    position: relative; /* Add this if you want the dropdown to escape header bounds */
}

h1 {
    font-size: 1.1725rem;
    font-weight: bold;
    color: white;
    font-family: "Inter", sans-serif;
}

h2 {
    font-size: 0.78125rem;
    font-weight: normal;
    color: #969696;
    font-family: "Inter", sans-serif;
}

p {
    font-size: 0.78125rem;
    font-weight: normal;
    color: white;
    font-family: "Inter", sans-serif;
}

span {
    font-size: 0.78125rem;
    font-weight: normal;
    color: white;
    font-family: "Inter", sans-serif;
}

header a { /* Target the specific <a> tag wrapping your logo */
    display: block; /* Make the anchor behave like a block element */
    width: 1.95375rem; /* Give the 'a' tag the same width as the image */
    height: 1.95375rem; /* Give the 'a' tag the same height as the image */
    /* Potentially remove any default text-decoration if you don't want an underline */
    text-decoration: none;
    /* If you have a margin-left on #Logo, you might move it to the 'a' tag */
    margin-left: 1.063rem; /* Apply the margin to the anchor tag instead of the image */
}

#Logo {
    width: 1.95375rem; /* 25px */
    aspect-ratio: 1;
    border-radius: 0.313rem; /* 5px */

    margin-left: 0rem; /* 10px off the left */
    /* margin-top/bottom: auto; not needed due to align-items: center on parent */
}

#PFP { /* This is the header PFP */
    width: 1.95375rem;
    aspect-ratio: 1;
    border-radius: 100rem;
    background-color: #181818;
    /* Remove or adjust this margin-right if #profileDropDownContainer handles outer spacing */
    /* margin-right: 1.063rem; */
    cursor: pointer;
}

#SearchBar {
    width: 29.297rem;
    height: 2.344rem;
    border-radius: 1000rem;
    background-color: #181818;
    border: none;
    font-size: 0.938rem;
    text-indent: 1.016rem;
    color: white;
}

#UserHeader {
    width: 58.59375rem;
    height: 6.25rem;
    aspect-ratio: 9.375;
    background-color: #282828;
    border-radius: 0.625rem;

    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    margin-top: 2.5rem;
    display: flex;
    justify-content: space-between; /* Pushes the 'left-content-group' to the left and the button div to the right */
    align-items: center; /* Vertically centers the 'left-content-group' and the button div within UserHeader */
}

.left-content-group {
    display: flex; /* Makes this group itself a flex container */
    align-items: center; /* Vertically centers the PFP and the h1/h2 div within this group */
}

#UserHeader #PFP {
    width: 5.46875rem;
    height: 5.46875rem;
    aspect-ratio: 1;
    border-radius: 100rem;
    margin-left: 0.78125rem;
    cursor: auto;
}

#UserHeader #GroupPFP {
    width: 5.46875rem;
    height: 5.46875rem;
    aspect-ratio: 1;
    border-radius: 0.313rem;
    margin-left: 0.78125rem;
}

#UserHeader #Connect {
    width: 8.20375rem;
    height: 1.1725rem;
    border-radius: 100rem;
    background-color: #2267BA;
    color: white;
    font-family: "Inter", sans-serif;
    font-size: 0.78125rem;
    border: 0;

    margin-right: 0.78125rem; /* Pushes the button 12.5px from the right edge of UserHeader */
    padding: 0.625rem 1.25rem; /* Add some padding to make button more visible/clickable */
    display: flex; /* To center text inside the button */
    justify-content: center;
    align-items: center;
    cursor: pointer; /* Indicate it's clickable */
}

#AboutSection {
    width: 58.59375rem;
    height: fit-content;
    background-color: #282828;
    border-radius: 0.78125rem;

    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    margin-top: 1.25rem;
}

#AboutSection > * {
    padding: 0.78125rem;
}

#AboutSection h1 {
    padding-bottom: 0rem;
}

#ExperienceSection {
    width: 58.59375rem;
    height: fit-content;
    background-color: #282828;
    border-radius: 0.625rem;

    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    margin-top: 1.5625rem;
}

#ExperienceSection > * {
    padding: 0.78125rem;
}

#ExperienceSection h1 {
    padding-bottom: 0rem;
}

#ExperienceItem {
    margin-bottom: 0.78125rem; /* Add space between the line and the next item */
    display: flex;
    justify-content: left;
}

/* Apply border to all list items EXCEPT the last one */
#ExperienceItem:not(:last-child) {
    padding-bottom: 0.78125rem;
    border-bottom: 1px solid rgb(94, 94, 94); /* Your desired line style */
}

/* Apply border to all list items EXCEPT the last one */
#ExperienceItem:last-child {
    margin-bottom: 0rem;
}

#ExperienceItem img {
    width: 2.5rem;
    height: 2.5rem;
    aspect-ratio: 1;
    border-radius: 0.313rem;
}

#ExperienceItem h1 {
    font-size: 1.016rem;
}

#ExperienceItem h2 {
    padding-bottom: 0.313rem
}

#SkillsSection {
    width: 58.59375rem;
    height: fit-content;
    background-color: #282828;
    border-radius: 0.78125rem;

    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    margin-top: 1.5625rem;
}

#SkillsSection > * {
    padding: 0.78125rem;
}

#SkillsSection h1 {
    padding-bottom: 0rem;
}

#SkillItem {
    margin-bottom: 0.78125rem; /* Add space between the line and the next item */
    display: flex;
    justify-content: space-between;
    padding-bottom: 0.313rem;
}

/* Apply border to all list items EXCEPT the last one */
#SkillItem:not(:last-child) {
    border-bottom: 1px solid rgb(94, 94, 94); /* Your desired line style */
}

/* Apply border to all list items EXCEPT the last one */
#SkillItem:last-child {
    margin-bottom: 0rem;
}

#SkillGroupList img {
    width: 1.25rem;
    aspect-ratio: 1;
    border-radius: 0.313rem;
}

#SkillItem img {
    width: 1.25rem;
    aspect-ratio: 1;
    border-radius: 0.313rem;
}

#JobSection {
    width: 58.59375rem;
    height: fit-content;
    background-color: #282828;
    border-radius: 0.625rem;

    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    margin-top: 1.5625rem;
}

#JobSection > * {
    padding: 0.78125rem;
}

#JobSection h1 {
    padding-bottom: 0rem;
}

/* Apply border to all list items EXCEPT the last one */
#JobItem:not(:last-child) {
    padding-bottom: 0.78125rem;
    border-bottom: 1px solid rgb(94, 94, 94); /* Your desired line style */
}

/* Apply border to all list items EXCEPT the last one */
#JobItem:last-child {
    margin-bottom: 0rem;
}

#JobItem:not(:first-child) {
    padding-top: 0.78125rem;
}

#JobItem h1 {
    font-size: 1.016rem;
}

#JobItem h2 {
    padding-bottom: 0.313rem
}

#Apply {
    width: 8.20375rem;
    height: 1.1725rem;
    border-radius: 100rem;
    background-color: #2267BA;
    color: white;
    font-family: "Inter", sans-serif;
    font-size: 0.78125rem;
    border: 0;

    margin-top: 0.625rem;
    margin-right: 0.78125rem; /* Pushes the button 12.5px from the right edge of UserHeader */
    padding: 0.625rem 1.25rem; /* Add some padding to make button more visible/clickable */
    display: flex; /* To center text inside the button */
    justify-content: center;
    align-items: center;
    cursor: pointer; /* Indicate it's clickable */
}

#GroupLinksSection {
    width: 28.516rem;
    height: fit-content;
    background-color: #282828;
    border-radius: 0.78125rem;

    vertical-align: middle;
    margin-top: 1.5625rem;
}

#GroupLinksSection > * {
    padding: 0.78125rem;
}

#HalfSplit {
    display: flex;
    /* Aligns items to the start (left) of the flex container */
    justify-content: center;
    /* Aligns items to the center vertically, assuming you still want this */
    align-items: flex-start;
    /* Adds 1em of space to the right of each direct child except the last */
    gap: 1.56175em;
}

#GroupConnectionList {
    margin: 0;
    padding: 0;
}

#GroupConnectionList img {
    width: 2rem;
    height: 2rem;
    border-radius: 100rem;
    margin-left: 0.78125rem;
    background-color: #181818;
}

#GroupConnectionList a {
    text-decoration: none;
}

#profileDropDownContainer {
    position: relative; /* Crucial for positioning the dropdown relative to this container */
    display: flex; /* Make this a flex container to align PFP properly within it if needed */
    align-items: center; /* Vertically center PFP if it's the only direct child or has siblings */
    justify-content: center; /* You had this, but remove if not needed for horizontal alignment */
    /* Adjust margin-right if you want spacing from the header's right edge */
    margin-right: 1.063rem; /* Example: 17px margin from right of header */
}

#profileDropDown {
    display: none; /* Hidden by default */
    position: absolute; /* Position it relative to #profileDropDownContainer */
    top: 100%; /* Change from calc(100% + 5px) to 100% */
    right: 0; /* Align it to the right edge of the container */
    z-index: 1000; /* Ensure it appears above other content */

    padding: 0.2em;
    background-color: #282828;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    /* align-items: flex-start; and justify-content: center; are for flex containers,
       not for the dropdown itself unless its contents are also flex.
       You might need to add display: flex; flex-direction: column; if you want to use them. */
    height: fit-content;
    width: fit-content; /* Or a fixed width like 150px */
    min-width: 120px; /* Ensure it's wide enough for text */
    white-space: nowrap; /* Prevent text from wrapping if desired */
    border-radius: 0.313rem; /* Add some border radius for styling consistency */
}

#profileDropDown > * {
    text-decoration: none;
}

/* Show the dropdown when the PARENT CONTAINER is hovered */
#profileDropDownContainer:hover #profileDropDown {
    display: block;
}

#profileDropDown a {
    display: flex; /* Make each link a flex container */
    align-items: center; /* Vertically center content (h2) */
    justify-content: flex-start; /* Or center if you want h2 text centered */
    padding: 0.5em 1em; /* Existing padding */
    text-decoration: none;
    color: white;
}

#profileDropDown a h2 {
    margin: 0; /* Remove h2 default margins inside dropdown links */
    font-size: 0.78125rem; /* Ensure consistent size */
    color: inherit; /* Ensure color is inherited from 'a' */
}

#profileDropDown a:hover {
    background-color: #383838; /* Highlight on hover */
}

#profileDropDown h2 {
    margin: 0; /* Remove default h2 margins within dropdown */
    font-size: 0.78125rem; /* Keep text size consistent */
}

#LandingPage {
    /* 1. Center the div horizontally */
    margin-left: auto;
    margin-right: auto;
    /* You'll likely need a max-width or width for this to work effectively */
    width: 100%; /* Make it responsive up to max-width */

    /* 2. Center its inline/inline-block content horizontally */
    text-align: center;

    /* Add other styles for visualization */
}

#LandingPage h1 {
    font-family: "Bungee", sans-serif;
    font-weight: normal;
    font-size: 3.5rem;
}

#LandingPage h3 {
    font-family: "Bungee", sans-serif;
    font-weight: normal;
    font-size: 2rem;
    color: white;
}

#LandingPage h2 {
    font-family: "Bungee", sans-serif;
    font-weight: lighter;
    font-size: 1.15rem;
}

#LandingPage h4 {
    font-size: 1rem;
    font-weight: normal;
    color: #969696;
    font-family: "Inter", sans-serif;
}

#login-button {
    /* Button appearance styles (moved from inline) */
    background-color: #181818;
    border-radius: 100rem; /* Makes it a pill shape */
    text-decoration: none; /* Removes the underline from the link */
    height: 1.563rem;

    /* Flexbox for centering the h2 content */
    display: inline-flex; /* Use inline-flex so the button doesn't take full width, but behaves like a flex container */
    justify-content: center; /* Horizontally centers the h2 inside the button */
    align-items: center; /* Vertically centers the h2 inside the button */

    /* Padding for the button itself (moved and adjusted from h2's inline padding) */
    /* This padding will define the button's clickable area and overall size */
    padding: 0rem 1.15rem; /* Adjust vertical (0.5rem) and horizontal (2rem) padding as desired */

    /* Ensure the text color is white, as it's a dark button */
    color: white; /* This sets the default text color for content inside the button */

    margin-right: 1.063rem;

    cursor: pointer; /* Indicate that it's a clickable element */
}

/* Target the h2 specifically within the login-button */
#login-button h2 {
    /* Remove default margins from h2, which can interfere with Flexbox centering */
    margin: 0;

    /* Keep the h2's existing font styles. Color will inherit from .login-button */
    font-size: 0.78125rem; /* Based on your general h2 style */
    font-weight: normal; /* Based on your general h2 style */
    font-family: "Inter", sans-serif; /* Based on your general h2 style */
    color: inherit; /* Ensure h2 inherits the white color from the parent .login-button */
    white-space: nowrap; /* Prevents the text "Login" from wrapping onto multiple lines */
}

#RequestSection {
    width: 58.59375rem;
    height: fit-content;
    background-color: #282828;
    border-radius: 0.625rem;

    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    margin-top: 1.5625rem;
}

#RequestSection > * {
    padding: 0.78125rem;
}

#RequestSection h1 {
    padding-bottom: 0rem;
}

/* Apply border to all list items EXCEPT the last one */
.RequestItem:not(:last-child) {
    padding-bottom: 0.78125rem;
    border-bottom: 1px solid rgb(94, 94, 94); /* Your desired line style */
}

/* Apply border to all list items EXCEPT the last one */
.RequestItem:last-child {
    margin-bottom: 0rem;
}

.RequestItem:not(:first-child) {
    padding-top: 0.78125rem;
}

.RequestItem h1 {
    font-size: 1.016rem;
}

.RequestItem h2 {
    padding-bottom: 0.313rem
}

.RequestItem {
    display: flex;
    align-items: center;
    justify-content: space-between; /* This is already here, good */
    position: relative; /* Add this if you want the dropdown to escape header bounds */
}