@font-face {
    font-family: "regularfont";
    src: url(InstrumentSans-Regular.otf);
}

@font-face {
    font-family: "boldbaddiefont";
    src: url(InstrumentSans-Bold.otf);
}

body {
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.container {
    display: flex; /* Flexbox layout for a row */
    height: 100vh; /* Ensure the container covers the full height */
    overflow: hidden; /* Hide any overflow */
}

.ingredient {
    position: relative;
    flex: 1; /* Each image takes up equal space */
    height: 100vh; /* Ensure each image takes full screen height */
    overflow: hidden;
    display: flex;
    justify-content: center; /* Horizontally center the text */
    align-items: center; /* Vertically center the text */
}

.ingredient img {
    width: 100%; /* Each image will cover the full width of its container */
    height: 100%; /* Each image will take up the full height */
    object-fit: cover; /* Ensures the images cover the area without distortion */
}

.ingredient h2, .ingredient p {
    position: absolute;
    color: white;
    font-size: 2em;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Adds a shadow for better text visibility */
    margin: 0; /* Remove default margins */
    font-family: boldbaddiefont;
    display: flex; /* Enable Flexbox */
    flex-direction: column; /* Align text vertically */
    justify-content: center; /* Vertically center the text */
    text-align: center; /* Horizontally center the text */
    width: 80%; /* Ensure the text doesn't stretch too wide */
    word-wrap: break-word; /* Allow the text to wrap within the container */
}

.ingredient h2 {
    font-size: 2.5em; /* Adjusted font size */
    top: 40%; /* Adjust vertical positioning for title */
    line-height: 25px;
}

.ingredient p {
    font-size: 1.5em; /* Adjusted font size for description */
    bottom: 35%; /* Keep description near the bottom */
    line-height: 20px;
}

.shop-button {
    display: flex; /* Use flexbox for aligning the icon and text horizontally */
    align-items: center; /* Vertically center the icon and text */
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    background-color: #000; /* Black background */
    color: white; /* Text color */
    text-decoration: none; /* Remove underline from the link */
    border-radius: 20px; /* Rounded corners for the button */
    font-size: 1em;
}

.shop-button img {
    width: 24px; /* Size of the icon (adjust as needed) */
    height: 24px; /* Ensure the icon maintains aspect ratio */
    margin-right: 10px; /* Space between the icon and text */
}

.shop-button span {
    font-family: boldbaddiefont; /* Customize font if needed */
    font-size: 1em; /* Size of the text */
}

.shop-button:hover {
    background-color: #444; /* Darken the background on hover */
}