styles.css

/* Global Reset: Standardize styles across different browsers */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* Body Styles: Set the global font and prevent horizontal overflow */
body {
    font-family: Arial, sans-serif;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Intro Section: Centered circle with animation on landing page */
.intro {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #111; /* Dark background for the intro */
    position: relative;
    overflow: hidden;
    z-index: 10;
}

.intro-circle {
    width: 100px;
    height: 100px;
    position: middle;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    border-radius: 50%;
    background-color: #fff; /* White circle */
    transition: all 1.5s ease;
    z-index: 2;
}

.outline {
    position: absolute; /* Position the outline absolutely */
    width: 140px; /* Width larger than the circle */
    height: 140px; /* Height larger than the circle */
    border: 3px dotted transparent; /* Initial transparent border */
    border-radius: 50%; /* Make it a circle */
    animation: colorChange 2s infinite, spin 10s linear infinite;; /* Animate the color change */
    z-index: 1; /* Position it behind the circle */
    transition: transform 0.3s ease; /* Smooth transition for scaling */
}

@keyframes colorChange {
    0% { border-color: red; }
    25% { border-color: blue; }
    50% { border-color: green; }
    75% { border-color: yellow; }
    100% { border-color: red; } /* Loop back to the start */
}

/* Expanded Circle */
.intro.expanded .intro-circle {
    width: 3000%; /* Large enough to cover the entire viewport */
    height: 3000%;
    border-radius: 30%; /* Keep it round during the transition */
    background-color: #fff;
    position: middle;
    top: 50%;
    left: 50%;
    transform: translate(0, 0);
    z-index: 1;
}

/* Hidden Intro */
.intro.hidden {
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Arrow Animation */
.down-arrow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    animation: arrowMove 2s infinite;
    z-index: 3;
    opacity: 1; /* Visible in intro */
}

@keyframes arrowMove {
    0% { top: 0; opacity: 0; }
    50% { top: 50px; opacity: 1; }
    100% { top: 100px; opacity: 0; }
}

/* Hide the arrow after intro */
.intro.hidden .down-arrow {
    display: none;
}

/* Hero Header: Full-screen background image with central text */
.hero-header {
    background-image: url('./images/portfolioHeader.jpg'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: opacity 1.5s ease-in;
    position: relative;
    z-index: 8;
}

.hero-header.visible {
    opacity: 1;
}


/* Name Container: Animates first and last names in the header */
.name-container {
    position: relative;
    width: 100%;
    height: 100px; /* Adjust the height as needed */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Ensure no overflow is visible */
}

/* Style for the first name */
.first-name {
    position: absolute;
    bottom: 50%;
    left: -100%; /* Start off-screen to the left */
    font-size: 4em; /* Adjust font size as needed */
    color: white;
    animation: slideInOutLeft 4s infinite; /* Continuous animation */
}

/* Style for the last name */
.last-name {
    position: absolute;
    top: 50%;
    right: -100%; /* Start off-screen to the right */
    font-size: 4em; /* Adjust font size as needed */
    color: white;
    animation: slideInOutRight 4s infinite; /* Continuous animation */
}

/* Keyframe animation for sliding in and out from the left */
@keyframes slideInOutLeft {
    0% {
        left: -100%;
        opacity: 0;
    }
    25% {
        left: -100%;
        opacity: 0;
    }
    50% {
        left: 50%;
        transform: translateX(-50%);
        opacity: 1;
    }
    75% {
        left: 50%;
        transform: translateX(-50%);
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

/* Keyframe animation for sliding in and out from the right */
@keyframes slideInOutRight {
    0% {
        right: -100%;
        opacity: 0;
    }
    25% {
        right: -100%;
        opacity: 0;
    }
    50% {
        right: 50%;
        transform: translateX(50%);
        opacity: 1;
    }
    75% {
        right: 50%;
        transform: translateX(50%);
        opacity: 1;
    }
    100% {
        right: 100%;
        opacity: 0;
    }
}

/* Navigation Bar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 15px 0;
    z-index: 1000;
    transition: top 0.3s;
}

.navbar ul {
    list-style-type: none;
    text-align: center;
}

.navbar ul li {
    display: inline-block;
    margin: 0 15px;
}

.navbar ul li.separator {
    display: inline-block;
    color: #fff;
}

.navbar ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    transition: color 0.3s;
}

.navbar ul li a:hover {
    color: #ddd;
}

/* Section Styles */
.section {
    padding: 60px 20px;
    text-align: center;
}

/* Initial background color */
#about.blue-ribbon {
    background-color: #5A7FC8; 
    transition: background-color 0.5s ease; /* Smooth transition */
}

/* Background color when the section is in view */
#about.blue-ribbon.in-view {
    background-color:  #252E8A; /* Change to dark blue when in view */
}

/* Flexbox container for the About Me section */
.about-content {
    display: flex;
    align-items: stretch; /* Align items to stretch to the same height */
    justify-content: center; /* Center the content */
    padding: 50px;
}

/* About Section Layout */
.about-container {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
    padding: 40px 20px;
}

.about-text {
    flex: 1;
    color: #fff;
    margin-right: 20px;
}

.about-media {
    flex: 1;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-media a {
    margin-bottom: 20px; /* Space between images */
    position: relative;
    width: 100%; /* Make images responsive */
    max-width: 300px; /* Limit the width */
    transition: transform 0.3s ease;
}

.about-media img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.about-media .image-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 16px;
    padding: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.date-info {
    position: absolute;
    top: 50%; /* Start vertically centered */
    right: 110%; /* Position it to the left of the image */
    transform: translateY(-50%); /* Center it vertically */
    color: #fff;
    font-size: 30px; /* Make text larger */
    padding: 5px;
    width: 400px; /* Set a specific width */
    opacity: 0; /* Initially invisible */
    transition: right 0.3s ease, opacity 0.3s ease;
}

.about-media a:hover .image-title {
    opacity: 1;
}

.about-media a:hover .date-info {
    right: 100%; /* Slide out from the right side of the image */
    opacity: 1; /* Make it visible */
}

.about-media a:hover img {
    transform: scale(1.1);
}


#about h2 {
    font-size: 60px; /* Larger font size for the header */
    margin-bottom: 20px; /* Add more spacing between the header and the text */
    color: #fff;
    gap: 30px; 
}

#about p {
    font-size: 30px; /* Larger font size for the text */
    line-height: 3; /* Increase line height for more vertical space */
    margin-bottom: 40px; /* Add more space at the bottom */
    color: #fff;
}

/* Projects Section Layout */
.project-section {
    padding: 50px;
}

/* Initial background color */
.project-section.pinkpurple {
    background-color: #5A7FC8;
    transition: background-color 0.5s ease;
}

/* Background color when the section is in view */
.project-section.pinkpurple.in-view {
    background-color: #0E0E34;
}

/* Centered header for the Projects section */
.projects-container {
    padding: 40px 20px;
    text-align: center;
}

#projects h2 {
    font-size: 60px;
    margin-bottom: 20px;
    color: #fff;
}

/* Flexbox container for the Projects boxes */
.project-boxes {
    display: flex;
    justify-content: space-between; /* Space between the boxes */
    gap: 40px;
    flex-wrap: nowrap; /* Prevent wrapping to keep boxes in one row */
}

/* Individual project box */
.project-box {
    flex: 1;
    min-width: 300px; /* Minimum width to maintain box size */
    max-width: 30%; /* Adjust width to keep boxes consistent */
    background-color: #252E8A;
    color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.project-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    background-color: #9A4D87;
}

.project-box h3 {
    font-size: 30px;
    margin-bottom: 10px;
}

.project-box p {
    font-size: 20px; /* Font size for the project descriptions */
    line-height: 1.8; /* Increase line-height for more space between lines */
    margin-bottom: 20px; /* Optional: Add more space below the paragraph */
}

/* Resume Section with Blurry Background Image */
.resume-background {
    position: relative;
    overflow: hidden; /* Hide any overflow from the blurred image */
    padding: 100px 50px; /* Adjust padding for better spacing */
    text-align: center; /* Center the content */
    background-color: transparent; /* Ensure the background is transparent */
}

.resume-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('./images/portfolioHeader.jpg'); /* Path to your background image */
    background-size: cover;
    background-position: center;
    filter: blur(15px); /* Adjust blur level here */
    z-index: -1; /* Place the blurred image behind the content */
    opacity: 1; /* Ensure the background image is fully opaque */
}

.resume-content {
    position: relative; /* Ensure the content stays above the background */
    color: white; /* Ensure the text color is white */
}

.resume-content h2 {
    font-size: 30px; /* Increase font size */
    margin-bottom: 40px; /* Increase spacing between header and button */
}

.resume-button {
    display: inline-block;
    padding: 15px 30px;
    font-size: 18px;
    background-color:  #da8c74; /* Button background color */
    color: #fff; /* Button text color */
    text-decoration: none; /* Remove underline */
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.resume-button:hover {
    background-color:  #73a0af; /* Background color on hover */
    transform: translateY(-5px); /* Slight lift effect on hover */
}
/* Contact Section Styling */
.ghost-color {
    background-color: #f8f8ff;
    color:  #6082B6 !important; /* Change font color */
    font-size: 40px;
    transition: filter 0.5s ease-out, opacity 0.5s ease-out;
    filter: blur(10px);
    opacity: 0;
    padding: 80px;
    text-align: center; /* Center the content horizontally */
}

/* Clear blur and opacity when section is in view */
.ghost-color.in-view {
    filter: blur(0);
    opacity: 1;
}

/* Contact Buttons Styling */
.contact-buttons {
    display: flex;
    justify-content: center; /* Center the buttons horizontally */
    gap: 240px; /* Further increase space between each button */
    margin-top: 90px; /* Add some space above the buttons */
}

.contact-button {
    position: relative; /* Create a new stacking context */
    display: inline-block;
    width: 70px; /* Further reduce the size of the button (logo) */
    height: 70px;
    transition: transform 0.3s ease;
}

.contact-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%; /* Keep the circles larger than the button */
    height: 150%;
    background-color: #6082B6;/* Initial circle color */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: -1; /* Place the circle behind the image */
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.contact-button img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure the entire image fits within the button */
    z-index: 1; /* Ensure the image is above the circle */
}

.contact-button:hover {
    transform: scale(1.15); /* Slightly enlarge the entire button on hover */
}

.contact-button:hover::before {
    transform: translate(-50%, -50%) scale(1.1); /* Enlarge the circle a bit more on hover */
    background-color:#ADD8E6; /* Change the circle color on hover */
}

.gray-bottom{
    background-color: #e2dfdf;
    color: #111;
}

/* Footer Styles */
footer {
    padding: 15px;
    font-size: 18px;
}

/* Logo Styles */
.logo {
    position: fixed;
    left: 5px;
    top: 3px;
    width: 50px;
    height: auto;
    animation: spin 5s linear infinite;
    transition: filter 0.5s smooth; /* Smooth transition for filter */
    cursor:pointer;
}

.logo-invert {
    animation: rgb-effect 2s infinite, spin 5s linear infinite;; /* Apply the RGB effect animation */
}

/* Logo Animation */
@keyframes rgb-effect {
    0% { filter:  drop-shadow(0 4px 4px blue); }
    25% { filter: drop-shadow(4px 0 4px red); } /* Increased shadow and added blur */
    50% { filter: drop-shadow(-4px 0 4px green); }
    75% { filter: drop-shadow(0 4px 4px yellow); }
    100% { filter: drop-shadow(0 4px 4px blue); } 
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}