/* BASIC COLOR VARIABLES! */
/* ==================================================================================================== */
/* Define CSS variables for colors used throughout the home page */
:root {
    --home-page-section-bg-color: #000d1e; /* Dark blue background color for home section */
    --home-content-first-color: #999; /* Light gray color for first level content */
    --home-content-arrows-color: #3c4a5b; /* Muted blue-gray for arrows */
    --home-content-name-color: #4b6c80; /* Medium blue for names */
    --home-content-multiple-text-color: #2c5278; /* Deep blue for multiple text elements */
    --home-content-p-color: #4b6c80; /* Blue for paragraph text */
    --home-content-p-village-color: #000d5f; /* Darker blue for village text */
    --home-content-p-village-hover-color: #0ef; /* Bright cyan on hover for village */
    --home-content-p-uni-color: #000d5f; /* Dark blue for university text */
    --home-content-p-uni-hover-color: #0ef; /* Bright cyan on hover for university */
    --home-content-cv-button-color: #2c5278; /* Blue for CV button text */
    --home-content-cv-button-bg-color: #0ef; /* Bright cyan for CV button background */
    --home-content-cv-button-hover-color: #0ef; /* Cyan color for CV button text on hover */
    --home-content-cv-button-hover-bg-color: #000d5f; /* Dark blue background on hover */
}

/* HOME-PAGE-SECTION! */
/* ==================================================================================================== */
/* Container for the home page section - centers content and applies background */
.home-page-section {
    display: flex;
    justify-content: center; /* horizontally center items */
    align-items: center;     /* vertically center items */
    background-color: var(--home-page-section-bg-color);
}

/* HOME-IMG! */
/* ==================================================================================================== */
/* Styles for the image container within the home section */
.home-img img {
    width: 25vw; /* relative width for responsiveness */
    animation: floatImage 3s ease-in-out infinite; /* subtle floating animation */
    border: 15px double #2c5278; /* double border with medium blue */
    border-radius: 500px 0 500px 0; /* rounded corners with a unique shape */
    box-shadow: 0 0.5rem 3rem rgba(173, 216, 230, 0.5); /* soft blue glow */
}

/* Floating animation keyframes for the image */
@keyframes floatImage {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2.5rem); /* float upward */
    }
    100% {
        transform: translateY(0); /* return to start */
    }
}

/* HOME-CONTENT! */
/* ==================================================================================================== */
/* Headings and text styles inside the home content container */

.home-content h3 {
    font-size: 18px;
    color: var(--home-content-first-color);
}

.home-content h1 #arrows {
    color: var(--home-content-arrows-color);
    letter-spacing: -15px;
    font-size: 5.6rem;
    font-weight: 700;
    line-height: 1.3;
}

.home-content h1 #name {
    color: var(--home-content-name-color);
    letter-spacing: -2px;
    word-spacing: 3px;
    font-size: 5.6rem;
    font-weight: 700;
    line-height: 1.3;
}

.home-content h4 {
    font-size: 18px;
    color: white;
}

.home-content .multiple-text {
    font-size: 25px;
    color: var(--home-content-multiple-text-color);
}

.home-content p {
    font-size: 22px;
    color: var(--home-content-p-color);
}

/* Paragraph text span for village with hover effect */
.home-content p #village {
    color: var(--home-content-p-village-color);
}

.home-content p #village:hover {
    color: var(--home-content-p-village-hover-color);
    text-decoration: underline;
}

/* Paragraph text span for university with hover effect */
.home-content p #uni {
    color: var(--home-content-p-uni-color);
}

.home-content p #uni:hover {
    color: var(--home-content-p-uni-hover-color);
    text-decoration: underline;
}

/* HOME-BUTTON! */
/* ==================================================================================================== */
/* Styles for the CV button */
.cv-button {
    display: inline-block;
    padding: 1rem 2.8rem;
    color: var(--home-content-cv-button-color);
    background-color: var(--home-content-cv-button-bg-color);
    border-radius: 4rem;
    box-shadow: 0 0 1rem #2c5278;
    font-size: 18px;
    letter-spacing: 3px;
    word-spacing: 5px;
    font-weight: 600;
    transition: .5s ease;
    margin-bottom: 10px;
    width: 270px;
    height: 50px;
}

/* CV button hover effect */
.cv-button:hover {
    color: var(--home-content-cv-button-hover-color);
    background-color: var(--home-content-cv-button-hover-bg-color);
}

/* MOBILE-PHONE-SCREENS-UP-TO-768-PIXELS! */
/* ==================================================================================================== */
/* Responsive adjustments for screens up to 768px wide */
@media (max-width: 768px) {
    /* Stack home section content vertically and add margin */
    .home-page-section {
        margin-top: 60px;
        flex-wrap: wrap;
        flex-direction: column;
    }

    /* Image becomes fixed width, changes border-radius and margin */
    .home-img img {
        width: 250px;
        height: 50%;
        animation: floatImage 3s ease-in-out infinite;
        border: 15px double #2c5278;
        border-radius: 100px 100px 100px 100px; /* fully rounded corners */
        box-shadow: 0 0.5rem 3rem rgba(173, 216, 230, 0.5);
        margin: 50px 0 50px 0;
    }

    /* Center and style headings for smaller screens */
    .home-content h3 {
        font-size: 18px;
        color: var(--home-content-first-color);
        text-align: center;
        margin-top: -50px;
    }

    .home-content h1 {
        text-align: center;
        margin-top: 10px;
    }

    .home-content h4 {
        font-size: 14px;
        color: white;
        margin-top: 40px;
        height: 30px;
        text-align: center;
    }

    .home-content .multiple-text {
        font-size: 25px;
        color: var(--home-content-multiple-text-color);
    }

    /* Adjust paragraph font size and margin */
    .home-content p {
        font-size: 15px;
        color: var(--home-content-p-color);
        margin-top: 40px;
    }

    /* Center the div containing the CV button */
    .cv-div {
        text-align: center;
    }

    /* Smaller CV button adjustments */
    .cv-button {
        display: inline-block;
        padding: 10px 5px 10px 5px;
        color: var(--home-content-cv-button-color);
        background-color: var(--home-content-cv-button-bg-color);
        border-radius: 4rem;
        box-shadow: 0 0 1rem var(--main-color);
        font-size: 14px;
        letter-spacing: 3px;
        word-spacing: 5px;
        font-weight: 600;
        transition: .5s ease;
        margin-bottom: 20px;
        width: 210px;
        height: 40px;
    }
}

/* ==================================================================================================== */