@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Amiko:wght@400;600;700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Amiko:wght@400;600;700&family=Flamenco:wght@300;400&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

body, html {
    margin: 0; /* Remove default margins */
    padding: 0; /* Remove default padding */
    height: 100%; /* Ensure full height for the viewport */
    overflow: hidden; /* Prevent scrolling */
    font-family: 'Amiko', sans-serif;
}

.meet {
    color: #A2A2A2;
}

.cat {
    position: fixed;
    bottom: 0; /* Align to the bottom */
    right: 0; /* Align to the right */
    left: 800px;
    max-width: 50%; /* Adjust size based on screen */
    height: auto; /* Maintain aspect ratio */
    margin: 0; /* No extra spacing */
    z-index: 10; /* Keep above other elements */
    pointer-events: none; /* Prevent interference with interactions */
}

.profile-container {
    display: flex; /* Flexbox for side-by-side layout */
    align-items: flex-start; /* Align items to the top */
    gap: 10px; /* Add space between the photo and text */
    padding: 20px; /* Add some padding around the container */
    max-width: 90%; /* Limit container width */
    margin: 20px auto; /* Center the container on the page */
    min-height: 100vh; /* Minimum height */
    height: auto; /* Full viewport height */
    overflow: hidden; 
    flex-wrap: wrap;
}

.profile-photo {
    /* width: 40%; */
    /* height: 90vh; */
    max-width: 40%; /* Prevent overflow */
    height: auto; /* Maintain aspect ratio */
    overflow: hidden; 
    object-fit: cover;
}

.profile-details {
    flex: 1; /* Allow text to take up remaining space */
    display: flex; /* Enable flexbox within the text container */
    flex-direction: column; /* Stack text vertically */
    justify-content: flex-start; /* Align content to the top */
    text-align: left;
}

.profile-details h1 {
    margin: 0; /* Remove default margin */
    /* font-size: 80px; */
    font-size: clamp(30px, 5vw, 80px); /* Minimum: 30px, Maximum: 80px */
    font-family: "Flamenco", system-ui;
    font-weight: 1000;
    font-style: normal;
    color: #926F78;
}

.profile-details p {
    margin: 10px 0; /* Space between paragraphs */
    line-height: 1.5; /* Improve readability */
}

.description {
    color: #666;
    /* font-size: 20px; */
    font-size: clamp(14px, 2vw, 20px); /* Adjust description font */
}

.button-container {
    position: relative; /* Enable positioning for the flowers relative to this container */
    display: inline-block; /* Shrink-wrap the button and flowers */
    max-width: 200px;
}

.about-button {
    display: inline-block;
    margin-top: 10px; /* Add spacing above the button */
    padding: 10px 20px;
    background-color: #926F78; /* Button background */
    color: white; /* Button text color */
    text-decoration: none; /* Remove underline */
    border-radius: 5px;
    font-size: 16px;
    position: relative; /* Keep button in the normal flow */
    z-index: 1; /* Ensure button stays above the cat */
    width: auto; /* Set a fixed width */
    text-align: center; /* Ensure text is centered */
    overflow: hidden; /* Hide any parts of flowers outside the button */
}

.about-button:hover {
    background-color: #9F8189;
    transition: background-color 0.5s; /* Smooth transition for hover */
}

.flower {
    position: absolute; /* Position flowers relative to the button-container */
    width: 30px; /* Adjust size */
    height: auto; /* Maintain aspect ratio */
    opacity: 0; /* Hidden by default */
    transform: scale(0.5); /* Start small */
    transition: opacity 0.4s, transform 0.4s ease-in-out;
    pointer-events: none; /* Prevent the flowers from interfering with button clicks */
    z-index: 1;
}

/* Top-right flower */
.flower.top-right {
    top: -5px; /* Position slightly above the button */
    right: -10px; /* Position slightly to the right of the button */
}

/* Bottom-left flower */
.flower.bottom-left {
    bottom: -5px; /* Position slightly below the button */
    left: -20px; /* Position slightly to the left of the button */
}

/* Hover effect */
.button-container:hover .flower {
    opacity: 1; /* Show flowers */
    transform: scale(1); /* Grow to full size */
}

.cat-drawing {
    position: fixed; /* Fix to the viewport */
    bottom: 0; /* Align to the bottom of the screen */
    right: 120px; /* Align to the right of the screen */
    max-width: 25%; /* Adjust size */
    height: auto; /* Maintain aspect ratio */
    z-index: 0; /* Send it behind main content */
    pointer-events: none; /* Prevent interference with user interactions */
}

/* For tablets and smaller devices */
@media (max-width: 768px) {
    .profile-container {
        flex-direction: column; /* Stack elements vertically */
        gap: 20px; /* Adjust spacing for smaller screens */
    }

    .profile-photo {
        height: auto; /* Allow the photo to resize dynamically */
        width: 100%; /* Full width on smaller devices */
    }

    .profile-details h1 {
        font-size: 50px; /* Smaller heading */
    }

    .about-button {
        width: 100%; /* Make the button span full width */
    }
}

/* For phones */
@media (max-width: 480px) {
    .profile-container {
        padding: 10px; /* Reduce padding for smaller screens */
    }

    .profile-details h1 {
        font-size: 30px; /* Reduce heading size */
    }

    .cat-drawing {
        width: 50%; /* Shrink the cat drawing */
        right: 10px; /* Adjust positioning */
    }

    .about-button {
        padding: 10px; /* Reduce padding */
    }
}

@media (max-width: 480px) {
    body, html {
        overflow-y: auto; /* Enable vertical scrolling */
    }
}