@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Pacifico&family=Shippori+Mincho&family=Zhi+Mang+Xing&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*Base: Mobile*/

.landing-banner {
    /*background: linear-gradient(to bottom right, #5C1F60 0%, #5C1F60 45%, #9D0BA4 100%);*/
    background-image: url('../images/mob-landing-banner.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: scroll;
    background-size: cover;
    width: 100%;
    height: 100dvh;  /* Use viewport height for better responsiveness */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: flex-start; /* Align items to the left */
    justify-content: center; /* Vertically center the content */
    overflow: hidden;  /* Prevent image overflow */
    padding-left: 10%;  /* Add some space from the left edge */
    position: relative;
    z-index: 0; /* At the very back  */
}

.landing-banner #img-note-guy {
    display: none;
}

.landing-banner #img-note-bear {
    display: none;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;  /* Ensures the image stays inside the div */
}

.landing-banner #img-flower-vase {
    display: flex;
    height: 300px;
    width: auto;
    object-fit: contain;  /* Ensures the image stays inside the div */
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 1; /* So that it goes below these buttons */
}

.landing-text, .landing-desc {
    color: #FFD0D0;
    font-family: 'Zen Old Mincho';
    font-size: 4rem;
    z-index: 2;            /* Ensure text is on top of the background */
    position: relative;    /* Keep text in flow */
    margin-bottom: 10px;   /* Space between text elements */
}

.landing-text {
    margin-bottom: 0;      /* Remove space after "Learning" */
}

.landing-desc {
    color: #BEA5B4;
    font-family: "Zhi Mang Xing", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 1.3rem;
    position: relative;
    margin-top: 5px;
    margin-bottom: 20px;   /* Space between the description and buttons */
    max-width: 70%;        /* Optional: limit the width of the description */
    line-height: 1.5;      /* Improve readability of the description */
}

.cursor {
  display: inline-block;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

button {
    width: 15rem;
    font-family: 'ADLaM Display';
    font-weight: bold;
    font-size: 1.5rem;
    padding: 10px 15px;
    border: 2px solid #FFFFFF;
    border-radius: 30px;
    background-color: #501a53;
    color: #FFFFFF;
}

.button-container {
    display: flex;
    gap: 20px;  /* Add space between buttons */
    z-index: 2;
}

/* Create the hover effect */
button:hover {
    background-color: #FFFFFF;
    border-width: 2.8px;
    color: #501a53;
    animation: borderAnimation 1s infinite alternate; /* Animate border on hover */
}

/* Keyframe for the border animation */
@keyframes borderAnimation {
    0% {
        border-color: #501a53; /* Dark purple */
    }
    25% {
        border-color: #6a1b9a; /* Medium purple */
    }
    50% {
        border-color: #9d0ba4; /* Lighter purple */
    }
    75% {
        border-color: #b33e7e; /* Lighter magenta */
    }
    100% {
        border-color: #e91e63; /* Bright pinkish-purple */
    }
}

.btn-opace {
    background-color: rgba(80, 26, 83, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.5);
}

#signup-btn {
    display: none;
}

/* Flexbox to make the content inside each card align horizontally */
.landing-card {
    display: flex;
    flex-direction: column;  /* Stack vertically on small screens */
    text-align: center;
    align-items: center; /* Vertically center content */
    gap: 20px; /* Space between image and text */
    margin-bottom: 20px; /* Space between cards */
    /*padding-right: 20%; /* To align cards to my will */
}

/* Ensure images and text are sized properly */
.l-pic {
    flex-shrink: 0;  /* Prevent image from shrinking */
}

.l-pic img {
    width: 250px; /* Adjust image size as needed, mobile views may be ~100px */
    height: auto;  /* Maintain aspect ratio */
}

/* Default order: Image on left, text on right */
.l-text {
    font-family: "Dancing Script", cursive;
    font-size: 1.6rem;
    font-weight: auto;
    line-height: 1.5;
    color: #333; /* Adjust text color */
}

.lt2 {
    margin-top: 5px;       /* Slight space between "Learning" and "Logs" */
}


/* Tablets */
@media (min-width: 601px) {
    .landing-banner {
        background-image: url('../images/tab-desk-landing-banner.png');
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: scroll;
        background-size: cover;
    }

    /* Hide note bear from tabs and desktops */
    .landing-banner #img-note-bear {
        display: none;
    }

    .landing-banner #img-flower-vase {
        height: 400px;
        left: 40px;
    }

    .landing-desc {
        font-size: 1.7rem;
    }

    .landing-card {
        flex-direction: row;
        text-align: left;
    }

    /* For the second card, reverse the order (text first, then image) and align it to the far right */
    .landing-card:nth-child(2) {
        display: flex;
        flex-direction: row-reverse;  /* Reverse the order of the text and image */
        justify-content: flex-end; /* Push content to the far right of the container (Didn't work as exp.) */
        gap: 20px; /* Ensure spacing between image and text */
        padding-left: 20%;  /* Push this card to the far right of the container (Special) */
        padding-right: 0px;
    }

    .l-pic img {
        width: 250px; /* Adjust image size for tabs. */
    }

    button {
        width: 9rem;
        border-radius: 0px;
    }

    #signup-btn {
        display: flex;
    }
    

}

/* Desktops */
@media (min-width: 993px) {
    .landing-banner #img-note-guy {
        display: none;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;  /* Ensures the image stays inside the div */
        position: absolute;   /* Position the image freely inside the div */
        bottom: 0;            /* Align image at the bottom */
        right: 0;             /* Align image at the right */
    }

    .l-pic img {
        width: 350px; /* Adjust image size for desk. */
    }
  
}