/* app.css */

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: 0;
}



/* header */

.title-menu {
    display: flex;
    align-items: center;
    justify-content: start;
    height: 40px;
    background-color: #302F4d; /* Example background color */
    padding: 5px; /* Adjust padding as needed */
    position: fixed; /* Make the menu fixed */
    top: 0; /* Position at the top */
    left: 0; /* Position at the left */
    width: 100%; /* Make it span the full width of the viewport */
    z-index: 1000; /* Ensure it stays on top of other content */
}

.logo {
    height: 90px; /* Adjust based on your logo */
    margin-right: 10px; /* Space between logo and name */
}

.app-name {
    font-size: 18px; /* Adjust font size as needed */
    font-weight: bold;
    color: #C9DBBA;
    /* Additional styling for the app name */
}



/* control bar */

.control-bar {
    display: flex;
    justify-content: space-around; /* Distributes buttons evenly */
    align-items: center;
    position: fixed; /* Make the bar fixed */
    bottom: 0; /* Position at the bottom */
    left: 0; /* Start from the left */
    width: 100%; /* Span full width */
    height: 50px; /* Set the height of the control bar */
    background-color: #f0f0f0; /* Example background color */
    z-index: 1000; /* Ensure it stays on top of other content */
}

.nav-button {
    padding: 10px 20px;
    font-size: 16px; /* Adjust font size as needed */
    /* Additional styling for buttons? */
}

#heartBtn {
    background-color: #EEC0C6;
}

#saveBtn {
    background-color: #C9DBBA;
}



/* image container */

.main-content {
    padding-top: 50px; /* Adjust this value based on the total height of your title menu */
    padding-bottom: 50px; /* Adjust this value based on the total height of your control bar */
    /* Rest of your content styling */
    height: 100vh; /* Ensure it takes at least the full height of the viewport */
    width: 100%; /* Ensure it takes the full width of the viewport */
    background-image: url('./gfx/loading.png'); /* Replace with your image path */
    background-size: cover;  /* Cover the entire area */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
}