/* Importing Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Chango&family=Fredoka:wght@400&display=swap');

/* Basic Reset and Body Styling */
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #F1F1F1; /* Background colour */
    font-family: 'Fredoka', sans-serif; /* Default font */
    line-height: 1.6;
}

/* Header Styling */
header {
    padding: 20px 0; /* Adding some spacing */
}

/* Logo Styling */
#logo {
    display: block; /* Needed for margin auto centering */
    margin-left: auto;
    margin-right: auto;
    max-width: 500px; /* Adjustable size as needed */
    height: auto; /* Maintaining aspect ratio */
}

/* Main Content Area */
main {
    padding: 20px; /* Adding some spacing */
}

/* Contact Container Rule */
.contact-container {
    display: block; /* Making the container a block */
    text-align: center; /* Centering the link within it */
    margin: 20px auto 40px auto; /* Applying spacing */
}

/* Contact Link Styling */
#contact-link {
    font-family: 'Fredoka', system-ui; /* Fredoka font with system-ui fallback font */
    font-size: 3.0em;
    letter-spacing: -0.07em; /* Negative 7% letter spacing */
    color: #DFC674; /* 'Contact' link color */
    text-decoration: none; /* To remove underline */
}

/* About Section Styling (Flexbox for layout) */
.about-section {
    display: flex;
    justify-content: center; /* Centering items horizontally */
    align-items: flex-start; /* Aligning items to the top */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 30px; /* Space between image and text block */
    max-width: 900px; /* Limiting width for better readability */
    margin: 0 auto; /* Centering the section container */
    padding: 20px;
}

/* About Me Picture Styling */
#about-pic {
    display: block;
    width: 100%; /* Making width responsive */
    max-width: 250px; /* Maximum width for the image */
    height: auto; /* Maintaining picture's aspect ratio */
    border-radius: 25%; /* Rounded corners */
    object-fit: cover; /* Ensuring image covers the area well */
}

/* Container for Text Content (Heading + Body) */
.about-text-content {
    flex: 1; /* Allowing text content to take available space */
    min-width: 250px; /* Preventing text block from becoming too narrow */
}

/* About Me Heading Styling */
#about-heading {
    font-family: 'Chango', system-ui; /* Chango font with system-ui fallback font */
    color: #DFC674; /* Heading text colour */
    letter-spacing: -0.035em; /* Negative 0.035 letter spacing */
    margin-top: 0; /* Aligning top with image */
    margin-bottom: 10px; /* Space below heading */
    font-size: 2.5em; /* Adjustable font size through value */
}

/* About Me Body Styling */
#about-body {
    font-family: 'Fredoka', system-ui; /* Fredoka font with system-ui fallback font */
    color: #616161; /* Text colour */
    letter-spacing: -0.01em; /* Negative 1% letter spacing */
    margin-top: 0; /* Resetting default paragraph margin, if needed */
    text-align: justify; /*To justify the text content */
    font-size: 1.5em; /* Adjustable font size through value */
}

/* Style for the highlighted text within the about body */
#about-body .highlight-name {
    font-family: 'Fredoka One', system-ui; /* Special Fredoka One name highlight with system-ui fallback font */
    color: #DFC674; /* Text colour */
}

#about-body .highlight-linkedin {
    font-family: 'Fredoka One', system-ui; /* Special Fredoka One linkedin highlight with system-ui fallback font */
    color: #72A6C0; /* Text colour */
}

#about-body .highlight-youtube {
    font-family: 'Fredoka One', system-ui; /* Special Fredoka One youtube highlight with system-ui fallback font */
    color: #A84545; /* Text colour */
}

#about-body .highlight-hagt {
    font-family: 'Fredoka', system-ui; /* Special Fredoka have a great time highlight with system-ui fallback font */
    color: #DFC674; /* Text colour */
}

/* Hyperlink Buttons Section Styling */
.hyperlink-buttons {
    display: flex; /* Enabling flexbox */
    justify-content: center; /* Center buttons horizontally */
    align-items: center; /* Aligning items vertically */
    gap: 25px; /* Space between buttons */
    margin-top: 30px; /* Space above the buttons */
    padding: 20px 0; /* Padding for top/bottom */
}

/* Individual Social Button Styling */
.social-button {
    display: inline-flex; /* Using inline-flex to size based on content + padding */
    justify-content: center; /* Centering icon horizontally */
    align-items: center; /* Centering icon vertically */
    width: 90px; /* Fixed width */
    height: 90px; /* Fixed height */
    border-radius: 50%; /* Making the button round */
    text-decoration: none; /* Removing underline from link */
    /* transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth hover effect */
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
}

.social-button i {
    font-size: 3.0em; /* Adjustable icon size */
    color: #DFC674; /* Icon color */
    line-height: 1; /* Ensuring icon is centered vertically */
}

/* Specific Button Background Colors */
.linkedin-button {
    background-color: #72A6C0; /* LinkedIn icon background */
}

.youtube-button {
    background-color: #A84545; /* YouTube icon background */
}

/* Hover effect for buttons */
/* .social-button:hover {
    /* transform: translateY(-3px); /* Lifting button slightly */
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* To increase shadow */
/* }

/* Responsive Design: Vertical Layout for smaller screens */
/* --- Breakpoint set at 768px (adjustable) --- */
@media (max-width: 768px) {
    .about-section {
        flex-direction: column; /* Stacking items vertically */
        align-items: center; /* Centering items horizontally in the column */
        gap: 20px; /* Adjusting gap for vertical layout */
    }

    #about-pic {
        max-width: 50%; /* Allowing image to be larger relative to screen dimensions */
        margin-bottom: 10px; /* Adding space below image */
        /* Position is now centered horizontally due to align-items: center in .about-section*/
    }

    .about-text-content {
        width: 100%; /* Taking full width */
        max-width: 500px; /* Limiting text width */
        text-align: center; /* Centering the text within its container */
        /* Position is now below the image */
    }

    #about-heading {
        /* Position is now centered (handled by .about-text-content text-align) */
        font-size: 3.0em; /* Adjustable font size */
    }

    #about-body {
        /* Position is now centered (handled by .about-text-content text-align) */
        font-size: 1.5em; /* Adjustable font size */
    }

    .hyperlink-buttons {
        flex-direction: row; /* Stacking buttons horizontally */
        gap: 20px; /* Adjusting horizontal gap */
        margin-top: 20px; /* Adjusting top margin */
    }
}