/* A modern reset to remove default styles and set a base font */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Helvetica', 'Arial', sans-serif; /* A clean, modern font */
}

/* Styles for the whole page */
html, body {
    height: 100%; /* Makes the body fill the entire viewport height */
    background-color: #62C4C8; /* The teal background color */
    color: white; /* Default text color to white */
    overflow: hidden; /* Prevents scrollbars from appearing */
}

/* Styles for the header and navigation */
header {
    position: fixed; /* Fixes the header to the top of the page */
    top: 0;
    width: 100%;
    padding: 1.5rem 0; /* Adds some padding on the top and bottom */
    background-color: #62C4C8; /* The teal background color */
    z-index: 1000; /* Ensures the header is on top of other content */
}

nav ul {
    list-style: none; /* Removes bullet points */
    display: flex; /* Lays out the links in a row */
    justify-content: center; /* Centers the links horizontally */
    gap: 2rem; /* Adds space between the navigation items */
}

nav a {
    color: white;
    text-decoration: none; /* Removes the underline */
    font-weight: bold;
    font-size: 1rem; /* Increased the font size */
}

/* Styles for the main content area */
main {
    height: 100%;
    display: flex; /* Uses Flexbox for layout */
    flex-direction: column; /* Stacks children vertically */
    justify-content: center; /* Centers children vertically */
    align-items: center; /* Centers children horizontally */
    text-align: center;
    padding: 0 1rem; /* Adds some padding on the sides */
}

/* Styles for the big "ALEX CIRONE" text container */
.hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Styles for "ALEX" and "CIRONE" */
.name-part {
    font-size: 10vw; /* Responsive font size based on viewport width */
    font-weight: bold;
    line-height: 1; /* Reduces the space between the lines of text */
    text-transform: uppercase; /* Makes the text all caps */
}

/* Styles for the horizontal line between the names */
.separator {
    border: 0;
    height: 2px;
    background-color: white;
    width: 100%;
    margin: 1.5rem 0; /* Adds space above and below the line */
}

/* Styles for the tagline */
.tagline {
    margin-top: 1.5rem; /* Adds space above the tagline */
    font-size: 1.2rem;
    font-weight: normal;
}

/* Styles specific to the About page */
body.about-page {
    overflow: auto; /* Allow scrolling on the about page */
}

/* Adjusts the main container on the About page */
.about-page main {
    height: auto;
    padding: 8rem 2rem 4rem; /* Adds padding to make space for the header */
    justify-content: flex-start; /* Aligns content to the top */
}

/* Styles for the content container on the About page */
.about-container {
    display: flex;
    align-items: center; /* Vertically aligns the photo and text */
    gap: 4rem; /* Increases space between the image and the text */
    max-width: 1100px; /* Sets a max width for readability */
    margin: 0 auto; /* Centers the container */
}

/* Styles for the profile picture on the About page */
.profile-pic {
    width: 400px; /* Increased the width of the photo */
    border-radius: 15px; /* Adds rounded corners */
}

/* Styles for the text section on the About page */
.about-text {
    flex: 1; /* Allows the text to take up the remaining space */
    text-align: left; /* Aligns the text to the left */
}

/* Styles for the heading on the About page */
.about-text h1 {
    font-size: 3rem; /* Decreased the font size */
    margin-bottom: 1.5rem; /* Adjusted the margin */
    line-height: 1.2;
}

/* Styles for the paragraphs on the About page */
.about-text p {
    font-size: 1rem; /* Decreased the font size */
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Styles for the vertical social media bar */
.social-bar {
    position: fixed; /* Fixes the position relative to the viewport */
    left: 0; /* Aligns it to the left edge */
    top: 50%; /* Positions the top of the bar at the vertical center */
    transform: translateY(-50%); /* Shifts the bar up by half its height to truly center it */
    background-color: #8A2BE2; /* The same purple as the chat box */
    padding: 1rem 0.5rem; /* Adds some padding */
    border-radius: 0 10px 10px 0; /* Rounds the right corners */
    display: flex;
    flex-direction: column; /* Stacks the icons vertically */
    gap: 1.5rem; /* Adds space between the icons */
}

/* Styles for the icons in the social bar */
.social-bar a {
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
}

/* Styles for the purple chat box */
.chat-box {
    position: fixed; /* Fixes the position relative to the viewport */
    bottom: 2rem; /* 2rem from the bottom */
    right: 2rem; /* 2rem from the right */
    width: 50px;
    height: 50px;
    background-color: #8A2BE2; /* A nice shade of purple (BlueViolet) */
    border-radius: 50%; /* Makes it a circle */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer; /* Changes the cursor to a pointer on hover */
    font-size: 1.5rem;
    font-weight: bold;
}